기본구조
! + enter 시 기본 구조가 만들어진다
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>프런트엔드 웹 개발</title>
</head>
<body>
<h1>프런트엔드 웹 개발</h1>
<hr>
<p>HTML</p>
<p>CSS</p>
<p>자바스크립트</p>
</body>
</html>
<!DOCTYPE html> : 현재 문서가 html
<head></head> : 웹 문서의 정보를 포함
<body></body> : 웹 브라우저에 보여주는 내용
<title></title> : 웹 문서의 제목
시맨틱 태그
: 태그의 이름만 봐도 어떤 역할인지 알 수 있다
| <main></main> | 웹의 헤더 영역 (검색 창이나 사이트 메뉴를 삽입) |
| <nav></nav> | 다른 위치로 연결하거나 문서로 연결하는 링크 (헤더 영역 내에 있음) |
| <main></main> | 메인 콘텐츠가 들어있음, 웹 문서에서 한번만 사용할 수 있다 |
| <article></article> | 독립적인 웹 콘텐츠 항목 (메인 영역 내에 있음) |
| <section></section> | 웹 콘텐츠 항목 (아티클과 다르게 몇개의 콘텐츠를 묶는다) |
| <footer></footer> | 맨 아래에 있는 항목 (사이트 제작 정보, 저작권, 연락처 등을 넣는다) |
| <div></div> | 어떠한 영역을 구분지을 때 쓰인다 |
<hn></hn>
주로 제목을 지정할 때 쓰인다. 숫자별로 다양한 크기를 지정할 수 있다 (1~6)
<h1>샘플 제목1</h1>
<h2>샘플 제목2</h2>
<p></p>
텍스트 단락을 만든다
<br>
다음 줄로 바꾼다
(단락이 만들어진것은 아니니 단락 생성은 p 태그를 이용하자)
<blockquote></blockquote>
다른 문장보다 들여쓰기 처리한다. 주로 인용문을 입력할 때 쓰인다.
<strong></strong> <b></b>
텍스트를 굵게 표시한다
(strong 태그의 경우 화면 낭독기 기능에서도 강조 처리된다)
<em></em> <i></i>
텍스트를 기울여 표시한다
(em 태그는 강조, i 태그는 생각이나, 용어, 관용구에 사용한다)
그 외 텍스트 관련 태그
| <abbr></abbr> | 축약형을 표시 <abbr title = “Internet of Things”>IoT</abbr> |
| <cite></cite> | 참고 내용 표시 (기울임꼴로 표시됨) |
| <code></code> | 코드의 내용을 표시 |
| <small></small> | 부가정보, 내용을 작게 표시 |
| <sub></sub> | 아래 첨자를 표시 |
| <sup></sup> | 위 첨자를 표시 |
| <s></s> | 취소선을 표시 |
| <u></u> | 밑줄을 표시 |
| <ins></ins> | 새로운 내용을 삽입 (밑줄과 같이 표시됨) |
| <del></del> | 기존 내용을 삭제 (취소선과 같이 표시됨) |
-Doit! HTML+CSS+자바스크립트 웹표준의 정석 책으로 공부하였습니다
반응형
'IT 기초 > HTML' 카테고리의 다른 글
| [CSS 정리] 웹요소 위치, 배경 설정, 선택자 (0) | 2022.08.09 |
|---|---|
| [CSS 정리] 목록, 표, 레이아웃 배치 관련 스타일 (0) | 2022.07.30 |
| [CSS 정리] 형식, 글꼴, 텍스트 스타일 (0) | 2022.07.10 |
| [HTML 정리] 폼 태그, input 태그 (0) | 2022.07.10 |
| [HTML 정리] 목록태그, 표(테이블), 미디어 삽입 태그 (0) | 2022.07.02 |
댓글