Posis

a 태그 하이퍼 링크를 걸어주는 태그입니다. href속성으로 걸어준 링크로 이동합니다. a 태그 속성 href: 클릭시 이동 할 링크 target: 링크를 여는 방법 _self: 현재 페이지 (기본값) _blank: 새 탭 _parent: 부모 페이지로, iframe 등이 사용된 환경에서 쓰입니다. _top: 최상위 페이지로, iframe 등이 사용된 환경에서 쓰입니다. 프레임이름: 직접 프레임이름을 명시해서 사용할 수도 있습니다. 네이버

img 태그 웹 문서에 이미지를 삽입할 때 사용합니다. img 속성 종류 src: 이미지 파일 경로 ./ 현재 폴더 ../ 상위 폴더 alt: 이미지를 설명하는 대체 텍스트, 시각장애인들이 사용하는 화면 낭독기에서 이미지 대신 대체 텍스트를 읽어 줌(웹 접근성) 레드향 이미지 크기 지정하기 이미지 크기는 보통 CSS에서 설정하지만 HTML에서도 가능합니다. 원래 크기의 이미지 width="50%", height="50%"로 지정한 이미지 width="150"으로 지정한 이미지

표를 만들기 위한 태그 caption: 표 제목 table: 표 전체 tr: 행 td: 셀 th: 제목 셀 선물용과 가정용 상품 구성 용도 중량 갯수 가격 선물용 3kg 11 ~ 16과 35,000원 선물용 5kg 18 ~ 26과 52,000원 가정용 3kg 11 ~ 16과 30,000원 가정용 5kg 18 ~ 16과 47,000원 CSS를 추가하지 않으면 표의 선이 없음 표 구조 정의하기 표의 구조를 '제목'과 '본문', '요약' 부분으로 나눈다. , , 태그 사용 웹 브라우저 화면에서 보이지 않지만, 화면 낭독기나 자바스크립트 등에서 읽을 수 있다. -> 시각 장애인도 표의 구조를 쉽게 이해할 수 있다. 표의 본문이 길 경우 자바스크립트를 이용해 제목과 바닥 부분을 고정하고 본문만 스크롤되도록 할 수..

ol, li 순서가 존재하는 목록을 만들 때 사용합니다. 항목1 항목2 항목3 ul, li 순서가 없는 목록을 만들 때 사용합니다. 항목1 항목2 항목3 dl, dt, dd '이름(제목)'과 '값(설명)' 형태로 된 목록 태그: 이름(제목) 지정 태그: 값(설명) 지정 하나의 에 여러 개의 값을 가질 수 있다. 상품 구성 선물용 3kg 소과 13 ~ 16과 중과 10 ~ 12과 선물용 5kg 중과 15 ~ 19과

br 줄을 바꿀 위치에 태그를 사용. 닫는 태그가 없음 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry. blockquote 글귀를 인용할 때 사욥합니다. 다른 텍스트보다 안으로 들여 써짐. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing Lorem Ipsum is simply dummy text of the print..

시맨틱 태그(Semantic Tag) 시맨틱 태그는 내가 정보를 담는 공간에 대해서 의미를 부여할 때 사용하는 태그입니다. 무언가를 담는 div태그는 class나 id를 적어주지 않는 이상 어떤 역할을 하는지 알 수 없는 태그지만 header, footer, aside와 같은 시맨틱 태그는 이 공간이 어떤 내용을 담을지에 대한 의미를 명확하게 알려줍니다. 시맨틱 태그 장점 검색엔진 최적화 코드 가독성 및 유지보수가 쉬워진다. 글을 소리로 알려주는 기계(스크린 리더기)를 사용하는 시작 장애인이 사이트의 구조를 소리로 구분할 수 있게 해줍니다. 시맨틱 태그 종류 header: 페이지의 제목과 같은 소개 내용을 포함합니다. nav: 페이지의 메뉴 혹은 목차등을 나타낼 때 사용합니다. main: 페이지의 전반적..