당신 모르고 있던 html 태그들

이자용·2021년 7월 19일
0

HTML&CSS

목록 보기
1/3
  • main
    body 태그 안에 주요 콘텐츠를 정의 할때 사용한다. 해당 문서의 중심 주제 또는 주요 기능과 직접적으로 관련되어 있거나 확장되는 콘텐츠로 구성되어야 하며 문서 전반에 걸쳐 반복되는 내용을 포함해서는 안된다. 따라서 main은 단하나의 요소만 존재해야한다.

  • nav
    nav태그는 문서에서 다른 문서로 이동하는 메뉴 같은 영역에 링크를 유도한다.

  • samp
    samp 태그는 컴퓨터 프로그램의 샘플 출력을 식별하기위한 요소이다.

  • datalist
    Datalist 태그는 인풋태그를 사용할 때 데이터목록을 미리 정해둘 때 유용하다. 인풋태그에 list속성으로 datalist태그의 id를 명시하면 datalist태그 내부에 미리 정의한 옵션들을 input요소에서 사용할수 있다.

  • details & * summary

    여기를 눌러보세요

    이렇게 추가 설명이 보여집니다.

    위와같이 태그를 구성하게 되면 summary태그를 클릭했을 때 형제요소(h1,div 등)의 토글기능이 구현된다. (접기/펼치기) 스타일도 적용가능하여 가시적으로 돋보이게 표현가능하다.
  • q
    Quote 의 약자로 인용문을 표현할 때 사용한다. 자동으로 쌍따옴표가 생성된다.

  • dl
    dl태그는 정의 목록의 약자로 용어를 설명하는 목록을 만들 때 사용된다. dl내부에서 Dt는 용어의 제목 dd는 정의 설명할떄 사용된다.

  • figure
    Html5부터 사용되는 태그로 삽화나 다이어그램, 사진등과 같이 문서의 주요흐름과는 독립적인 콘콘텐츠 정의할 때 사용한다.
    figure태그는는 콘텐츠의 문서내용과 연관성은 가지지만 문서의 주요 흐름과는 독립적이어서 문서의 흐름에 영향을 줘서는 안된다. figcaption태그로 설명을 달아주는것도 가능하다.

  • progress
    브라우저에서 제공하는 프로그레스바를 만들 때 사용한다. 값으로 콘트롤이 가능하고 간단하게 스타일을 줄수도 있다.

  • meter
    작은 게이지바로 그래프를 보여주는 태그이다. 예를들어 다음과같이 표현한다.
    3/10 표시법

    70% 표시법

  • wbr
    wbr태그는 본문중에서 자동줄바꿈 대신 직접 줄바꿈 지점을 정의할 때 사용된다.

  • kbd
    kbd태그는 본문에서 키보드 입력을 표현할 때 사용한다. 직접 스타일을 입혀서 표현할수도 있다.

  • cite
    저작물의 출처를 표현할 때 사용하는 태그

  • var
    var태그는 변수를 정의할 때 사용한다.

  • mark
    mark태그는 형광펜같이 하이라이트된 텍스트를 표현할떄 사용한다.

data- 속성은 무엇을 하는 것인가요? 사용했을 때 이점은 무엇인가요
data속성은 html태그에 직접적으로 데이터를 저장할 때 사용한다. 데이터는 형식은 자유롭게 사용 가능하며 value태그외에 별도의 데이터속성을 표시할수도 있다. 자바스크립트에서 핸들링하기도 용이하고 ui작업을 위한 여러가지 표식을 남겨두기도 좋다.

<script>, <script async><script defer>의 차이점은 무엇인가요
Script 태그가 html사이에 자리하게되면 html 파싱을 멈추고 script태그 안에 내용을 처리한후 그다음 html내용을 파싱하기 때문에 네트워크상황이 원활하지 않거나, sciprt태그에 문제가 있는경우 제대로 화면이 보이지 않을 수가 있다. 이 때문에 <script defer>를 사용하며, defer속성은 중간에 코드가 자리하고 있더라도 가장 마지막에 실행되어 html파싱을 방해하지 않는다는 장점이 있다.

<script async>태그는 비동기 스크립트를 불러올 때 사용하며 html 이 파싱되는 동시에 다운로드 되고 다운로드 완료된 순서대로 실행되기 때문에 중간에 용량이 큰 파일을 기다리느라 밑에 작은 파일도 로드하지 못하는 일이 생기지 않는다.

profile
이자용

0개의 댓글