Posis

class 선택자 요소의 특정 부분에만 스타일 적용 마침표(.) 다음에 클래스 이름 지정 문서 안에서 여러 번 반복해서 사용할 수 있음, 중복 가능 id 선택자 요소의 특정 부분에만 스타일 적용 파운드(#) 다음에 id 이름 지정 문서 안에서 한번만 사용할 수 있음, 중복 불가 스타일 충동을 막는(Cascading)의 원칙 스타일 우선순위: 스타일 규칙의 중요도와 적용 범위에 따라 우선순위가 결정되고 그 우선순위에 따라 위에서 아래로 스타일 적용 스타일 상속: 태그들의 포함 관계에 따라 부모 요소의 스타일을 자식 요소로, 위에서 아래로 전달 Style 우선순위(높은 순서부터 작성) !important: 어떤 스타일보다 우선 적용되는 스타일 인라인 스타일: 해당 태그에만 적용되는 스타일 id 스타일: 문서..

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: 페이지의 전반적..