[코딩] ChatGPT와 티스토리 서식 만들기 (6) 서식 완성!!

이제 구성요소를 좀 넣어보려 한다!!

 

꾸미려는 제목, 소제목, 목차, 본문이 필요하니까

 

질문을 다시 해보니 코드를 바로 작성해주시는 GPT 선생님 감사합니다!

 

<!-- 포스팅 제목 -->
<h1 style="color: #FF5722; font-size: 2.5em; font-family: 'Noto Sans KR', sans-serif; border-bottom: 2px solid #FF5722; padding-bottom: 0.3em;">여기에 제목을 쓰세요</h1>

<!-- 소제목 -->
<h2 style="color: #FF5722; font-size: 2em; font-family: 'Noto Sans KR', sans-serif; margin-top: 2em;">여기에 소제목을 쓰세요</h2>

<!-- 목차 -->
<ul style="font-size: 1.2em; font-family: 'Noto Sans KR', sans-serif; color: #333333; margin-bottom: 2em;">
    <li><strong style="color: #FF5722;">1.</strong> 첫 번째 항목</li>
    <li><strong style="color: #FF5722;">2.</strong> 두 번째 항목</li>
    <li><strong style="color: #FF5722;">3.</strong> 세 번째 항목</li>
</ul>

<!-- 본문 -->
<p style="color: #333333; font-size: 1em; font-family: 'Noto Sans KR', sans-serif; line-height: 1.6;">본문을 쓰는 공간입니다. 이 곳에는 텍스트의 색깔이 <span style="color: #FF5722; font-weight: bold;">주황색</span>인 강조된 부분도 포함할 수 있습니다.</p>

 

이대로 복붙을 해보겠습니다~!~!

 

서식을 적용해보니 아래와 같이..

 

여기에 제목을 쓰세요

여기에 소제목을 쓰세요

• 1. 첫 번째 항목
• 2. 두 번째 항목
• 3. 세 번째 항목

본문을 쓰는 공간입니다. 이 곳에는 텍스트의 색깔이 주황색인 강조된 부분도 포함할 수 있습니다.

 

 

 

너무 이쁜걸요^^

 

 

 

목차를 누르면 그 본문 내용에 가게끔 한번 코드 작성도 부탁드려볼까요?

 

 

 

<!-- 포스팅 제목 -->
<h1 style="color: #FF5722; font-size: 2.5em; font-family: 'Noto Sans KR', sans-serif; border-bottom: 2px solid #FF5722; padding-bottom: 0.3em;">여기에 제목을 쓰세요</h1>

<!-- 소제목 -->
<h2 style="color: #FF5722; font-size: 2em; font-family: 'Noto Sans KR', sans-serif; margin-top: 2em;">여기에 소제목을 쓰세요</h2>

<!-- 목차 -->
<ul style="font-size: 1.2em; font-family: 'Noto Sans KR', sans-serif; color: #333333; margin-bottom: 2em;">
    <li><a href="#section1" style="color: inherit; text-decoration: none;"><strong style="color: #FF5722;">1.</strong> 첫 번째 항목</a></li>
    <li><a href="#section2" style="color: inherit; text-decoration: none;"><strong style="color: #FF5722;">2.</strong> 두 번째 항목</a></li>
    <li><a href="#section3" style="color: inherit; text-decoration: none;"><strong style="color: #FF5722;">3.</strong> 세 번째 항목</a></li>
</ul>

<!-- 본문 -->
<h3 id="section1" style="color: #FF5722; font-size: 1.5em; font-family: 'Noto Sans KR', sans-serif;">1. 첫 번째 항목</h3>
<p style="color: #333333; font-size: 1em; font-family: 'Noto Sans KR', sans-serif; line-height: 1.6;">본문의 첫 번째 항목 내용입니다.</p>

<h3 id="section2" style="color: #FF5722; font-size: 1.5em; font-family: 'Noto Sans KR', sans-serif;">2. 두 번째 항목</h3>
<p style="color: #333333; font-size: 1em; font-family: 'Noto Sans KR', sans-serif; line-height: 1.6;">본문의 두 번째 항목 내용입니다.</p>

<h3 id="section3" style="color: #FF5722; font-size: 1.5em; font-family: 'Noto Sans KR', sans-serif;">3. 세 번째 항목</h3>
<p style="color: #333333; font-size: 1em; font-family: 'Noto Sans KR', sans-serif; line-height: 1.6;">본문의 세 번째 항목 내용입니다.</p>

 

이걸 적용해 볼까요~??

 

여기에 제목을 쓰세요

여기에 소제목을 쓰세요

• 1. 첫 번째 항목
• 2. 두 번째 항목
• 3. 세 번째 항목

 

 

 

 

 

1. 첫 번째 항목

본문의 첫 번째 항목 내용입니다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

2. 두 번째 항목

본문의 두 번째 항목 내용입니다.

 

 

 

 

 

 

 

 

 

 

 

 

3. 세 번째 항목

본문의 세 번째 항목 내용입니다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

항목들 눌러보세요!! 아주 훌륭합니다^^