728x90
반응형
[ 목차 ]
1. HTML과 첫 만남
2. HTML 구조 파악하기
3. HTML 파일 만들기
4. 웹 문서 구조를 만드는 시맨틱 태그
1. HTML과 첫 만남
[ HTML 이란 ? ]
- HTML : 웹에서 자유롭게 오갈 수 있는 웹 문서를 만드는 언어
- Hyper Text (하이퍼텍스트) : 웹에서 자유롭게 오갈 수 있는 링크
- Mark up : 텍스트뿐만 아니라 이미지, 영상 등을 표시함, 마크업에 사용하는 꼬리표를 '태그(tag)'라고 함
2. HTML 구조 파악하기
[ HTML 문서의 기본 구조 살펴보기 ]
1) < ! doctype html >
: 현재 문서가 HTML5 언어로 작성한 웹 문서라는 뜻이다.
- 웹 브라우저에게 '이제부터 처리할 문서는 HTML 문서라고 알려주는 것
2) 웹 문서 시작을 알리는 < html > 태그 ( < html > ~ < /html > )
: 웹 문서의 시작과 끝을 나타내는 태그이다.
웹 브라우저가 < html > 태그를 만나면 < / html > 까지 소스를 읽어 화면에 표시한다.
- 실제 문서 정보와 내용이 시작되고 끝나는 것을 표시하는 태그
- lang 속성을 사용해 문서에서 사용할 언어 지정
- 문서 정보를 지정하는 < head > 부분과 문서 내용을 입력하는 < body > 부분 포함
3) 브라우저에게 정보를 주는 < head > 태그 ( < head > ~ < / head > )
: 웹 브라우저가 웹 문서를 해석하는 데 필요한 정보를 입력하는 부분이다.
- 문서 관련 정보 입력, 웹 브라우저 화면에는 보이지 않음
- 문서에서 사용할 외부 파일 링크
* 문자 세트 등 문서 정보가 들어있는 <meta> 태그 *
- 한글로 된 내용을 표시하기 위해서 UTF-8 문자 세트를 사용
- 이외에도 다양한 문서 정보를 지정
* 문서 제목을 나타내는 < title > 태그 *
4) 웹 브라우저에 내용을 표시하는 < body > 태그 ( < body > ~ < / body > )
: 실제로 웹 브라우저 화면에 나타나는 내용이다.
앞으로 우리가 공부할 HTML 태그는 대부분 < body > 태그 안에 들어있다.
4. 웹 문서 구조를 만드는 시맨틱 태그
[ 시맨틱 태그 알아보기 ]
- 시맨틱 (semantic) : 의미론적인, 의미가 통하는
- 시맨틱 태그 : 이름만 봐도 의미를 알 수 있는 HTML 태그
* 태그는 기본적으로 기능이 있다. 하지만 시맨틱 태그는 기능은 없고 의미만 있다.
* 시맨틱 태그 사용하는 이유 *
- 화면 낭독기 같은 보조 기기에서 사이트의 구조를 이해
- 문서 구조가 정확히 나눠지므로 PC나 모바일 등 다양한 화면에서 웹 문서를 표현하기 쉽다.
- 웹 사이트를 검색할 때 필요한 내용을 정확히 찾을 수 있다.
* 하나의 영역임을 표시해주는 < div > 태그 ( < div > ~ < / div > )
[ 시맨틱 주요 태그 ]
1) 헤더 영역을 나타내는 < header > 태그
- 헤더 영역
- 사이트 전체의 헤더 or 특정 영역의 헤더
- 검색 창이나 사이트 메뉴 삽입
* 웹 문서의 정보를 담는 <head> 태그와 헷갈리지 말것 !! *
2) 내비게이션 영역을 나타내는 < nav > 태그
- 내비게이션 영역
- 웹 문서 위치에 영향을 받지 않음
- 문서 안에 여러 개 만들 수 있음 ( id로 구분 )
* < nav > 태그를 여러개 사용할 경우 각각 id 속성을 지정하면
내비게이션마다 다른 스타일을 적용할 수 있다.
3) 핵심 콘텐츠를 담는 < main > 태그
- 웹 문서에서 핵심이 되는 내용 넣음
- 웹 문서마다 다르게 보여주는 내용으로 구성함
- 웹 문서에서 한번만 사용할 수 있음
4) 독립적인 콘텐츠를 담는 < article > 태그
- 독립된 웹 콘텐츠 항목 ( 따로 떼어도 콘텐츠가 되는 내용 )
- 아티클의 사전적 의미인 신문이나 잡지의 기사처럼 웹에서 실제로 보여주고 싶은 내용 넣음
ex) 블로그의 포스트 or 뉴스 사이트의 기사 ..
- < article > 태그 여러개 사용 가능하고 이 안에 < section > 태그를 포함할 수도 있음
5) 콘텐츠 영역을 나타내는 < section > 태그
- 콘텐츠 영역
- 몇 개의 콘텐츠를 묶는 용도로 사용함
* < article > 태그는 블로그의 포스트처럼 독립된 콘텐츠로 사용함 *
- css 적용을 위해 묶는 용도로 쓰지 말것!!
* 단순히 스타일을 적용하려고 콘텐츠를 묶으려면 < div > 태그를 사용하자 *
6) 사이드 바 영역을 나타내는 < aside >
- 본문 내용 외에 왼쪽이나 오른쪽, 혹은 아래쪽에 사이드 바 표시
- 필수 요소가 아니므로 필요할 경우에만 사용
7) 푸터 영역을 나타내는 < footer >
- 사이트 제작 정보나 저작권 정보, 연락처 등 넣음
- 푸터 영역에 < header >, < section >, < article > 등 다른 시맨틱 태그 사용할 수 있음
--> 다양한 정보 포함할 수 있음
- 웹 문서에서 맨 아래쪽에 푸터 영역을 만듦
8) 여러 소스 묶는 < div >
- 소스 묶는 용도
- 영역을 구별하거나 스타일 적용하기 위해 사용함
* < div id = " header " > or < div class = " detail " > 처럼 id나 class 속성을 사용하여
문서 구조를 만들거나 스타일을 적용할 때 사용
728x90
반응형
'Language > HTML&CSS' 카테고리의 다른 글
| 01장&02장_웹 개발 시작 및 환경 만들기 (1) | 2023.01.08 |
|---|
