영국 척척석사 유학생 일기장👩🏻‍🎓

(HTML코딩일기) 사이트에 제목과 본문 넣기, 문단 구분 하기 본문

코딩공부/HTML&CSS

(HTML코딩일기) 사이트에 제목과 본문 넣기, 문단 구분 하기

life-of-nomad 2023. 2. 5. 13:05
728x90
반응형
저번시간에 사이트에 이름을 붙여보았습니다.
오늘은 제목을 정하고 본문을 넣어보겠습니다.

 

1.  사이트에 제목 넣기

1  <!DOCTYPE html>
2  <html>
3    <head> 
4      <title>Weekly Codeit</title>
5      <meta charset="utf-8">
6    </head>
7    <body>
8        <h1>Weekly Codeit</h1>
9        <h2>코드잇이 엄선한 프로그래밍 꿀팁</h2>
10         <h2>배움의 기쁨을 세상 모두에게. 많은 코둥이들이 구독하고 있어요!</h2>
11       <h2>코딩이 즐거워지는 뉴스레터, Weekly Codeit</h2>
12    </body>
13  </html>

8 : heading(제목)의 약자입니다. 여기서 h1은 큰 제목을 의미합니다.

9 : h2는 작은 제목을 의미합니다. h2,h3,h4... 숫자가 클 수록 작은 제목을 의미합니다.

 

2.  사이트에 본문 넣기

각각의 제목 밑에 본문을 넣어보면 아래와 같습니다. 

1  <!DOCTYPE html>
2  <html>
3    <head> 
4      <title>Weekly Codeit</title>
5      <meta charset="utf-8">
6    </head>
7    <body>
8        <h1>Weekly Codeit</h1>
9         금요일에 만나는 코딩 한 스푼
10        <h2>코드잇이 엄선한 프로그래밍 꿀팁</h2>
11         컴퓨터 개론, 프로그래밍 기초, 업무 자동화 ... 인기 코드잇 강의를 뉴스레터로 만나보세요.
12         유용한 팁과 개발 지식을 매주 금요일 여러분의 메일함으로 보내드려요.
13       <h2>배움의 기쁨을 세상 모두에게. 많은 코둥이들이 구독하고 있어요!</h2>
14         iloveprincess 님 안녕하세요, 5년차 코둥이입니다! 제가 구독 중인 뉴스레터 중 가장 읽기 편하고 재밌어요. 매주 금요일이 기다려지네요 :)
15         코드냠냠 님 뉴스레터 정말 잘 보고 있습니다. 다양한 주제에 대한 소개 덕분에 기술 면접에서도 당황하지 않을 수 있었어요! 항상 감사드립니다.
16         냐리 님 덕분에 프로그래밍 상식이 풍부해지는 느낌임. 깊이있는 내용을 알기 쉽게 소개해줘서 더 좋은듯. 초보 코둥이들에게 추천해요.
17        <h2>코딩이 즐거워지는 뉴스레터, Weekly Codeit</h2>
18          Weekly Codeit
19         Weekly Codeit 을 아직 구독하지 않으셨다면? 구독 신청 Subscribe 최신 뉴스레터들을 놓치지 않기 위해 weekly@codeit.kr을 메일 주소록에 추가해주세요.
20         (주)코드잇 | 서울 중구 청계천로 100 시그니쳐타워 동관 10층 | 수신 거부 Unsubscribe
21    </body>
22  </html>

위와 같이 완성하면 제목과 본문이 페이지에 나타납니다. 하지만 여기서 큰 문제가 있습니다. 문단이 구분되지 않는다는 것입니다.

그럼 어떻게 해결할까요?

 

3.  문단 구분 하기 

문단을 구분 할 수 없는 것에 대한 해결책은 <p>태그를 넣는 것입니다. 여기서 p는 paragraph의 약자입니다.

태그를 넣는 방법은 아래와 같습니다. 

1  <!DOCTYPE html>
2  <html>
3    <head> 
4      <title>Weekly Codeit</title>
5      <meta charset="utf-8">
6    </head>
7    <body>
8        <h1>Weekly Codeit</h1>
9         금요일에 만나는 코딩 한 스푼
10        <h2>코드잇이 엄선한 프로그래밍 꿀팁</h2>
11        <p> 
12         컴퓨터 개론, 프로그래밍 기초, 업무 자동화 ... 인기 코드잇 강의를 뉴스레터로 만나보세요.
13        </p>           
14       <p>
15         유용한 팁과 개발 지식을 매주 금요일 여러분의 메일함으로 보내드려요.
16       </p>
17      <h2>배움의 기쁨을 세상 모두에게. 많은 코둥이들이 구독하고 있어요!</h2>
18       <p>
19         iloveprincess 님 안녕하세요, 5년차 코둥이입니다! 제가 구독 중인 뉴스레터 중 가장 읽기 편하고 재밌어요.
 매주 금요일이 기다려지네요 :)
20      </p>
21      <p>
22        코드냠냠 님 뉴스레터 정말 잘 보고 있습니다. 다양한 주제에 대한 소개 덕분에 기술 면접에서도 당황하지 않을 수 있었어요! 항상 감사드립니다.
23    </p>
24    <p>        
25        냐리 님 덕분에 프로그래밍 상식이 풍부해지는 느낌임. 깊이있는 내용을 알기 쉽게 소개해줘서 더 좋은듯. 초보 코둥이들에게 추천해요.
26    </p>
27    <h2>코딩이 즐거워지는 뉴스레터, Weekly Codeit</h2>
28    <p>          
29        Weekly Codeit
30   </p>
31    <p> 
32          Weekly Codeit 을 아직 구독하지 않으셨다면? 구독 신청 Subscribe 최신 뉴스레터들을 놓치지 않기 위해 weekly@codeit.kr을 메일 주소록에 추가해주세요.
33    </p>
34    <p>         
35         (주)코드잇 | 서울 중구 청계천로 100 시그니쳐타워 동관 10층 | 수신 거부 Unsubscribe
36    </p>  
37   </body>
38  </html>

위의 내용으로 입력하고 웹페이지를 확인해보면 아래와 같습니다.

제목은 큰 글자로, 본문은 작은 글자로 표시되고 문단 구분이 가능해집니다.

이상으로 사이트에 제목과 본문을 넣고 문단 구분하는 법을 알아보았습니다. 

728x90
반응형
저작자표시

'코딩공부 > HTML&CSS' 카테고리의 다른 글

(CSS코딩일기) div로 영역 나누고 배경색 설정하기  (0) 2023.02.13
(HTML코딩일기) 웹페이지에 이미지 넣기  (0) 2023.02.10
(HTML코딩일기) 페이지에 하이퍼링크 추가하기  (0) 2023.02.10
(HTML코딩일기) 줄 바꿈하기, 꺾쇠 기호 넣는 법  (0) 2023.02.06
(HTML코딩일기) 사이트에 이름붙이기  (0) 2023.02.04
'코딩공부/HTML&CSS' Related Articles more