그저 HTML 정리 해 두는 글

박정훈·2022년 1월 11일
0

HTML

목록 보기
1/1

헷갈리거나 추가로 알게 되는 것들을 그저 정리 해 두는 글
물론 알았던 내용도 다시 한번!
기본적으로 MDN 과 이곳 저곳 찾아보고 정리!

article

MDN 에서 게시판과 블로그 글, 매거진이나 뉴스 기사를 예로 안내한다. article 은 각각을 식별한 요소가 필요하다.
주로 h1~h6 로 이를 구분하게 된다.

article 요소가 중첩되어 있을 때, 안쪽에 있는 요소는 바깥쪽에 있는 요소와 관련된 글을 나타낸다.

article 자체만으로 다른 페이지에서 보여질 때 문제가 없다면 사용한다. main의 내용과 상관없이 독립적이다. (여태 잘못 사용하고 있었던 것 같은 느낌..?)

<article>
  <h1>Hi!</h1>
</article>

section

HTML 문서의 독립적인 구획을 나타내며, 더 적합한 의미를 가진 요소가 없을 때 사용합니다. 보통 section은 제목을 포함하지만, 항상 그런 것은 아닙니다. 라고 안내하고 있다. 또한 일반 컨테이너로 사용하지 말랜다. 특히 스타일링 목적이라면 더욱!

article 내부에서 연관 있다고 생각되는 내용을 묶어 줄 수 있다. article 뿐 아니고 어디든지 연관 있다고 생각 된다면 묶어준다..!
(역시 고민 해 보고 태그를 써야 한다고 느껴진다.)

i 와 em

em 은 콘텐츠를 강조하지만, i 는 외국어, 등장인물의 생각 등 일반적인 산문에서 벗어난 경우 사용한다.

내가 정말 이건 강조해야해! 라면 --> em

강조가 아닌 그냥 시각적인 용도로의 이탤릭 체라면 --> i

blockquote 와 q

써 본적은 없는 태그다.
blockquote는 긴 인용문을, q는 짧은 인용문을 나타낸다고 한다.

b 와 strong

마찬가지로 아직 써본적이 없는 태그다. b 는 그저 굵은 글씨라고 강조하고 있다. b의 의미가 관계 없다면 그냥 font의 weight속성을 바꾸는 것을 고려하라고 한다.

strong 은 강조!! 하고 싶은 부분이다. 내가 정말 강조하고 싶어! 라면 strong 을 사용하자.

profile
그냥 개인적으로 공부한 글들에 불과

0개의 댓글