티스토리 뷰
1. DL, DT, DD
용어를 정리하는 태그
dt: description list
dd: definition details
dl: definition term
dd, dt만을 포함해야 한다.
키는 값이다! → 용어는 ~ 설명!
<body>
<dl>
<dt>coffee</dt>
<dd>Coffee is good</dd>
<dt>milk</dt>
<dd>milk is delicious</dd>
</dl>
<ul>
<li>
<dfn>coffee</dfn>
<p>coffee is good</p>
</li>
<li>
<dfn>milk</dfn>
<p>milk is delicious</p>
</li>
</ul>
</body>
윗부분은 dl dt dd로, 아래는 li, dfn, p로 스타일링
2. P, HR
p: 하나의 문단을 설정, 다음 문단으로 넘어갈 수 있는 단축키를 제공
hr: 문단의 분리를 위해 설정, 빈 태그, 수평선(시각적)으로 표현되지만 의미적 관점에서 사용해야 한다.
표현되는 부분은 css로 없애거나 수정이 가능하다.
p태그 예제
<body>
<p>
동해 물과 백두산이 마르고 닳도록
하느님이 보우하사 우리나라 만세.
무궁화 삼천리 화려 강산
대한 사람, 대한으로 길이 보전하세.
</p>
<p>
남산 위에 저 소나무, 철갑을 두른 듯
바람 서리 불변함은 우리 기상일세.
무궁화 삼천리 화려 강산
대한 사람, 대한으로 길이 보전하세.
</p>
<p>
가을 하늘 공활한데 높고 구름 없이
밝은 달은 우리 가슴 일편단심일세.
무궁화 삼천리 화려 강산
대한 사람, 대한으로 길이 보전하세.
</p>
<p>
이 기상과 이 맘으로 충성을 다하여
괴로우나 즐거우나 나라 사랑하세.
무궁화 삼천리 화려 강산
대한 사람, 대한으로 길이 보전하세.
</p>
</body>
코드에서 내려쓰기 부분이 화면에서는 띄어쓰기로 출력된다.
내려쓰기 위해서는 <br> 태그를 사용하면 된다.
hr태그 예제
<body>
<p>
동해 물과 백두산이 마르고 닳도록
하느님이 보우하사 우리나라 만세.
무궁화 삼천리 화려 강산
대한 사람, 대한으로 길이 보전하세.
</p>
<hr>
<p>
남산 위에 저 소나무, 철갑을 두른 듯
바람 서리 불변함은 우리 기상일세.
무궁화 삼천리 화려 강산
대한 사람, 대한으로 길이 보전하세.
</p>
<hr>
<p>
가을 하늘 공활한데 높고 구름 없이
밝은 달은 우리 가슴 일편단심일세.
무궁화 삼천리 화려 강산
대한 사람, 대한으로 길이 보전하세.
</p>
<p>
이 기상과 이 맘으로 충성을 다하여
괴로우나 즐거우나 나라 사랑하세.
무궁화 삼천리 화려 강산
대한 사람, 대한으로 길이 보전하세.
</p>
</body>hr {
border: none;
border-top: 2px dashed red;
}hr코드로 문단을 구분, 기본적으로 css설정이 없을 경우에는 검은색 선으로 표현된다.
한 줄의 구분선이 아니라 border, padding, px 등 여러 가지 설정이 가능하다.
3. PRE
pre: preformatted Text 서식이 미리 지정된 텍스트를 설정.
텍스트의 공백, 줄 바꿈을 유지해서 표시할 수 있음
Monospace글꼴 계열로 표시 ☞모든 글자의 크기가 동일하다.
pre 예제 1
<body>
<div>
동해 물과 백두산이 마르고 닳도록
하느님이 보우하사 우리나라 만세.
무궁화 삼천리 화려 강산
대한 사람, 대한으로 길이 보전하세.
</div>
</body>
html에서 띄어쓰기 한번 이상 하는 것은 띄어쓰기 하나와 동일하다.
pre 예제 2
<body>
<pre>
동해 물과 백두산이 마르고 닳도록
하느님이 보우하사 우리나라 만세.
무궁화 삼천리 화려 강산
대한 사람, 대한으로 길이 보전하세.
</pre>
</body>
pre태그로 작성할 때에는 가독성을 위해 만들어둔 모든 코드를 지워줘야 한다. 모~든 부분이 반영되기 때문이다.
↓
<body>
<pre>동해 물과 백두산이 마르고 닳도록
하느님이 보우하사 우리나라 만세.
무궁화 삼천리 화려 강산
대한 사람, 대한으로 길이 보전하세.</pre>
</body>
포스트를 작성하거나 내용에 줄 바꿈, 띄어쓰기를 입력해서 DB로 들어갔다가 바로 출력할 경우에 사용하면 좋다.
4. BLOCKQUOTE
blockquote: block quotation 인용문
속성 cite 인용된 정보의 url을 사용
인용된 부분이 있으면 사이트의 위치를 표시해주면 된다.
<body>
<blockquote cite: "https://ko.wikipedia.org/wiki/%EB%8C%80%ED%95%9C%EB%AF%BC%EA%B5%AD%EC%9D%98_%EA%B5%AD%EA%B0%80">
동해 물과 백두산이 마르고 닳도록
하느님이 보우하사 우리나라 만세.
무궁화 삼천리 화려 강산
대한 사람, 대한으로 길이 보전하세.
</blockquote>
</body>
'HTML CSS JS' 카테고리의 다른 글
| HTML / 요소 - 인라인 텍스트 - ABBR (1) | 2021.06.03 |
|---|---|
| HTML / 요소 - 인라인 텍스트 - A (1) | 2021.06.03 |
| HTML / 요소 - 문자 콘텐츠 - OL, UL, LI (0) | 2021.06.03 |
| HTML / 요소 - 콘텐츠 구분 (0) | 2021.06.03 |
| HTML - 메타 데이터 META (0) | 2021.06.02 |