생활코딩

Coding Everybody

코스 전체목록

닫기

의미론적 태그

목적

문서의 정보를 보다 잘 표현하기 위해서는 의미에 맞는 태그를 잘 사용해야 합니다. 특히 HTML5에서는 웹페이지에서 통상 많이 사용하는 구조에 의미를 분명히 부여하기 위해서 의미론적 태그(semantic element)를 새롭게 정의해서 제공하고 있습니다. 그 목록은 아래와 같습니다. 

article 본문
aside 광고와 같이 페이지의 내용과는 관계가 적은 내용들
details 기본적으로 표시되지 화면에 표시되지 않는 정보들을 정의
figure 삽화나 다이어그램과 같은 부가적인 요소를 정의
footer 화면의 하단에 위치하는 사이트나 문서의 전체적인 정보를 정의
header 화면의 상단에 위치하는 사이트나 문서의 전체적인 정보를 정의
main 문서에서 가장 중심이 되는 컨텐츠를 정의
mark 참조나 하이라이트 표시를 필요로 하는 문자를 정의
nav 문서의 네비게이션 항목을 정의
section 문서의 구획들을 정의 (참고)
time 시간을 정의

등장시기

HTML 5

댓글

댓글 본문
작성자
비밀번호
  1. 영현이
    sementic tag 사전
  2. 푸른하늘
    7
  3. 민경맘
    훌륭하십니다.
  4. 도레미
    너무나 잘 보고 있습니다! .. 좋은 강의 감사합니다.
  5. 5개월만에시작
    감사합니다
  6. 대학생
    감사합니다
  7. 초보자
    감사합니다.
  8. 바람과 나무
    감사합니다.
  9. 웹공부
    기초부터 탄탄히 잡을 수 있는 너무 좋은 강의 만들어주셔서 정말 감사합니다 ! 늘 잘 보고있어요 !
  10. 이성준
    성준이 화이팅!
  11. 오빠는다르다
    감사합니다~!!!
  12. 진짜 감사해요 !!
  13. gridshim
    170908
  14. 마커블
    170818 완료입니다.
  15. nevertoolate
    details 기본적으로 표시되지 화면에 표시되지 않는 정보들을 정의

    "표시되지" 가 중복 되어 있네요. ^&^
  16. spiritord
    감사합니다
    잘보고 있어요
  17. 봤어요^^
  18. 세븐나이츠
    좋은강의 감사합니다!
  19. 웹애플리케이션 만들기에 이어서 html강의도 잘 듣고 있습니다. 감사합니다.
  20. kong'st
    감사...
  21. 리지
    좋은 강의 감사합니다!!
  22. 잖수
    잘봤습니다 ^^
  23. 다사랑
    고맙습니다.
  24. 후뚜니
    이고잉님 정말 정말 감사합니다 ! 잘 듣고 있습니다. 언젠간 한번 꼭 뵙고 싶네요!
  25. 리미
    다른 강의를 들을땐 배속을 높혔는데,
    이고잉님 목소리를 포기할수 없어 매번 정속으로 듣네요.
    다정다감한 목소리덕에 설레임은 덤이네요 //
    타지라 온라인 강의 밖에 의존할수 없어 여러 사이트를 기웃기웃 했습니다.
    결국은 생활코딩으로 돌아왔네요.
    쉬운 이해를 위해 한마디 내뱉기 까지의 고심이 느껴집니다.
    늘 잘듣고 있습니다.
  26. 배성원
    좋은강의 감사합니다.
  27. 14번째
    5.12.
  28. 공삼이육
    감사합니다!
  29. php가 첫취업?
    기능이 점점 늘어나는군요
  30. 더나은삶
    정말 감사합니다^^ 하나씩 배워가는 재미가 있네요^^
  31. 김명진
    유튜브로 봤는데, 여기랑 같이 공부해야되는거 몰랐어요
    강의 감사~!!
  32. ㅁㄴㅇㄹ
    호호홓
  33. 이해
    고맙습니다
  34. 미니밥통
    고맙습니다.^^
  35. funlife
    감사합니다.
  36. 오원구
    고맙습니다.
  37. 배워시
    아하~
  38. 김원중
    감사 감사 html 5 사전이라 햇는대 어떻게?
  39. fanxiu
    처음 댓글 작성합니다..
    정말 잘 보고있습니다! 진심으로 감사드립니다.
  40. 완료
  41. forever6690
    완료
  42. cmj88j@gmail.com
    매번 강의를 잘 듣고 있고 쉬운 설명 감사합니다.
  43. 임지호
    HTML의 정보로서의 가치를 높이기 위해 HTML5부터 만들어진 의미론적(semantic) 태그들
    특별한 기능은 없지만 가독성을 높이고 의미를 더욱 확고하게 함.
    <header> : 웹페이지의 제일 큰, 대표 제목 부분에 해당(상단)
    <nav> : 웹페이지의 네비게이션 역할을 담당하는 부분에 해당
    <article> : 웹페이지의 본문에 해당(본문이 많은 경우 article을 여러번 쓰고 section으로 묶어주면 됨)
    <footer> : 주로 웹페이지의 부가적 정보를 담당하는 부분에 해당(하단)
    <section> : 위의 태그들과 달리 의미가 확연하지 않은 정보지만 서로 연관되어 있는 부분들을 엮음.
  44. D.JA
    DONE!
  45. Lee Hyungbum
    강의 감사합니다!
  46. 심외무별법
    감사합니다.
  47. egoing
    시간이 좀 지난 동영상이라 그런데 어떤 부분에서 문제가 있는지 시간도 알려주시면 더 좋을 것 같아요~
    대화보기
    • Eshilluna
      기본적으로 <strong>표시되지</strong> 화면에 표시되지 않는 정보들을 정의
      강조시킨부분 오타인거 같은데요.. 수정 요청합니다.
    • Wj Kim
      훌륭한 강의 감사합니다.
    • Mike Kang
      표안에 details 설명에 '기본적으로 표시되지 화면에 표시되지 않는 정보들을 정의' 라고 써있는데 기본적으로 다음에 표시되지가 오타 인것 같아요~
    버전 관리
    egoing
    현재 버전
    선택 버전
    graphittie 자세히 보기