* 본 포스팅은 간단한 웹문서 제작을 위한 HTML 정보글입니다.
1. 간단한 웹문서 제작을 위한 HTML의 기본
개인 홈페이지 제작의 필요성 정보화 시대, 빠르게 변화하는 사회 등등 어렸을 때부터 우리가 많이 듣던 이야기입니다. 그로부터 벌써 10년, 20년도 더 지난 현재 사회는 정말 빠르게 많은 직업
hooks.tistory.com
0. 문단 구성에 유용한 HTML 코드
지금까지 간단한 웹문서 제작에 필요한 HTML에 대해 배워보았습니다.
이번에는 제목과 웹페이지 내에서 문단을 구성하는데 유용한 코드에 대해서 배워보겠습니다.
배울 코드는 다음과 같이 총 3가지입니다.
먼저, 문단의 제목을 나타내는 h1 ~ h7 코드
그리고 문단을 구성하는 p 코드
마지막으로 문단이나 제목을 구분하기 위한 hr 코드
1. 문단의 제목 구성하기
이전에 글씨체를 구분하기 위해 h1~7코드를 이용하였는데, 제목을 구성하기 위한 코드로 이 h1~7 코드가 가장 적합합니다.
이 h코드는 <h1> 내용 </h1> , <h2> 내용 </h2>, <h3> 내용 </h3> ...... 형태를 취합니다.
문단의 제목을 구성하기위해서 각각 번호를 매기고 제목 1 ~ 제목 3을 나타내는 웹문서를 다음과 같이 <body> 안에 작성해봅시다.
<body>
<h1> 훅스랩</h1>
<h2> 멤버1 </h2>
<h2> 멤버2 </h2>
<h3> 일정 </h3>
</body>
*제목의 크기는 숫자마다 다릅니다.
2. 문단 내용 구성하기
이번에는 p코드를 이용하여 생성한 문단의 제목에 내용을 넣도록 하겠습니다.
이 p 코드는 body 내부에서 <p> 내용 </p> 형식으로 사용됩니다.
<h1> 훅스랩</h1>
<p> 엄청나게 다양한 지식을 갖춘 티스토리 블로그 </p>
<h2> 멤버1 </h2>
<p> 나! </p>
<h2> 멤버2 </h2>
<p> 멤버2도 나! </p>
<h3> 일정 </h3>
<p> 일.. 일.. 그리고 일 </p>
이런식으로 구성하면,
이렇게 문단의 내용을 구성할 수 있습니다.
3. 각 문단을 구분하는 선 만들기
문단을 마무리하고 그 밑에 선을 hr 코드를 이용하여 만들 수 있습니다. 이 hr 코드는 <hr> 형태를 취하고 <p>... </p> 아래에 추가해줌으로써 다음과 같이 구분선을 형성합니다.
'COMPUTER SCIENCE > A piece of INFO.' 카테고리의 다른 글
| 컴퓨터 메모리 장치 개요 (0) | 2021.05.25 |
|---|---|
| HTML 항목 구성과 항목에 설명넣기 (0) | 2021.05.20 |
| CSS 웹문서의 스타일 지정하기 (0) | 2021.05.14 |
| HTML 이미지 삽입코드와 사이즈 변경 (0) | 2021.05.13 |
| 간단한 웹문서 작성하고 브라우저로 열기 (0) | 2021.05.12 |
