- 구조와 정보 위계가 명확하게 보이는 HTML 코드를 작성하자
강조 Emphasis
<em>강조</em>
<strong>강조</strong>링크 Anchor
<a href="주소" target="_blank">링크</a>- Hyper text reference
- 웹 URL
<a href="www.velog.io"></a>- 페이지 내 이동
<a href="#portfolio"></a>- 메일주소
<a href="mailto:emailm@gmail.com"></a>- 전화번호
<a href="tell:01012345678"></a>이미지 Image
<img src="#" alt=""/>- src: source
- alt: alternative text
- Screen reader
목록 list
<ul>
<li>list1</li>
<li>list2</li>
</ul>- ol -> ordered list 순서가 중요한 목록
- ul -> unordered list 순서가 중요하지 않은 목록
- li -> list item
ul과 ol의 자식요소는 li만 가능
정의 리스트 Description List
<dl>
<dt>학습</dt>
<dd>
정의 데이터
</dd>
<dl>dl-> description list
dt -> description table
dd -> description data
- 용어를 정의 할 때
- Key-value로 정보를 제공할 때
dl의 자식 요소는 오직 div, dt, dd만 가능하다.
dt와 dd는 반드시 dl의 자식요소로 존재해야 한다.
인용 Quoations
<blockquote cite="주소">
우리가 겪을 수 있는 가장 아름다운 체험은 신비이다. <br/>
신비는 모든 참 예술과 과학의 근언이다.
<cite>알버트 아인슈타인</cite>
</blockquote>
미디어 파일 Media
<img src="" alt=""/>
<audio src=""></audio>
<audio src="./assets/audios/kimbug.mp3" controls></audio>
<audio src="./assets/audios/kimbug.mp3" autoplay></audio>
<audio src="./assets/audios/kimbug.mp3" loop autoplay></audio>
<video src="./assets/videos/kimbug.mov" controls></video>
<video controls>
<source src="./assets/videos/kimbug.mov" type="video/mp4"/>
<source src="./assets/videos/kimbug.mp4" type="video/mp4"/>
</video>
<iframe src="https://edu.goorm.io" frameborder="0"></iframe>Doctype & Document Structure
<!DOCTYPE html>
<html>
<head>
<!-- 웹 문서에 관한 메타 데이터>
</head>
<body>
<!-- 웹 문서에 들어갈 내용 -->
</body>
</html>메타 데이터 Meta data
name="메타데이터 종류"
content ="메타데이터 값"<meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale="1.0"> <meta name="author" content"제이"> <meta name="keywords" content="구름강의,구름edu" <meta name="description" content="~~~">
구조적인 웹 문서 설계
Sectioning Elements
섹션구조 section, article, nav, aside
문서구조 header, main, footer
Sectioning elements = 단원
단원의 주제, 제목
Sectioning element 내에는 반드시 heading 태그를 작성해야 한다.
<section>
<h1> 섹션의 제목</h1>
<p>...</p>
</section>
<nav>
<h1>메뉴</h1>
<ul>
<li>
<a href="#">링크</a>
</li>
</ul>
</nav>최소한의 기능/의미를 갖는 가장 작은 단위로 쪼개기
구획 나누기 / 논리적으로 긴밀하게 관련된 집합체
