멋사 보조강의 - HTML

작성일

멋쟁이 사자처럼 보조강의에 나오는 HTML 내용을 정리해보았다. 서강대 노지승 선생님이 강의해주셨다. 갓지승

HTML

마크업 : HTML문서를 작성하는 것. 디자인은 동일해도 완전히 다른 마크업을 가질 수 있다.

  • 웹사이트는 정보 공유가 주요한 목적이다.
  • 시맨틱 마크업이 중요한 이유는 ? -> 브라우저가 웹 문서를 잘 이해할 수 있도록 하게 위해서.

  • 구조적 마크업은 검색 최적화(정보의 우선순위 배정), 유지 보수, 접근성, 사용성에 좋음

문서 구조를 나타내는 요소

  • section : 콘텐츠의 맥락을 구분하는 chapter
  • article : 독립적인 콘텐츠로서의 완결성을 갖춘 콘텐츠
  • nav : 주요 내비게이션 (class )
  • aside : 사이드바, 광고배너 (중요배너와 연관성이 떨어질때)
  • header : 헤더
  • footer : 푸터

nav, article에는 반드시 heading 태그를 넣어준다. 사용하지 않고 싶다면, class=”sr-only”를 넣어주고, 폰트사이즈를 0으로 한다던지 해서, 화면에는 보이지 않지만, 스크린 리더로 읽어올 수 있도록 해야한다.

올바른 마크업을 위한 8가지 팁

  1. html에 lang 속성 값을 주자 (스크린 리더로 읽을 때)
  2. img 태그에 alt 속성 값을 꼭 넣어주세요
  3. Sectioning elements(section/article/nav/aside) 태그 내부엔 반드시 안에 heading 태를 넣어주세요
  4. 컨텐츠(정보)로 가치가 있다면 img태그를 쓰고 그렇지 않으면 background-image를 쓰세요 (콘텐츠가 계속 바뀌는 녀석이면 img를 쓰는 게 좋고, UI컴포넌트 처럼 계속 같은 이미지를 사용한다면 background-image로 처리한다)
  5. ui,ol 안에는 li외에 다른 요소는 절대 넣지 마세요 dl의 자식으로 dt,dd만 넣는 것도 똑같은 경우
  6. 문단을 나누기 위한 목적으로 br을 쓰지 마세요. 서로 다른 p태그를 두 개 쓰는게 낫고, 그리고 클래스를 줘서 margin-top을 주는게 편합니다.
  7. 인라인 태그 안에는 블록 태그를 넣으면 안됩니다.(a tag는 가능)
  8. 인라인 스타일은 지양하세요
0%