시맨틱 태그
2022. 8. 9. 14:59ㆍ개인활동/HTML+CSS+JS
Do it! 한권으로 끝내는 웹 기본 교과서
HTML+CSS+JS 웹표준의 정석
으로 웹개발 공부 시작함.
HTML (HyperText Markup Language)
HyperText : 문서를 서로 연결해주는 링크
Markup : 표시한다
- 태그를 이용해 제목, 텍스트, 표 등을 나타냄
- 기본 기능은 웹 브라우저에 보여줄 내용을 마크업하고 문서끼리 링크하는 것
- 글자를 보기좋게 꾸미거나 문서의 배치를 다양하게 하는 것은 CSS의 역할
<!DOCTYPE html>
<html lang='ko'>
<head>
<meta charset='UTF-8'>
<meta name="kewords" content="html의 구조">
<meta name="description" content="html의 구조를 알아봅시다">
<meta name="author" content="Cho">
<title>HTML 기본 문서</title>
</head>
<body>
<h1>프런트엔드 웹개발</h1>
<hr>
<p>HTML</p>
<p>CSS</p>
<p>JS</p>
</body>
</html><!DOCTYPE html>
- 현재 문서가 html5로 작성됨
<html> </html>
- 웹문서의 시작과 끝을 나타내는 태그
- </html> 뒤에는 아무것도 없어야 함
- lang="언어"를 이용해 문서에서 사용할 언어 지정 가능
<head> </head>
- 웹브라우저가 웹문서를 해석하는데 필요한 정보를 입력하는 부분
- <meta> : charset="인코더"를 이용해 어떤 인코딩을 사용할지 정해줌
name="keywords" content="내용"을 이용해 웹문서의 키워드를 나타냄
name="description" content="내용"을 이용해 웹문서의 설명을 나타냄
name="author" content="소유자명, 제작자명"을 이용해 웹문서의 소유자나 제작자를 나타냄
- <title> </title> : 웹문서의 제목을 입력하는 태그
<body> </body>
- 웹브라우저 화면에 나타나는 내용
Visual Studio Code 를 이용한 코드 작성 시 꿀팁
- 비어있는 html 파일을 생성 후, 첫번째 줄에 '!'를 입력한 후 탭이나 엔터를 누르면 자동으로 기본 틀이 작성됨
시맨틱 태그
- 웹브라우저가 소스코드를 보고 어느부분이 제목인지 본문인지 쉽게 알 수 있음
- 화면낭독기와 같은 보조기기에서 사이트의 구조를 제대로 이해하여 보다 더 정확한 내용을 전달할 수 있음
- <header> : 헤더 영역, 맨 위쪽이나 왼쪽에 위치해 있음, 검색창이나 사이트 메뉴를 삽입
- <nav>
- 웹문서 안에서 다른 위치로 연결하거나 다른 웹문서로 연결하는 링크를 만듦
- 웹문서의 위치에 영향을 받지 않아 헤더, 푸터, 사이드바 안에 포함할 수 있고 독립해서 사용해도 됨
- 여러개를 사용하는 경우 id 속성을 이용해 다른 스타일 적용 가능
- <main>
- 웹문서에서 핵심이 되는 내용을 넣음
- 페이지마다 똑같이 들어가는 정보는 넣을 수 없음
- 한번만 사용 가능
- <article> : 웹에서 실제로 보여주고 싶은 내용(독립된 웹 콘텐츠 항목 등)을 넣음, 여러개 사용 가능, 안에 <selection> 태그 사용 가능
- <selection> : 콘텐츠 영역을 나타냄, 몇개의 콘텐츠를 묶는 용도로 사용
- <aside> : 본문 내용 외에 왼쪽, 오른쪽 또는 아래쪽에 사이드바를 만듦, 필요한 경우만 사용
- <footer> : 맨 아래쪽의 푸터 영역을 만들 때 사용, <header>, <selection> 등 다른 시맨틱 태그 이용 가능
- <div>
- <header>, <selection>같은 시맨틱 태그가 나오기 전에 문서구조를 나눌 때 사용하던 태그
- 현재도 많이 사용
- id나 class 속성을 사용해 문서 구조를 만들거나 스타일을 적용할 때 사용함
'개인활동 > HTML+CSS+JS' 카테고리의 다른 글
| 웹문서에서 다양한 내용 입력하기(4) (0) | 2022.08.17 |
|---|---|
| 웹문서에 다양한 내용 입력하기(3) (0) | 2022.08.17 |
| 웹문서에 다양한 내용 입력하기(2) (0) | 2022.08.11 |
| 웹문서에 다양한 내용 입력하기(1) (0) | 2022.08.10 |
| 웹개발 시작하기 (0) | 2022.08.03 |