티스토리 뷰
Tag
웹 문서를 구성하는 명령어
꺽쇠 안에 들어있는 정보를 정의하는 형식
시작 태그와 종료 태그로 구성됨(종료 태그가 없는 종류도 있음)
Element
시작태그 + 내용 + 종료태그
- 빈 요소 : 내용이 없이 구조적인 기능만 하는 요소. <br /> <hr />
- 블록 요소 : 블록 요소 다음에 블록 요소를 사용하면 아랫줄로 넘어간다. 인라인 요소를 포함할 수 있다.
h1~h6, div, list, p...
- 인라인 요소 : 블록 요소를 포함할 수 없다.
a, span, strong ...
ex) <div><h2></h2></div> (O) <h2><div></div></h2> (X)
Attribute
태그를 보조하는 명령어.
width, height, alt, style, href
Attribute value : Attribute에 들어가는 값
index.html
방문자가 사이트를 요청할 때, 다른 페이지가 지정되지 않은 경우 웹사이트에 표시된 기본 페이지에 사용되는 가장 일반적인 이름.
Semantic Elements
의미가 있는 요소.
브라우저와 개발자 모두에게 의미를 명확하게 설명하는 element.
Non-Semantic의 예시 : div, span. 우리가 이 태그의 이름만 보고는 뭐에 쓰이고 있는지 알 수 없음.
Semantic의 예시 : form, article, table은 내용을 명확하게 정의하는 element
Header : 주로 제목, 소개 내용.
Section : 문서의 섹션 정의. 챕터라던지...
Nav : 네비게이션. 목차 메뉴
Footer : 맨 아래의 저작권 연락처 사이트맵같은 것
div와 span으로 마구 작성하기보다, semantic elements를 잘 활용해서 의미를 알 수 있게끔 하는 것이 좋다.
HTML의 기본 구조
<!DOCTYPE html> 이 문서의 버전. 반드시 작성해야 하며 옆의 경우 Html5 버전을 명시함
<html lang="en">이 문서가 html로 작성됐음을 브라우저에게 알림. 언어 속성으로 영어
<head> 메타데이터와 타이틀을 넣어주는 곳. 메타데이터는 웹 페이지에 보이진 않으나, 설정 관련 정보 명시
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title> 탭의 제목
</head>
<body>
주로 브라우저에서 실제로 보이게 되는 부분. 하나만 존재
</body>
</html>
'■ FE 로드맵 > ◻ HTML' 카테고리의 다른 글
| 기본 태그, 자주 쓰이는 태그 소개 및 역할 (0) | 2023.03.12 |
|---|