* 본 포스팅은 간단한 웹문서 제작을 위한 HTML 정보글입니다.
1. 간단한 웹문서 제작을 위한 HTML의 기본
개인 홈페이지 제작의 필요성 정보화 시대, 빠르게 변화하는 사회 등등 어렸을 때부터 우리가 많이 듣던 이야기입니다. 그로부터 벌써 10년, 20년도 더 지난 현재 사회는 정말 빠르게 많은 직업
hooks.tistory.com
0. 문단 구성에 유용한 HTML 코드
이전 포스팅에서 문단 구성에 유용한 h1~h7 코드와 p코드 그리고 hr 코드에 대해서 배웠습니다.
이번에는 구성한 코드들의 집합을 사용자가 알아보기 쉽도록 문단에 집합을 구성하는 <article> 코드와 <section> 코드에 대해서 알아보고, 문단의 상단, 하단, 그리고 사이드를 지정하는 코드를 알아보도록 합시다.
* 문단의 상단부와 하단부. 그리고 사이드를 지정한다고 하더라도, 따로 스타일을 지정하지 않으면 제목과 내용이 일렬로 정렬하여 나오게 됩니다. 문단의 위치를 스타일로 지정하는 것은 이후에 알아보도록 합시다.
1. 문단 구분하기, <article>... </article> , <section>... </section>
먼저, 문단을 다음과 같이 두 개의 문단을 구성하겠습니다.
문단1:
<body>
<h1> 훅스랩 </h1>
<p> 엄청나게 다양한 지식을 갖춘 티스토리 블로그 </p>
</body>
문단 2:
<body>
<h2> 멤버 </h2>
<p> 나! </p>
<h3> 일정 </h3>
<p> 일.. 일.. 그리고 일 </p>
</body>
두 문단을 <hr>으로 구분하고 브라우저를 통해서 웹문서를 확인해보면 다음과 같은 결과를 얻습니다.
이번에는 두 문단을 구분선, <hr> 없이 다음과 같이 article과 section을 이용하여 문단을 구분해보겠습니다.
A. <article> 문단 </article>으로 구분하기
B. <section> 문단 </section>으로 구분하기
A와 B 두 html 코드의 결과는 위와 같이 동일했습니다.
일반적으로 <section> 코드는 같은 주제로 구성된 문단을 구분하는데 쓰이고, <article> 코드는 독립적인 주제들을 구분하는데 쓰인다고 합니다. 당연히 그렇게 쓰이는 차이는 있겠지만, 웹문서 초보자로서 이러한 코드가 있다는 정도만 인지하겠습니다.
이후에 실제로 웹문서 제작에 있어, 두드러진 차이가 나타난다면 그때 자세히 다루어 보겠습니다.
2. 문단의 상단부 지정, <header>... </header>
위에서 예시로든 문단 1을 상단부로 지정해보겠습니다.
코드:
<header> 문단1 </header>
문단 2
3. 문단의 하단부 지정, <footer>... </footer>
이어서 문단 2를 하단부로 지정하도록 하죠.
코드:
<header> 문단 1 </header>
<footer> 문단 2 </footer>
상단부와 하단부를 지정하였다 하더라도 결과는 처음의 결과와 동일했습니다.
이것은 따로 스타일을 지정하지 않은 한 문단은 차례대로 나온다는 것을 의미합니다. 이후에 CSS(Cascading Style sheets) 포스팅에서 문단의 위치를 지정하는 것을 다루겠습니다.
4. 문단의 사이드 지정, <aside>... </aside>
추가로 문단 1과 문단 2사이에 다음의 코드를 추가하여 사이드바 문단을 만들어 봅시다.
코드:
<header> 문단1 </header>
<aside>
<h7> 휴가? </h7>
<p> 대체 언제 쉴 수 있을까? </p>
</aside>
<footer> 문단2 </footer>
결과는 마찬가지로 순서대로 문단이 나온다는 것을 알 수 있습니다.
이후에 CSS를 배워서 웹문서를 문서답게 만들어 봅시다.
'COMPUTER SCIENCE > A piece of INFO.' 카테고리의 다른 글
| 전자회로 정보_ 트랜지스터와 논리게이트 (0) | 2021.06.04 |
|---|---|
| [HTML] 서식 관련 코드 정리 (0) | 2021.05.31 |
| 컴퓨터 메모리 장치 개요 (0) | 2021.05.25 |
| HTML 항목 구성과 항목에 설명넣기 (0) | 2021.05.20 |
| 문단 구성에 유용한 HTML 코드 정리 (0) | 2021.05.18 |
