제목과 문단
웹 사이트를 먼저 만들기 전에, 가장 기본적으로 사용하는것은 글 입니다.
글은 제목과 문단으로 구성되어 있으며, 일정 형식으로 만들어지기도 합니다.
글의 제목 - <h> 태그
h 태그는 글의 제목(heading)을 의미합니다.
<h1> ~ <h6> 까지 6단계로 구성되어 있으며, 각자 다른 크기를 제공합니다.
가장 큰 제목은 <h1>을, 가장 작은 제목은 <h6> 을 사용합니다.
<h>태그는 한 줄을 차지하는 속성(block)을 기본값으로 가지고 있습니다.
예시 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<h1>Hello World</h1>
<h2>Hello World</h2>
<h3>Hello World</h3>
<h4>Hello World</h4>
<h5>Hello World</h5>
<h6>Hello World</h6>
</body>
</html>
위의 코드는 아래의 결과값을 보여줍니다.
Hello World
Hello World
Hello World
Hello World
Hello World
Hello World
글의 문단 - p 태그
p 태그는 문단 (paragraph)을 의미합니다.
<p>태그 또한 한 줄을 차지하는 속성(block)을 기본값으로 가지고 있습니다.
예시 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Laudantium
obcaecati ratione magni incidunt ipsa voluptatum cupiditate, tempore
hic necessitatibus porro, vitae quia iusto reprehenderit numquam
perferendis distinctio aliquid maxime aut.
</p>
</body>
</html>
위의 코드는 아래의 실행 결과를 나타냅니다.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Laudantium obcaecati ratione magni incidunt ipsa voluptatum cupiditate, tempore hic necessitatibus porro, vitae quia iusto reprehenderit numquam perferendis distinctio aliquid maxime aut.
문자 그대로 표시하는 preformat 태그
html 태그는 어떠한 공백도 하나의 칸으로 취급합니다.
예시 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<h1> b l a n k ! </h1>
<p> b l a n k ! </p>
<div> b l a n k ! </div>
b l a n k !
</body>
</html>
실행 결과
b l a n k !
b l a n k !
따라서 작성한 값을 그대로 표시하기 위해 만든것이 preformatted 태그, <pre> 태그입니다.
<pre> 태그는 태그 사이의 공백, 특수문자를 모두 텍스트로 표시합니다.
시스템에서 지정된 고정폭 글꼴을 사용하며, 여백, 줄바꿈이 그대로 브라우저에 나타납니다.
따라서 아래와 같이 이모티콘 등을 표시할 수도 있습니다.
예시 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<pre>
⊂_ヽ ⊂_ヽ ⊂_ヽ
＼＼ Λ＿Λ ＼＼ Λ＿Λ ＼＼ Λ＿Λ
＼(‘ㅅ' ) 두둠칫 ＼(‘ㅅ' ) 두둠칫 ＼(‘ㅅ' ) 두둠칫
> ⌒ヽ > ⌒ヽ > ⌒ヽ
/ /＼＼ / /＼＼ / /＼＼
/ / ＼＼ / / ＼＼ / / ＼＼
</pre>
<h3><b><i>춤추는 고양이들</i></b></h3>
</body>
</html>
위의 코드는 아래와 같은 실행화면을 갖습니다.
⊂_ヽ ⊂_ヽ ⊂_ヽ
＼＼ Λ＿Λ ＼＼ Λ＿Λ ＼＼ Λ＿Λ
＼(‘ㅅ' ) 두둠칫 ＼(‘ㅅ' ) 두둠칫 ＼(‘ㅅ' ) 두둠칫
> ⌒ヽ > ⌒ヽ > ⌒ヽ
/ /＼＼ / /＼＼ / /＼＼
/ / ＼＼ / / ＼＼ / / ＼＼
춤추는 고양이들
속성 : block과 inline
지금까지의 태그의 공통점은 태그가 사용되면 자동으로 줄바꿈된다는 것입니다.
이러한 태그들을 block 속성을 가지고 있다고 합니다.
반면에 태그가 사용되어도 줄바꿈되지 않는 태그들이 존재하는데,
이러한 태그들을 inline 속성을 가지고 있다고 합니다.
다음 글에는 inline 속성을 가진 태그들을 알아보겠습니다.
'웹 프론트 엔드 정리본' 카테고리의 다른 글
| css 알아보기 - 선택자 : 전체선택자 * 와 타입선택자, class와 id (0) | 2024.09.30 |
|---|---|
| css 알아보기 - 스타일과 css (0) | 2024.09.30 |
| html 알아보기 - 시멘틱 웹과 div 태그 (1) | 2024.09.26 |
| html 알아보기 : 글씨 태그 - inline속성 태그 (0) | 2024.09.24 |
| html 알아보기 : html이란? (0) | 2024.09.23 |
