HTML도 제대로 쓰려고하면 어렵다..

코딩 배우고싶어요라고 하면 가장 먼저 추천받는게 HTML이다.

그만큼 쉽게 접근할 수 있기 때문이겠지..

나도 그렇게 생각했고 말이야...

 

근데 오늘 수업을 들으면서 어느 부분에서 어떤 태그를 사용할지 고민해야하고,

명세 규칙 안에서 시맨틱하게 구조를 잡는 등의 마크업 방법을 배우는 순간부터

HTML도 쉽지는 않다는 것을 느끼게 되었다.

 

근데 이렇게 하는게 맞는건지 고민하며 찝찝-한 채로 박스를 그려보는 와중에도

강사님의 답과 비슷하게 마크업을 했거나 동기분들의 질문을 보며 궁금증이 같이 해소되는 부분들은

어려움과는 별개로 또 다른 재미요소였다.

 

한때 퍼블리싱도 해보고 싶었는데, 이런 과정들을 무수히 많이 거쳐 하나의 페이지가 

완성되는거라고 생각하니... 앞으로 공부할 것이 많겠구나를 3일차에 또다시 느낀다.

 

아래부터는 오늘 공부하면서 기억해야하는 부분들에 대한 기록

 

범위 : section > grouping content

 

Section

<section> vs <article>

- section 요소는 사이트 내 연관 콘텐츠(다른 서비스에 가져다 놓으면 이상함)

- article 요소는 독립적 콘텐츠(다른 서비스에 가져다 놔도 이상하지 않음)

- article과 section 요소는 heading 요소와 함께 사용하는 것을 권장(높이 없이 비워두기도 함)

 

<h1> ... <h6>

- <h1> 요소는 페이지당 한 번만 사용할 것을 권장함

 

<aside>

- 문서의 주요 흐름을 따라가지 않는 별개의 구획으로, 보통 각주 혹은 광고 영역으로 활용함

 

Grouping content

<figure>, <figcaption>

- 캡션(자막, 설명)이 있는 이미지를 표현하는데 이미지와 캡션이 연결되도록 해줌

 

<pre>

HTML에 작성한 내용을 그대로 화면에 표현해주는데, 주로 컴퓨터 코드를 표현할 때 사용함

 

<main>

- 문서의 주요 콘텐츠를 나타냄 (main 태그도 grouping section이라 main 안에 section이 꼭 들어갈 필요는 없음!)

 

<hr>

- 원래 가로줄만 표현하는 의미없는 태그였지만, HTML5에 오면서 의미가 생긴 요소임

- 이야기의 장면 전환 혹은 문단 안에서 주제가 변경되었을 때 구별을 위해 사용함

  - 단, 단락을 구분할 때 사용하므로 <p>태그 내 사용은 웹 표준에 어긋남

 

* 엔티티는 HTML에서 특정 예약어 표기의 혼란을 막기 위해 사용하는 것으로, 해당 예약어를 엔티티로 안쓰면 문법 에러가 발생함

  - e.g. & (&amp;), < (&lt;), > (&gt;), " (&quot;)

 

---

<ul><li>..등의 목록 요소 :  페이지 내에서 컨텐츠의 전환

<nav> : 연결된 페이지의 리스트(페이지 전환), 페이지 안을 탐색하거나 다른 페이지로 이동