티스토리 뷰
HTML / 요소 - 인라인 텍스트 - DFN, CITE, Q, U, CODE, KBD, SUP, SUB, TIME, SPAN, BR, DEL, INS
Programmers 2021. 6. 3. 15:30<dfn>: definition 용어의 하나를 정의할 때 사용 ↔ dl dt dd 용어와 설명을 나열, 많을 때 사용
<p>
<dfn>
the internet
</dfn>
is useful
</p>
<cite>: 창작물에 대한 참조를 설정, 이탤릭체로 표시
<body>
<cite>The Scream</cite> by Munch
</body>
<q>: inline quotation 짧은 인용문을 설정, 조금 길다싶으면 blockqoute태그를 사용
cite속성을 통해서 url로 명시할수있다.
<u>: underline 밑줄이 있는 글자 설정, css에서 사용하자.
순수하게 꾸미는 용도 안 쓰는 게 낫다.
<a>와 헷갈리지 않게 주의 - 밑줄 그어져 있으면 클릭이 될 거 같으니깐,
<span>을 활용할 수 있을 경우에는 <u> 태그 사용하지 말자
<body>
<u>동해물과</u> 백두산이 마르고 닳도록
하느님이 보우하사 우리나라 만세
</body>
u태그를 이용해서 밑줄을 그었다.
- index.html
<body>
동해물과 백두산이 마르고 닳도록
<span>하느님이</span> 보우하사 우리나라 만세
</body>- main.css
span{
text-decoration: underline;
}
span태그와 css를 이용해서 밑줄을 그었다. 꾸미는 것에는 가능하면 html에서의 u태그와 같은 것들은 사용하지 말자.
<code>: inline code 컴퓨터 코드 범위 설정
특정한 문장 안에 코드가 삽입되었을 때, 화면에 코드인 부분처럼 표시되도록 한다. monospace글꼴 계열로 표시.
- index.html
<body>
<code>document.getElementById('id-value')</code> is a piece of computer code.
</body>- main.css
code {
color: blue;
background: lightgray;
padding: 3px;
border: 1px solid green;
}
code태그를 사용하면 지정한 부분이 이태리체로 코드인 것처럼 보이고, 추가로 css로 수정해주었다.
<kbd>: keyboard input 키보드에서 사용자 입력을 나타내는 텍스트 범위를 설정
- index.html
<body>
<p>
<kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>K</kbd>
</p>
<kbd>ESC</kbd>
</body>
- main.css
kbd {
padding: 0 3px;
border-radius: 3px;
border-top: 2px solid rgb(240, 240, 240);
border-bottom: 2px solid rgb(205, 205, 205);
border-left: 2px solid rgb(240, 240, 240);
border-right: 2px solid rgb(225, 225, 225);
}
kdb태그를 이용해서 키보드라는 것을 명시해주고 css로 추가적인 부분들을 만들어주었다.
<sup>: superscripted text 위 첨자
<sub>: subscript text 아래 첨자
<body>
X<sup>4</sup> + Y<sup>2</sup>, H<sub>2</sub>0
</body>
위 첨자, 아래 첨자를 넣을 수 있다.
<time>: 날짜나 시간을 나타내기 위한 목적으로 사용된다.
datetime속성으로 유효한 날짜 문자를 지칭할 수 있다. date라는 값을 사용. IE 지원 불가.
"YYYY-MM-DD"
- index.html
<body>
<h3>날짜</h3>
<p><time datetime="2019">2019년</time></p>
<p><time datetime="2019-12">2019년 12월</time></p>
<p><time datetime="2019-12-25">2019년 12월 25일</time></p>
<p><time datetime="12-25">크리스마스</time></p>
<p><time datetime="2019-W20">2019년의 20번째 주</time></p>
<h3>날짜와 시간</h3>
<p><time datetime="2019-12-24T23:00">2019년 12월 24일 저녁 11시</time></p>
<p><time datetime="2019-12-24 23:00">2019년 12월 24일 저녁 11시</time></p>
<p><time datetime="2019-12-24T23:59:59">2019년 12월 24일 저녁 11시 59분 59초</time></p>
<p><time datetime="2019-12-24T23:59:59.234">2019년 12월 24일 저녁 11시 59분 59초 234밀리초</time></p>
<h3>시간</h3>
<p><time datetime="09:00">아침 9시</time></p>
<p><time datetime="09:00+09:00">한국 시간(UTC+9)으로 아침 9시</time></p>
<p><time datetime="09:00-05:00">미국 뉴욕 시간(UTC-5)으로 아침 9시</time></p>
<h3>기간</h3>
<p><time datetime="P2D">2일의 기간</time></p>
<p><time datetime="PT15H10M">15시간 10분의 기간</time></p>
</body>
<span>: 본질적으로 아무 의미가 없는 인라인 요소. ↔ div와 비슷하지만 div는 블록 요소
span태그 예제(div와 비교)
div태그
<body>
동해 물과 <div>백두산</div>이 마르고 닳도록
하느님이 보우하사 우리나라 만세
</body>
의미는 없지만 수직으로 쌓이는 블록 요소(레이아웃을 다루는데 특화, 텍스트를 다루는 것에는 적합하지 않다.)
span태그
<body>
동해 물과 <span>백두산</span>이 마르고 닳도록
하느님이 보우하사 우리나라 만세
</body>
의미가 없는 것은 동일하지만 수평으로 쌓이는 인라인 요소
<br/>: break 줄 바꿈을 설정, 빈 태그
<body>
동해 물과 백두산 이 마르고 닳도록<br>
하느님이 보우하사 우리나라 만세
</body>
실제로 엔터를 사용하기 위해서 사용. 절대로 <br>로 간격을 만들어내서는 안 된다. css로 해야 된다.
<del>: 삭제된 텍스트의 범위를 지정, 기존에는 작성했지만 지울 내용
cite속성 변경된 이유를 설명
datetime 변경된 날짜
<ins>: 새로 추가된 텍스트의 범위를 지정
cite속성 변경된 이유를 설명
datetime 변경된 날짜
<body>
<p>my favorite color is <del>blue</del> <ins>red</ins>!</p>
</body>
모든 태그들의 의미에 집중하자
'HTML CSS JS' 카테고리의 다른 글
| HTML / 요소 - 멀티미디어 - AUDIO, VIDEO, FIGURE, FIGCAPTION, IFRAME, CANVAS, SCRIPT, NOSCRIPT (0) | 2021.06.07 |
|---|---|
| HTML / 요소 - 멀티미디어 - IMG, src, alt, width, height, srcset, sizes (0) | 2021.06.03 |
| HTML / 요소 - 인라인 텍스트 - ABBR (1) | 2021.06.03 |
| HTML / 요소 - 인라인 텍스트 - A (1) | 2021.06.03 |
| HTML / 요소 - 문자 콘텐츠 - DL, DT, DD, P, HR, PRE, BLOCKQUOTE (0) | 2021.06.03 |