HTML
기본문법
<여는태그_ 속성="값">컨텐츠<닫는태그>
- 닫는 태그를 사용하지 않을 수 있는 태그도 있다
=> 컨텐츠를 감싸지 않음
<html>
<head>
</head>
<body>
</body>
</html>html 태그 안에 head 태그와 body 태그만을 자식요소로 순서대로 삽입한다.
- html
=> 문서의 루트- head
=> 기계가 식별할 수 있는 문서 정보- body
=> 문서의 내용
문서 타입 정의
<!DOCTYPE html>
- 웹브라우저를 표현하기 위한 레이아웃 엔진으로는 호환 모드, 거의 표준 모드, 표준 모드가 존재한다
- 호환 모드
=> 과거의 방식으로 제작된 웹사이트들을 표현하기 위함- 거의 표준 모드
=> 소수의 호환 모드만을 지원- 표준 모드
=> 오늘날 제작되는 브라우저들은 W3C에서 제정된 웹표준을 기반으로 만들어진다
<!DOCTYPE html>을 최상단에 선언함으로써 해당 문서는 표준 모드로 렌더링 되도록 한다
언어 설정
html 태그에 lang 속성을 삽입하여 값으로 해당 문서에서 주로 사용될 언어를 설정한다.
<html lang="언어-국가코드">
=> 한국어의 경우,<html lang="ko-KR">- 스크린 리더에서 읽어줄 때 사용될 언어로 설정되기도 한다
제목(heading)
h1태그부터 h6태그까지 사용하며, 구획의 단계와 컨텐츠의 구조를 나타낸다.
- h1은 필수적으로 문서에서 한번만 사용한다
- 무조건 h1부터 시작하며, heading 레벨을 건너뛰면 안 된다
=> h1 + h3- 글씨 크기를 위해 heading 요소를 사용해서는 안 된다
단락(paragraph)
p태그를 사용하며, 하나의 단락을 나타낸다.
block 요소이며, 하위에 다른 block 요소가 오게 되면 닫는 태그를 생략할 수 있다
피규어(figure)
주로 이미지, 영상,도표 등을 감싸주며, 문서 내에서 삭제하거나 이동해도 문서의 흐름과 상관없을 때 사용한다.
- 컨텐츠와 하나의 figcaption 요소를 감싸준다
=> figcaption은 figure 요소의 처음이나 끝에 위치하며, 해당 컨텐츠에 대한 설명을 나타낸다
이미지(image)
이미지를 삽입하는 방법 중 하나로 src 속성을 필수로 가지며, 선택적으로 alt 속성을 가진다.
- src속성으로 해당 이미지의 경로를 설정한다
- alt속성은 해당 이미지에 대한 간단한 설명을 나타내며, 필수는 아니지만 접근성 측면에서 사용하는 것이 좋다
=> figcaption 등을 사용해서 이미지에 대한 설명이 존재한다면 생략해도 무방하다- srcset 속성으로 이미지의 후보를 지정하고 반응형 이미지를 구현할 수 있다
- 닫는 태그는 가지지 않는다
목록
순차 목록, 비순차 목록
순차 목록은 ol, 비순차 목록은 ul을 사용한다.
순차 목록(ordered list)
순서를 바꿀 때 의미도 바뀌면 순차 목록을 사용한다.
- reversed 속성으로 순서를 역순으로 배열되도록 할 수 있다
- start 속성으로 순서의 시작을 바꿀 수 있다
- type 속성으로 기본적으로 표시될 list-type을 지정할 수 있다
=> 기본값은 1(숫자로 표현)
비순차 목록(unordered list)
기본적으로 list-type은 불릿 기호로 표현된다.
목록의 항목(list item)
각 목록의 항목들을 나타낼 때 사용되며, ul, ol, menu 안에만 위치할 수 있다.
- 바로 뒤에 다른 li가 오거나 마지막 li인 경우에는 닫는 태그를 생략할 수 있다
- value 속성을 사용하여 순서의 시작을 지정하거나, type 속성으로 list-type을 지정할 수 있다
=> ol 요소에서 지정하는 유형을 덮어쓴다
어제의 나보다 1% 발전하기💪