01
07
Coding/Today I Learned

2022.01.06(Thu.) <다시 처음으로 돌아가 알아보는 HTML 태그>

무시하지 마십시오...모두가 무시하지만 똑바로 하는 사람은 잘 없습니다. 그래도 html 프로그래머는 좀..ㅎㅎ;;

1. 문제의 발단

2개의 프로젝트를 끝낸 지금, 가장 필요한 것은?? 당근 복습이다. 했던 거 또 하고 또 하고 또 한다.

프로젝트를 진행할수록 이미 다 배웠지만 빈틈이 더 느껴지기 시작했고, 그렇기 때문에 다시 복습하고 정리하기 위해 돌아왔다.

 처음 시작은 html 태그의 심오함이다. 생각보다 태그들을 잘 나눠 사용하지 않았던 기억이 있다. 대부분은 div로 처리하고 css로 조절해 버렸기 때문이다. 이는 검색과 가독성, 유지보수에 몹시 안 좋다. 그래서 습관처럼 사용할 수 있도록 확실히 태그에 대해 알고 가면 좋을 것 같다.

2. Semantic Tags

  • '의미'가 있는 태그를 말한다.
  • 제목(h 태그), a(링크), button 등의 다양한 종류의 의미가 있는 태그들을 뜻한다.
  • 이들은 각자의 모양이 있고 따로 css를 설정하지 않아도 그 모양대로 처음부터 나타난다.

3. Tag의 종류

  • <html /> : html 문서의 최상단을 나타내는 태그. 모든 태그들은 이 태그의 자손들이어야 한다는 규칙이 있다.
  • <header /> : 브랜드 로고, 사용자에게 나타나야 할 메뉴
  • <nav /> : 메뉴 안의 요소들
  • <footer /> : 가장 하단의 링크나 재작자의 시그니처들
  • <main /> : 중요 콘텐츠
  • <aside /> : 콘텐츠와 관련없는 광고 같은 것들
  • <article /> : 콘텐츠와 독립적으로 구성될 수 있는 요소들
  • <section /> : 문서와 문서를 분리하여 주제가 다른 문서를 쓰는 경우 사용할 수 있음
    • article VS section : 가장 큰 차이로는 article은 혼자만 딱 때와서 내용을 보아도 이해가 되어야 한다. 독립적인 내용이기 때문에 요소 안에 모든 것 내용들이 다 있어야 하기 때문이다. 그에 비해 section은 같은 카테고리 안의 주제가 다른 경우, 마치 우리가 들여 쓰기를 하듯이 사용할 수 있다. 그렇기 때문에 section이 여러 개인 상황에 그 section안에 독립적으로 article이 존제하는 형태가 자주 보인다. 
  • <div /> : 그저 의미 없이 요소를 묶기 위해 사용하는 태그
  • <span /> 그저 의미 없이 요소를 묶기 위해 사용하는 태그
    • <div /> VS <span /> : div는 brock 속성으로 한 줄의 모든 부분을 차지한다. span은 inlien 속성으로 콘텐츠의 사이즈만큼만을 차지한다.
  • <address /> : 주소, 연락에 관련한 내용
  • <h1~6 /> : 제목. 번호가 커질 수 록 사이즈는 줄어든다.
  • <em /> : 강조를 포함한 기울임체(이탤릭체)
  • <i /> : 강조 없이 그저 시각적으로만 기울임체(이탤릭체)
    • 폰트 어썸 : 주로 <i />를 이용하여 표현한다. 역시 태그의 의미 그대로 강조 없이 일반적인 내용들과 차이를 표현하기 위해 <i /> 태그를 사용하며, <span />를 사용해도 되지만 검색 툴들이 정확한 의미를 이해하고 사용할 때 더 유리하므로 <i />를 사용한다고 한다.
  • <strong /> : 강조를 포함한 굵은 체(볼드체)
  • <b /> : 강조 없이 그저 시각적으로만 굵은 체(볼드체)
  • <ol /> : 순서가 필요한 목록을 나타내는 태그
  • <ul /> : 순서가 없는 목록을 나타내는 태그
  • <li /> : list item
  • <dl /> : 어떤 단어의 설명이 필요할 때 설명할 대상의 제목과 내용을 묶는 태그
  • <dt /> : 설명할 대상의 타이틀
  • <dd /> : 설명할 대상의 내용
  • <img /> : 콘텐츠에 중요한 내용이 될 이미지
    • <img /> VS CSS background-image 속성 : 콘텐츠의 내용이 아니며 배경이 강조될 필요가 없고, 이미지가 없다고 해서 콘텐츠에 내용에 영향을 미치지 않는다면 태그로 만들지 말고 css 속성으로 넣는 것이 맞다. 그래야 검색 툴이 헷갈리지 않는다.
  • <button /> : 유저의 행동이 발생할 경우 
  • <a /> : 페이지를 이동하는 등의 링크
  • <table /> : 중요한 데이터가 표에 들어가서 의미가 있을 경우
    • 의미가 없는 데이터의 경우(보기 편하게 하기 위해서 사용할 경우)는 css flex-box로 조절하는 것이 역시나 검색 툴이 안 헷갈린다.
  • <br /> : 텍스트의 줄 바꿈
  • <cite /> : 출처를 나타내는 태그. 제목을 반드시 포함해야 한다.
  • <ruby /> : 주석. 혹은 동아시아 문자의 발음을 나타낼 때 쓴다고는 하는데... 주석으로 더 쓸 것 같다.
  • <samp /> : 출력의 예시나 인용문을 나타내는 태그
  • <s /> : 취소선
  • <small /> : 덧붙이는 글이나 저작권 및 법률에 관한 표기를 하는 태그
  • <sub /> : 글자 아래에 작게 숫자나 글자를 쓰고 싶을 때 쓰는 태그 Ex) 화학기호나 수학 기호를 표시할 때, 산소(O2)의 경우 숫자 2를 작게 쓰는 것이 맞다.
  • <sup /> : <sub />의 반대로 위로 쓰는 경우 사용한다. 제곱을 표현할 수 있다.
  • <time /> : 시간을 표현할 때 사용하는 태그
  • <audio /> : 소리
  • <track /> : <audio />나 <video />의 자식으로 사용해서 시간별로 저장할 위치에 사용한다.
  • <canvas /> : 캔버스 스크립팅 API나 WebGL API와 함께 사용하여 그림이나 애니메이션을 그릴 때 사용한다.
  • <noscript /> : 페이지 스크립트 유형을 지원하지 않거나 스크립트를 비활성화한 경우 보여줄 것을 넣는 태그이다.
  • <script /> : 자바스크립트 코드를 넣을 곳
이때까지 사용하지 않은 태그들이 엄청 많다는 것을 다시 느꼈다. 역시 기본이 중요하다는 것을 다시 확실히 깨달았고, 천천히 부족한 디테일을 채워나가자.
저작자표시

'Coding > Today I Learned' 카테고리의 다른 글

2022.01.11(Tue.) <일단 쓰면서 배우는 Figma>  (0) 2022.01.11
2022.01.08(Sat.) <TypeScript의 기초>  (0) 2022.01.08
2021.09.16(Thu.) <AWS 배포의 큰 그림>  (0) 2021.09.16
2021.09.14(Tue.) <Git을 이용한 버전관리>  (0) 2021.09.14
2021.09.13(Mon.) <조금 더 알아보는 네트워크>  (0) 2021.09.13
COMMENT
 

티스토리툴바