EverGiver

<dfn>, <time>, <wbr> 태그 본문

Front-End (웹)/HTML

<dfn>, <time>, <wbr> 태그

친절한개발초보자 2021. 8. 24. 22:14
728x90
<dfn>  태그

 

html에서 처음 사용하는 용어 및 정보 기타 여러 가지 용어를 정의해줄 때 사용하는 태그

  • 특징
    - 사용하면 글자가 오른쪽으로 기울어진다.
    - 혼자 사용하는 태그는 아니며 abbr 태그와 함께 사용한다.
    <!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <title>dfn태그 및 기타</title>
</head>
<body>
    <dfn>dfn태그 입니다</dfn>
    <dfn><abbr title="definition 정의해주다">dfn태그는 정의태그입니다</abbr></dfn>
</body>
</html>​

 

<time>  태그

 

time태그를 작성한 html파일이 날짜와 시간 정보를 입력받아서 컴퓨터가 이것을 인식할 수 있도록 만들어주는 시간 정보를 가지고 있는 태그

  • <time datetime="YYYY-MM-DDThh:mm:ss">
    - YYYY : 연도
    - MM : 월
    - DD : 날짜
    - T : 날짜와 시간을 구분해주는 경계선 기능
    - hh : 시간
    - mm : 분
    - ss : 초
    <!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>time태그</title>
</head>
<body>
    <time datetime="2021-08-19T09:35:20"></time>
</body>
</html>​
  • 구글이나 여러 브라우저에서 무언가를 검색해보면 누군가가 작성한 글이 뜨는 걸 확인할 수 있다 이 글들의 특징은 작성된 날짜가 언제인지 우리가 확인할 수 있는데 이 작성된 날짜를 표기해주는 게 바로 time태그다.
  • time태그의 경우에는 실제로 웹사이트에서 봐야 할 필요는 없기 때문에 html 태그상에서만 작성해주고 안에 내용은 비워두는 게 보통이다.

<wbr>  태그

 

특수 줄 바꿈 태그

  • html태그는 안에 작성된 내용에 길이가 긴 단어든 짧은 단어든 줄 바꿈이 일어날 때는 단어 전체가 같이 내려오는 특징이 있는데 wbr태그를 사용하면 원하는 지점에서부터 단어가 따로따로 줄 바꿈이 되도록 만들어주는 태그
  • br태그와의 차이점
    - br태그는 사용하면 그 즉시 줄 바꿈이 일어나는데 wbr태그는 줄바꿈이 일어나는 상황이 발생했을 때 적용이 된다.
    <!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>wbr태그</title>
    <style>
        *{margin:0;padding:0;}
        p{width:300px;border:1px solid red;}
    </style>
</head>
<body>
    <p>
        안녕하세요 저는 p태그입니다 저는 문단 단락 태그이며 이 글은 한글로 작성되어
        있습니다 훈민정음의 영어표기는 hunmin<wbr>jeongeum 이며 dfo bpo as do afspo vbkb;lakdg o dsaofkas pdfsdaf sadfaskb asdfowo wgaodpa adlpb kapdgkp
        b b,al sd;lfsa;l fkd sa;lka sd;lfasdk ;alsdkf;asl;sldfks; l;a 
    </p>
</body>
</html>​
728x90
저작자표시

'Front-End (웹) > HTML' 카테고리의 다른 글

구글 개발자 도구  (0) 2021.08.29
외부 폰트  (0) 2021.08.27
입력 양식  (0) 2021.08.24
<iframe> 태그  (0) 2021.08.19
<video>, <audio> 태그  (0) 2021.08.19
'Front-End (웹)/HTML' Related Articles more
Comments