[HTML] 제목, 내용, 리스트, 이미지, 링크, 영역 및 요소/속성의 구분, entity code, live server

제목 : <h1>제목</h1>

• heading
• h1부터 h6까지 구성
• 문서 내부에서 n번째로 중요한 제목을 뜻함
• h6 : 문서 내부에서 제목을 뜻하는 요소로서 가장 작은 단위의 제목

---

내용

• <br /> : break, 한 단락 내에서 줄바꿈
• <hr /> : horizontal, 수평선
• <p></p> : paragraph : 내용, 단락
• <pre></pre>
  • 문단을 의미하는 <p>와는 다르게 사용하는 형태를 모두 그대로 유지하는 요소
  • html의 요소 형태 그대로 표기할 경우에 많이 사용
  • 특수문자를 사용하고 싶어서 pre 쓸거면 **entity 코드(&로 시작하는 특수문자 표현 코드)**를 사용하자.

---

강조

내용에 대한 강조의 표현 : 의미와 기능을 명확하게 표현

• <strong></strong> : 위험, 중대한 강조
• <em></em> : emphasis, 내용상의 강세
• <ins></ins> : insert, 새로 추가된 흐름 표현
• <del></del> : delete, 삭제된 표현

그냥 강조 표시

• <b></b> : bold, 글씨 굵게. 요약키워드, 제품명, 단순 굵기 표현
• <i></i> : italic, 기울기. 외국어, 등장인물의 생각, 생각/감정의 표현(아이콘, 이모티콘)
• <u></u> : underline, 밑줄
• <s></s> : 취소선 → 삭제된 요소로 사용 안함

Block 요소, Inline 요소

• Block 요소 : 각 요소의 내용들이 위에서부터 아래로 쌓이는 형태
• Inline 요소 : 각 요소의 내용들이 옆으로 자연스럽게 나열되는 형태. inline 안에는 block 요소가 들어갈 수 없다.
• block과 inline 요소를 구분하고 싶다면, htmlreference.io/ 홈페이지 이용해서 확인!

---

목록

순서가 있는 목록 : <ol><li></li></ol>

• ordered list
• 부모요소가 ol 요소로 사용됨, 그 내부에는 반드시 li 요소 사용
• ol 내부 자식으로는 li 외에 사용 불가

순서가 없는 목록 : <ul><li></li></ul>

• unordered list
• 부모요소가 ul 요소로 사용됨, 그 내부에는 반드시 li 요소 사용
• ul 내부 자식으로는 li 외에 사용 불가

제목/내용이 있는 목록 : <dl><dt>제목</dt><dd>내용</dd></dl>

• 여러 가지 내용을 표현하는 data list
• 부모요소는 dl, 내부에는 반드시 dt와 dd만 사용

<div></div>

• block 형태의 그룹을 지을 때 사용하는 영역의 표기 = 본질의 의미는 없다
• 여러 태그를 묶어 CSS를 한번에 적용할 때 사용(구역태그/박스태그)

<span></span>

• inline 형태의 그룹을 지을 때 글씨나 내용의 묶음 = 본질의 의미는 없다.
• 한 태그를 나눠 여러 CSS를 적용하는 태그(분리태그)
• 여러 단계의 리스트 가능! → <li>요소 안에 ul,ol,dl 넣는 것은 가능

---

이미지 및 링크

이미지 : <img src=”” alt”” />

• <img src=”이미지 주소” alt”주소 오류시 나와야 할 이미지에 대한 설명” /> : image, source, alternate

링크 : <a href=””></a>

• <a href=”링크”>내용</a> : anchor
• 이미지를 클릭했을 때 링크 이동하려면
  • <a href=”이동할 링크”><img src=”이미지 주소” alt”주소 오류시 나와야 할 이미지에 대한 설명” /></a>

---

Live Server

• 내가 만든 코드에 대한 html 웹페이지를 서버 형식으로 만들어줌. 새로고침하지 않아도 live로 변경사항 적용됨.
• index.html 문서를 만들어서 가지고 있는 페이지들을 리스트 및 링크 형태로 만드는 작업하는게 좋음