꼼찌냥1-web

1. 크기를 설정하는 속성 (width, height) : 만약 여러분들이 img 태그를 사용해서 경로만 지정할 경우 해당 이미지의 크기의 원본 사이즈에 해당하는 사이즈로 설정됩니다. 그러나 우리가 사용해야 하는 이미지의 크기가 한계가 존재하거나 기획된 단계에서는 해당 사이즈로 지정할 필요가 있습니다. 1-1. width : 너비를 지정할 때 사용하는 태그 입니다. 1-2. height : 높이를 설정할 때 사용하는 태그 입니다. 사용법 width: 크기입력, 단위입력 (px, em, %) ex) 아래의 이미지는 1913 * 1023 사이즈를 갖습니다. 그럼 기존 비율에 맞춰 400 * 225 사이즈로 img를 수정하여 이미지를 출력해 봅시다. 2. 이미지 설명 글 붙이기 2-1. 설명 글을 붙일 대상지..

HTML 2022. 9. 21. 23:40

1. 태그는 이미지를 웹 문서에 이미지를 삽입할 때 사용합니다. 사용방식 : [속성:"값"] 여기에서 src 속성은 이미지 속성의 URL 명시 합니다. source 말하는 약어이므로 기억하기 쉽죠. 아래의 이지미를 링크를 걸어봅시다. 웹상의 이미지는 저장권을 가지고 있으므로 주소복사를 하실 때에는 꼭 출처를 밝히주셔야 하니 유의해 주세요. 저 아래의 링크는 아래와 같습니다. https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fn8afw%2FbtrMC8SiFzC%2FLtxNX9F9G8ug3Zc5bd5RZ1%2Fimg.png 우선 아래와 같이 img src 속성으로 주소만 이미지는..

HTML 2022. 9. 20. 23:00

1. 웹 이미지 형식 : 웹 페이지에서 사용할 수 있는 이미지 파일은 파일 크기가 크지 않고 화질도 좋아야 합니다. 티스토리에서 JPEG,GIF,BMP,PNG 포맷을 지원합니다. 더 다양한 테스트는 안해봤습니다. 포토샵에서 파일 저장할 때에만 해도 다양한 포맷들이 존재합니다. 1-1. 웹 이미지들의 종류 A. TIFF TiFF:Tagged Image File Format의 약어로 고품질 이미지 인쇄 분야에서 오래 전부터 표준으로 사용되는 형식 입니다. 태그를 포함하고 있는 이미지 파일이기 때문에 포토샵에서 생성한 레이어를 지원합니다. 태그나 레이어를 지원하고 사용할 수 있기 때문에 이미지에 대한 압축되지 않는 고품질의 디지털 이미지로써 상업 또는 전문 작업을 인쇄하거나 출판을 위해 작업을 위한 파일형식이..

HTML 2022. 9. 19. 18:54

1. 태그란? Column 열 뜻합니다. col 태그는 한 열에 있는 모든 셀 같은 스타일을 적용할 때 사용합니다. 닫는 태그는 사용하지 않습니다. 또한, 두 개이상의 열을 묶어 스타일을 지정하라면 span 태그를 이용해 묶어 지정할 수 있습니다. 지난번에 배웠던 caption을 table border="1" 적용해서 아래와 같이 만들어 보았습니다. 2. 태그란? col 태그는 묶어서 사용할 수 있습니다. colgroup 태그안에 col 태그를 사용해서 묶어서 사용가능합니다. 사용 시 주의사항: tr, td, 태그 전에 사용해야 하며, caption 태그 뒤에 사용합니다. 이젠 아래와 같은 테이블을 생성하겠습니다. CSS에서는 태그 만들어주고, th, td 적당한 픽셀을 만들어 줍니다. 저는 colgro..

HTML 2022. 9. 19. 18:02

안녕하세요. 곰샤나 입니다. 오랫만에 html로 돌아왔습니다. 공부할 때에는 별 도움 되지 않는 것들인데 배우놓으면 언젠가는 쓰게 되더라구요. 1. 표 구조 정의 thead는 표의 제목, tbody는 본문, tfoot 요약을 정의할 때 사용합니다. T = table과 합쳐진 태그입니다. 아래와 같은 표에 caption을 통해 테이블 제목을 설정하고 CSS 적용해서 적당한 크기와 글자 정렬 패딩을 적용했습니다. 전 아래와 같이 적용했구요. 만약 해당 CSS 작성하지 않으셔도 테이블 정의하는데에는 문제는 없습니다. 다만 스타일 없어서 단순하게 나올 뿐이죠. CSS 미적용 시 아래와 같이 출력됩니다. 아래의 이미지는 참고만 하시고 여러분이 작성하고 싶은 테이블을 종이,엑셀,한글 등에 작성하세요. 이후에는 어떤..

HTML 2022. 9. 19. 17:27

1. 표 만들기 기본 형식은 아래와 같습니다. 내용 하나의 열이 생성됩니다. tr 태그 내에 td 태그를 내용을 입력하면 하나의 행이 생성된다고 보시면 됩니다. Ex ) 2열 3행 구조 = 내에 td /td td /td td /td /tr , td /td td /td td /td /tr 반복됩니다. 아래의 소스나 행과 열에 입력할 데이터를 가상으로 만드셔서 진행해 보시길 바랍니다. border와 margin 속성은 나중에 배우게 되므로, 태그를 생성하셔두 상관은 없습니다. 가전제품 에어콘 선풍기 냉장고 에어프라이기 컴퓨터용품 SSD CPU MainBoard 1-1. 표 제목 생성하기 : table head에 테이블에 대한 제목을 입력하실 수 있습니다. 위의 생성된 예제에서 해당 컬럼에 대한 제목을 입력했..

HTML 2022. 9. 17. 05:54

1. 설명 목록 태그 : 제목과 설명이 하나의 쌍인 설명 목록을 description list 생성하는 태그입니다. - 사용 방식 - 제목 설명 곰샤나 보물창고 1스테이지 10분안에 보물창고에 도달하기! 난이도 : 하 도달거리:1.3km 2. 프로필 생성 지금까지의 배운 태그들을 사용해서 프로필을 만들어 봅시다. gomsha 이메일 : 냥냥펀치 댕댕 핧퀴기@구글이닷냥 Introduction 슬로우 라이프를 추구하고 싶은 인간. My Skill Active blow punch knee kick head bomb passive coolness wisedom auror mode Agility 다음에는 table 생성하는 태그를 넘어가도록 하겠습니다. 다음 페이지 이전 페이지

HTML 2022. 9. 17. 05:26

1. ul 태그 : 일반적으로 항목의 순서와 없는 항목을 나열 할 때에 사용합니다. unorder list 만들 때 사 태그를 사용하고 그 안에는 item list 태그로 내용을 표시합니다. 회사 전화: (국번없이) 엄마 아빠 휴대 전화: 02-777-7777 2. ol 태그 : order list 항목들에 대한 순서가 필요한 목록 만들 때 태그를 사용합니다. 속성 type : ol 순서 목록 항목 앞에 시작할 값을 지정할 수 있습니다. start: 기본값은 1부터 시작하며, 시작하고 싶은 값을 넣어 지정할 수 있습니다. reversed: 항목을 역순표시. Tip: 만약 나열한 아이템이 많다면 태그를 닫지 않고 다음 리스트를 적어도 태그를 다시 만나게 되면 자동으로 해당 태그를 닫아줍니다. 개 두 마 리..

HTML 2022. 9. 17. 05:11