티스토리 HTML 목록 항목에 대한 링크와 위로가기 버튼 만들기

티스토리 블로그 목록 내의 특정 섹션에 대한 링크를 생성하려면 HTML 앵커 태그(<a>)를 사용하고 href 속성을 해당 섹션의 ID로 설정하면 됩니다. 이를 해결할 수 있는 방법을 예를 들어 설명하도록 합니다. 

목록

1. 티스토리 블로그 목록 내의 특정 섹션 링크에 대한 HTML의 구조

2. 예제를 사용하여 HTML code로 편집:다운로드

3. 게시글에서 결과 확인하기 

4. '위로가기' 버튼 만들기

 

1. 티스토리 블로그 목록 내의 특정 섹션 링크에 대한 HTML의 구조 

여러 항목이 포함된 목록이 있다고 가정하고 아래의 예를 설명하도록 합니다. 

<!-- 목록(List) 생성 --> 
<ul><li><a href="#section1">항목 1</a></li>
<li><a href="#section2">항목 2</a></li>
<li><a href="#section3">항목 3</a></li></ul>

<!-- 컨텐트가 올 섹션 -->
<div id="section1">항목 1
<p>Section1을 위한 항목 1에 대한 설명 또는 내용</p></div>
<div id="section2">항목 2
<p>Section2를 위한 항목 2에 대한 설명 또는 내용</p></div>
<div id="section3">항목 3
<p>Section3를 위한 항목 3에 대한 설명 또는 내용</p></div>

 

 

목록 항목:

각 목록 항목에는 해당 섹션의 ID(예: #section1, #section2, #section3)를 가리키는 href 속성이 있는 앵커(<a>) 태그가 포함되어 있습니다.

섹션:

목록 아래에는 콘텐츠에 별도의 섹션이 있으며 각 섹션에는 링크의 href 속성과 일치하는 고유 ID가 있습니다.

작동 방식:

사용자가 '항목 1'을 클릭하면 브라우저는 ID가 'section1'인 섹션으로 스크롤합니다.

 

↑ 위로 가기

반응형

2. 예제를 사용하여 HTML code로 편집합니다. 

목록 항목을 만듭니다.  

목록 파일 다운로드

 

• 다운로드한 HTML 코드를 복사합니다.(pdf로 저장된 파일)
• 블로그 글 편집에서 기본모드를 HTML 모드로 바꾸어 줍니다. (기본모드->HTML)
• 이제 복사한 HTML 코드를 아래와 같이 붙여 넣습니다. (새글쓰기로 들어가서 바로 HTML 편집창에 붙여넣음)

목록 항목 링크 코드

 

• 완료 버튼을 클릭하여 저장 후 기본모드로 옵니다. (완료 저장-> 기본모드)
• 아래와 같이 링크가 되어있는 목록을 볼 수 있습니다. 이 상태는 눌러도 넘어갈 내용을 지정해 주지 않았기 때문에 이제 섹션을 만들어 연결을 해볼 것입니다. 

↑ 위로 가기

섹션에 들어갈 내용을 작성합니다.

섹션 파일 다운로드

<!-- 콘텐츠 섹션 -->
<div id="section1">
<h2 data-ke-size="size26">1. Prompt Genie란 무엇인가요?</h2>
<p data-ke-size="size16">Prompt Genie는 사용자가 GPT 기반 언어 모델에 대한 프롬프트를 생성하는 데 도움을 주기 위해 설계된 AI 기반 도구입니다. 이는 사용자가 모델에서 원하는 출력을 얻기 위한 효과적인 지침을 공식화하는 데 도움이 됩니다.</p> </div>
<div id="section2"><h2 data-ke-size="size26">2. Prompt Genie의 활용</h2>
<p data-ke-size="size16">Prompt Genie의 유용성은 프롬프트 엔지니어링을 향상시키는 능력에 중점을 두고 있습니다. 입력 품질을 개선하여 GPT-3과 같은 언어 모델에서 더 나은 출력을 얻을 수 있는 팁과 사례를 제공합니다.</p> </div>
<div id="section3"> <h2 data-ke-size="size26 ">3. Prompt Genie의 자동 번역 기능</h2>
<p data-ke-size="size16">Prompt Genie에는 사용자가 콘텐츠를 원활하게 번역할 수 있는 자동 번역 기능이 포함되어 있습니다. 언어 모델을 활용하여 정확하고 상황에 맞는 번역을 생성합니다.</p> </div>
<div id="section4"><h2 data-ke-size="size26">4. 프롬프트 지니 설치 과정 및 단축키 사용법</h2>
<p data-ke-size="size16">프롬프트 지니 설치 과정은 간단합니다. 사용자는 이를 자신의 작업 흐름에 쉽게 통합할 수 있습니다. 추가적으로, 빠르고 효율적인 상호작용을 위한 단축키 사용법을 제공합니다.</p> </div>
<!-- 콘텐츠 섹션 끝 -->

 

• 다시 기본모드에서 HTML 모드로 갑니다. 다운로드한 HTML 코드를 앞의 목록 코드 뒤에 붙여넣습니다. 

목록 파일 + 섹션파일 다운로드 

목록과 섹션 HTML 코드 편집

 

• 다시 완료 버튼을 눌러 저장하고 기본모드 창으로 옵니다. 
• 이제 목록 부분과 섹션 내용이 만들어 진것을 볼 수 있습니다. 
• 해당 게시글을 저장하고 실행을 합니다. 

↑ 위로 가기

 

3. 게시글 확인하기 

결과 화면은 아래의 실행결과를 클릭하면 볼 수 있습니다.  이제 목록 중 하나를 누르면 해당 섹션으로 넘어가는 것을 볼 수 있습니다. 

실행 결과 - 티스토리 HTML: 목록과 내용 연결하기

 

4. '위로 가기' 버튼 만들기 

티스토리 블로그에 "맨 위로 스크롤" 버튼을 수동으로 추가하려는 경우 HTML, CSS 및 JavaScript 코드를 사용할 수 있습니다. 다음은 블로그 템플릿에 추가하거나 기본 설정에 따라 사용자 정의할 수 있는 기본 예입니다. 여기서는 HTML 코드만을 사용하여 만들어 보도록 합니다. 티스토리에서 CSS나 JavaScript코드 사용 경우 문제가 있을 수 있기 때문에 여기서는 HTML 코드만 알려 드리도록 합니다. 

 

다음 내용을 다시 HTML 목록 위에 써 줍니다. (기본모드 ->HTML 모드): 버튼을 눌렀을 때 목록 부분으로 옮겨집니다. 

<div id="List"> <h4 style="text-align: center;" data-ke-size="size20"><b><span style="font-family: 'Nanum Gothic';">목록</span></b></h4></div>

 

위로 가기 버튼과 링크를 만듭니다. 

<!-- 위로가기 버튼 -->
<div class="up-button"><a style="text-decoration: none; background-color: #4caf50; color: white; padding: 10px 15px; border-radius: 5px; cursor: pointer;" href="#List">&uarr; 위로가기</a></div>
<!-- 위로가기 버튼 끝 -->

 

앞에서 목록과 섹션 부분에 대한 HTML 코드를 사용한 것처럼 위로 가기 버튼 HTML 코드로 HTML 편집 모드로 가서 아래에 붙여 넣습니다. 원하는 해당 섹션마다 붙이고 싶다면 버튼을 넣고자 하는 곳에 붙여 넣으면 됩니다. 

 

↑ 위로가기

 

티스토리를 위한 HTML - <a>tag 링크

 

티스토리 블로그 링크: 내부링크와 외부링크