유용한 Extention
1. Live Server : 코딩의 수정 결과를 새로 고침 없이 실시간으로 브라우저에서 확인 가능 (가상 웹서버 역할)
2. open in browser : Live Server는 1개의 프로젝트만 확인 가능하여 다수의 HTML 페이지를 확인해야 하는 상황에서 유용
3. Prettier : 코드의 들여쓰기, 줄바꿈을 자동 정렬해주는 기능
4. Auto Rename Tag : 여는 태그나 닫는 태그를 수정하면 쌍을 이루는 태그를 자동으로 수정해주는 기능
<img>
) <!DOCTYPE html> <!--HTML 문서임을 명시-->
<html lang="en"> <!--HTML 시작 태그로 문서 전체의 틀-->
<head> <!--문서의 metadata를 선언-->
<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> <!--문서의 내용을 담는 곳-->
<h1>Hello</h1> <!--heading을 의미, h1~h6까지 있음-->
<div>Contents</div> <!--content division을 의미, 줄바꿈 됨-->
<span>Here too!</span> <!--줄바꿈이 없는 content 컨테이너-->
<img src="https://cdn.pixabay.com/photo/2022/04/09/05/23/tulip-7120784_960_720.jpg"/>
<a href="#"></a>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<input type="text" placeholder="ID"></input>
<input type="password" placeholder="password"></input>
<button>Login</button>
<input type="checkbox">Keep Login</input>
<textarea></textarea>
</body>
</html>
정의 : HTML의 최신 버전인 HTML5에서는 시맨틱 웹이 중시되며 여러 시맨틱 요소가 새롭게 만들어졌다.시맨틱이란, '의미론적인'이라는 뜻을 가지고있다.
필요성 :
1. 검색 엔진이 시맨틱 요소를 더 좋아하기 때문
2. 여러 개발자가 함께 작업할 때 <div>
요소를 탐색하는 것 보다 의미있는 코드 블록을 찾는 것과 데이터 유형을 예측하는 것이 훨씬 편리하기 때문
종류 :
<article>
: 독립적이고 자체 포함된 콘텐츠를 지정하는 요소<aside>
: 본문의 주요 부분을 표시하고 남은 부분을 설명하는 요소 (ex. 사이드바, 광고창 등)<footer>
: 페이지 가장 아랫부분에 위치하는 요소 (ex. 라이선스, 주소, 연락처 등)<header>
: 일반적으로 페이지나 해당 섹션의 가장 윗부분에 위치하며 사이트의 제목이 들어가는 요소 (ex. 상단바 검색창 등)<nav>
: 네비게이션의 약자로, 상단바 등 사이트를 안내하는 요소. 주로 <ul>
을 넣어 목록 형태로 사용<main>
: 문서의 주된 콘텐츠를 표시여러 태그를 하나의
<div>
로 감싸야 함.
<section>
은 보통 제목, 컨텐츠가 포함된 구획을 나눌 떄 사용하며, 렌더링은<div>
와 크게 다른 점 없음.
id
: 고유(unique)한 이름을 붙일 때 (중복 허용 X)class
: 반복되는 영역을 유형별로 분류할 때HTML 태그 | Selector |
---|---|
<div id="writing-section"> | div#writing-section |
<li class="comment"> | li.comment |