HTML?
- HyperText Markup Language
- 개발자가 사용자에게 보여주고 싶은 컨텐츠를 브라우저가 읽을 수 있도록 만들어 놓은 문서
- 웹 페이지 구성 요소(element) 하나하나를 '태그'라는 표기법으로 작성
- 태그를 통해 어떤 요소인지(제목, 본문, 이미지, 비디오 등) 명시
- 태그의 이름은 HTML5 웹 표준에 맞게 작성
태그
- 여는 태그(opening tag) : <요소의 이름>
- 닫는 태그(Closing tag) : </요소의 이름>, 여는 태그 이름과 동일한 태그
- 내용(Content) : 요소의 내용. 여는 태그와 다는 태그 사이에 입력. 웹 페이지 상에서 보이는 부분에 해당
- 요소(Element) : 여는 태그, 닫는 태그, 내용을 통틀어서 요소
<h1>This is Title!</h1>
<h2>fix you</h2>
<p>
Lights will guide you home, And ignite your bones, And I will try to fix you.
</p>※태그의 경우 대소문자를 구분하진 않지만, HTML5에서는 모두 소문자로 작성하는 것을 권장
※태그들은 계층적으로 이루어져 있다 → 자식태그는 부모태그가 닫히기 전에 닫혀야 한다
태그의 속성
- 여는 태그에 속성 부여
- 태그별로 속성을 부여하는 것이 필수일 수도 있고 선택일 수도 있다
<p class="" id="">
<!-- p 태그 같은 경우는 속성을 부여할지 말지 선택 가능 -->
Hello2 !!
</p>
<a href="https://www.naver.com/">
<!-- a 태그는 href 속성 부여 필수-->
네이버
</a>빈 요소(Empty elements)
- 내용이 없다? → 이미지, 수평선, 줄바꿈 등
- 내용이 없는 요소 → 닫는 태그 추가 명시 X
- Empty element, Self-Closing element, Void element, Single tag..
<br>
<!-- <br> = <br/> 빈 요소 태그 뒤에 / 있거나 없거나 똑같이 인식되지만 명시적으로 표기하기 위해 사용할 수 있다. 코드 가독성을 위해 일관적으로 표기하는 것을 연습 -->
<hr>
<img src="http://image.url/images/icon.jpg">
<meta charset="utf-8">
<input type="text" name="name">요소의 중첩(Nesting)
- 요소 안에 다른 요소가 들어가는 포함관계 성립
- 요소 안의 내용에 다른 요소 입력
- 포함관계를 구분하기 위해 들여쓰기를 사용
- 열린 순서의 반대로 닫혀야만 한다
<html>
<head>
<title>요소의 중첩</title>
</head>
<body>
<h1>요소안에 <strong>다른 요소가 </strong> 들어 갈 수도 있다!</h1>
<ul>
<li>하나</li>
<li>둘</li>
<li>셋</li>
</ul>
</body>
</html>주석
- 브라우저는 주석을 무시하여 사용자가 주석을 보이지 않게 한다
- 주석의 목적은 코드에 메모를 추가하거나, 혹은 사용하지 않는 코드를 임시로 처리하기 위함
- 주석 문법을 지켜서 작성
- <!--□□□□□□□□□□--> 형태
<p>I'm not inside a comment</p>
<!-- <p>I am!</p> -->HTML 문서의 구조
<!DOCTYPE html>
<html>
<head>
<!-- HEAD 영역 -->
</head>
<body>
<!-- BODY 영역 -->
</body>
</html>- <!DOCTYPE html> : document type이 html이라는 것을 표기. 생략해도 문제는 없음
- html : 페이지 전체의 컨텐츠를 감싸는 루트(root) 요소
- head : 웹브라우저 화면에 직접적으로 나타나진 않는 웹페이지의 정보. body 태그를 읽기 이전에 알아야할 정보. 이 HTML 파일의 기본적인 정보
- meta tag : 문서의 일반적인 정보와 문자 인코딩을 명시
- title : 웹 페이지 제목
- body : 웹브라우저 화면에 나타나는 모든 콘텐츠. 사용자에게 보여주고 싶은 컨텐츠
- head : 웹브라우저 화면에 직접적으로 나타나진 않는 웹페이지의 정보. body 태그를 읽기 이전에 알아야할 정보. 이 HTML 파일의 기본적인 정보
HEAD, BODY 태그
※태그 검색은 mdn 문서를 이용할 것
- head tag 설명
- 생략할 수는 있지만 생략하지 생략하지 않는 것을 권장
- body tag 설명
- body tag 또한 생략할 수 있지만 생략하지 않는 것을 권장
태그를 구분짓는 특성
- 구획을 나누는 태그
- 목적 : Layout
- 단독으로 사용했을 때에는 눈에 보이지 않는다
- 여러가지 요소들을 묶어서 그룹화
- 컨테이너의 역할을 가지고 있는 태그
- 그 자체로 요소인 태그
- 단독으로 사용했을 때에도 눈으로 확인할 수 있다
블록(Block)과 인라인(Inline)
※CSS로 변경이 가능 → 스타일링과 관련
※CSS 스타일링이 안들어간다고 가정한다면 html끼리 어디에 어떻게 배치할 지에 관한 법칙에 대한 이야기
- 블록(block)
- 블록 레벨 요소는 언제나 새로운 줄에서 시작하고, 좌우 양쪽으로 최대한 늘어나 가능한 모든 너비를 차지
- 상자를 아래로 쌓는 것 → 층으로 쌓인다는 것. 블록이 들어오면 다음 요소들은 그 다음 라인부터 입력할 수 있다
- 인라인(Inline)
- 줄의 어느 곳에서나 시작할 수 있다
- 바로 이전 요소가 끝나는 지점부터 시작하여, 요소의 내용만큼만 차지
- 포함 규칙
- 같은 형태의 다른 요소를 안에 포함 할 수 있다(블록>블록, 인라인>인라인)
- 대부분의 블록 요소는 다른 인라인 요소도 안에 포함할 수 있다
- ⚠️인라인 요소는 블록 요소를 포함 할 수 없다
콘텐츠 카테고리
- HTML5부터 비슷한 특징을 가진 요소끼리 묶어서 7가지 카테고리로 세분화
- 하나의 HTML 요소가 여러 콘텐츠 카테고리 내의 포함관계에 들어갈 수도 있다
- 메타데이터 콘텐츠(Metadata Content) : 문서의 메타데이터(정보), 다른 문서를 가리키는 링크 등을 나타내는 요소. 보통 head에 들어가는 요소
- 플로우 콘텐츠(Flow Content) : 웹 페이지상에 메타데이터를 제외하고 거의 모든 요소. 보통 텍스트나 임베디드 콘텐츠를 포함. body에 들어가는 대부분 요소
- 섹션 콘텐츠(Section Content) : 웹 문서의 구획(Section)을 나눌 때 사용
- 헤딩 콘텐츠(Heading Content) : 섹션의 제목(heading)과 관련된 요소. section에 제목을 넣을 때 사용
- 프레이징 콘텐츠(Phrasing Content) : 문단에서 텍스트를 마크업 할 때 사용
- 임베디드 콘텐츠(Embedded Content) : 이미지나 비디오 등 외부 소스를 가져오거나 삽입할 때 사용되는 요소
- 인터랙티브 콘텐츠(Interactive Content) : 사용자와의 상호작용을 위한 컨텐츠 요소
review 블로그