안녕하세요, 수염난아이티 입니다.

이번 페이지에서는 움직이는 이미지를 삽입하는 html 코드를 알아보겠습니다.

<img src = 이미지 주소>

굉장히 간단합니다.

올리려는 이미지의 주소는 내pc의 주소가 될 수도 있고 특정 url이 될 수도 있습니다.

추가로 삽입하는 이미지를 중앙 정렬하는 방법도 알아보겠습니다.

<center>
	<img src = 이미지 주소>
</center>

img src 앞, 뒤에 center를 넣어주면 됩니다.

안녕하세요, 수염난아이티 입니다.

이번 페이지에서는 글자위치를 변경하는 HTML코드를 알아보겠습니다.

우선 정렬방법은 아래와 같습니다만, 자주 사용하는 왼쪽, 오른쪽, 중앙정렬만 예시를 들었으나,

"text-align: 이후 만 변경해서 적용하시면 됩니다.

• left : 왼쪽 정렬
• right: 오른쪽 정렬
• center : 가운데 정렬
• justify : 양쪽 정렬
• start : 현재 텍스트 줄의 시작 위치에 맞추어 문단 정렬
• end : 현재 텍스트 줄의 끝 위치에 맞추어 문단 정렬
• match-partent : 부모 요소에 따라 문단 정렬

1. 왼쪽 정렬 (Left)

<p style="text-align:left">text 및 문장을 왼쪽에 정렬하는 코드 입니다.</p>

2. 오른쪽 정렬 (Right)

<p style="text-align:right">text 및 문장을 오른쪽에 정렬하는 코드 입니다.</p>

3. 중앙 정렬 (Center)

<p style="text-align:center">text 및 문장을 중앙에 정렬하는 코드 입니다.</p>

안녕하세요, 수염난아이티 입니다.

이번 페이지에서는 HTML, CSS 편집에 필수적인 색상코드 조회 유용한 싸이트를 소개드립니다.

https://html-color-codes.info/

추가로 기본 색상코드?는 아래와 같이 남겨드리니 복사해서 쉽게 사용하시면 됩니다.

해당 표의 출처는 맨 아래 남겨놨습니다.

#출처 : https://hexa-coding.tistory.com/34

안녕하세요, 수염난아이티 입니다.

인터넷을 하며 마우스 스크롤을 위/아래로 움직이다보면 웹페이지의 특정 위치에 어떤 게이지가

내가 읽고있는 위치에 따라서 같이 움직이는 것을 발견할 수 있습니다.

이 게이지 같은 것을 프로그레스 바(Progress Bar)라고 합니다.

이번 페이지에서는 아주 간단하게 티스토리 상단에 프로그레스 바를 적용하는 방법을 알아보겠습니다.

목차

1. 프로그레스 바(Progress Bar)란?

2. 프로그레스 바 HTML 코드 추가하기

3. 프로그레스 바 CSS 코드 추가하기

4. 프로그레스 바 그라데이션 CSS 코드 추가하기

1. 프로그레스 바(Progress Bar)란??

프로그레스 바는 사용자에게 내 블로그의 글을 어느 정도 읽었는지 시각적으로 표시하는 UI요소 입니다.

일반적으로 프로그레서 바는 진행 중인 작업의 진행 정도를 나타내는 가시적인 막대를 제공합니다.

이는 사용자에게 작업이 얼마나 더 걸릴지 또는 어디까지 진행되었는지 알려줍니다.

사용자는 프로그레스 바를 통해 블로그의글이 얼마나 남았는지 시각적으로 파악할 수 있으므로,

이는 사용자 경험을 향상시키는 데 중요한 UI요소 입니다.

2. 프로그레스 바 HTML 코드 추가하기

아래 그림과 같이 '티스토리 관리 → 스킨편집 → html편집' 으로 접속하여

ctrl + F3 으로 's_t3' 를 찾습니다.

그리고 아래의 html 코드를 <s_t3> 아래 열에 맞춰 붙여넣습니다.

<!-- 프로그레스바 -->
<div id="mybar"></div>
<script>function myBar(){var a=(document.body.scrollTop||document.documentElement.scrollTop)/(document.documentElement.scrollHeight-document.documentElement.clientHeight)*100;document.getElementById("mybar").style.width=a+"%"}window.onscroll=function(){myBar()};</script>
<!-- 프로그레스바 끝 -->

3. 프로그레스 바 CSS 코드 추가하기

위의 html 코드 입력을 완료했다면 아래 그림과 같이 css 코드 입력 창으로 넘어갑니다.

(html 바로 옆에 있습니다.)

그리고 아래의 코드를 원하는 위치에 입력합니다.

저는 맨 위에 입력했습니다.

/* 프로그레스바 시작 */
#mybar { 
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 5px; /* 프로그레스 바 굵기 */
  z-index: 9999999;
  transition: all .2s ease;
  background: #22ac38; /* 프로그레스 바 색상 */
}
/* 프로그레스바 시작 끝 */

4. 프로그레스 바 그라데이션 CSS 코드 추가하기

프로그레스 바에 그라데이션 효과를 넣고 싶으시면 아래의 코드를 입력하시면 됩니다.

/* 프로그레스바 시작 */
#mybar { 
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 5px; /* 프로그레스 바 굵기 */
  z-index: 9999999;
  transition: all .2s ease;
  background: linear-gradient(135deg, #fa709a, #fee140); /* 프로그레스 바 그라데이션 색상 */
}
/* 프로그레스바 시작 끝 */

#출처 : https://galam.tistory.com/

안녕하세요, 수염난아이티 입니다.

이번 페이지에서는 HTML의 p, div, span 태그에 대해서 알아보겠습니다.

목차

1. HTML 태그란?

2. HTML 기본구조

3. p태그

4. div태그

5. span태그

1. HTML 태그란?

HTML은 (Hyper Text Markup Language) 의 약자이며 HTML 태그(Tag)는 웹 페이지의 구조와 콘텐츠를 정의하는데 사용되는 마크업 언어의 기본 구성 요소입니다. HTML 태그는 요소(element)를 감싸거나 특정한 형태로 표시하기 위해 사용되며, 일반적으로 꺽쇠괄호(<>)로 둘러싸여 있습니다.

2. HTML 기본구조

HTML 태그는 시작 태그와 종료 태그로 구성됩니다. 시작 태그는 요소의 시작을 알리고 종료 태그는 요소의 끝을 알립니다.

태그 이름은 대소문자를 구분하지 않지만, HTML5 표준에서 소문자를 사용하는 것이 일반적입니다.

3. p태그

p태그는 paragraph의 앞글자를 딴 것으로 글자그대로 문단을 뜻합니다.

p태그 안에 들어가는 문장은 하나의 문단으로 출력이 되며, p태그 밖에서는 약간의 간격을 유지합니다.

4. div태그

div태그는 division의 줄임말로 직역하면 분할하다 라는 의미가 있습니다.

이는 출력시 div태그가 속해있는 데이터의 줄을 전부 div의 영역으로 종속합니다.

5. span태그

span태그는 inline으로 주어진 데이터만큼만 공간을 가지고 있는 태그 입니다.

span태그 안에 있으면 줄넘김이 없으며 별다른 명령없이 span태그를 연달아 입력하면 줄넘김없이 해당 라인의 바로 옆에 출력되는 모습을 볼 수 있습니다.

#출처 : https://nancording.tistory.com/

안녕하세요, 수염난아이티 입니다.

여러 티스토리 페이지를 방문하여 글을 보다보면

글 안에 목차가 삽입되어 있는 것을 발견할 수 있습니다.

아무래도 목차가 있는 글은 전체를 다 읽을 필요 없이 필요한 부분을 찾아서

원하는 정보를 얻을 수 있는 기능을 제공하여 방문자가 편리함을 느낄 수 있어서 좋은 것 같습니다.

이번 페이지에서는 쉽고 간단하게 티스토리 글 안에 목차 만드는 법을 알아보겠습니다.

딱히, HTML 지식이 없어도 할 수 있으니 차근차근 따라오시기 바랍니다.

1. 티스토리 '관리' 페이지에 들어갑니다.

2. 왼쪽 메뉴바 상단에 위치한 '서식관리' 에 들어갑니다.

3. 오른쪽 상단의 '서식쓰기' 를 눌러줍니다.

(저는 이미 만들어놔서 '목차 생성' 이라는 서식이 있습니다.)

4. 우측 상단의 펼치기 메뉴를 눌러 'HTML' 모드로 변경한 뒤

서식의 제목을 입력하고 아래의 코드를 복사 붙여넣기 합니다.

<p data-ke-size="size16">목차</p>
<p data-ke-size="size16"><a href="#no0">제목1</a></p>
<p data-ke-size="size16"><a href="#no1">제목2</a></p>
<p data-ke-size="size16"><a href="#no2">제목3</a></p>
<p data-ke-size="size16"><a href="#no3">제목4</a></p>
<p data-ke-size="size16">&nbsp;</p>
<p id="no0"; data-ke-size="size20">제목1</p>
<p data-ke-size="size16">본문내용 삽입</p>
<p data-ke-size="size16">&nbsp;</p>
<p data-ke-size="size16">&nbsp;</p>
<p id="no1"; data-ke-size="size20">제목2</p>
<p data-ke-size="size16">본문내용 삽입</p>
<p data-ke-size="size16">&nbsp;</p>
<p data-ke-size="size16">&nbsp;</p>
<p id="no2"; data-ke-size="size20">제목3</p>
<p data-ke-size="size16">본문내용 삽입</p>
<p data-ke-size="size16">&nbsp;</p>
<p data-ke-size="size16">&nbsp;</p>
<p id="no3"; data-ke-size="size20">제목4</p>
<p data-ke-size="size16">본문내용 삽입</p>
<p data-ke-size="size16">&nbsp;</p>
<p data-ke-size="size16">&nbsp;</p>

관찰하시면 쉽게 찾을 수 있는데요, 상기 코드는 일단 최대 4가지 목차 생성만 할 수 있습니다.

목차의 갯수를 더 늘리고 싶다면 아래의 세트 코드의 no 숫자를 늘려가면서 추가하시면 됩니다.

<p data-ke-size="size16"><a href="#no0">제목1</a></p>

<p id="no0"; data-ke-size="size20">제목1</p>

5. 그리고 글쓰기로 넘어가 테스트를 해보겠습니다.

이때 글쓰기에 위에서 저장한 서식을 활용해야 하니 우측 상단의 '...' 을 눌러 '서식'을 클릭합니다.

6. 그리고 주어진 양식에 맞게 글을 작성하시어 테스트해보시면 됩니다.

해당 코드는 목차의 제목을 클릭하면 본문의 제목으로 자동이동되는 기능이 있으니 편하게 사용하시면 됩니다.

7. 주의사항이 있습니다.

해당 서식은 수정을 누르시면 깨질 수 있으니 해당 코드를 다른 곳에 잘 저장하시어

수정시 참고용으로 잘 보관하시기 바랍니다.

이상입니다.

안녕하세요, 수염난아이티 입니다.

오늘은 티스토리 홈 화면에서 우측에 사이드바 추가하는 html 을 알아보겠습니다.

현재 저는 square 스킨을 사용하고 있는 점 참고 바랍니다.

이번 페이지에서는 단순히 우측에 사이드바를 추가하는 html만 소개하고

향후 우측 사이드바에 컨텐츠를 넣는 방법을 알아보겠습니다.

1. 티스토리 접속하여 '관리' 클릭합니다.

2. 하단의 '스킨편집' 클립합니다.

3.  'html' 클릭합니다.

4. 아래의 그림과 같이 우선 <div id="wrap"> 을 찾은 뒤,

박스표시의 부분 넣어줍니다.

여기서 중요한 것은 입력한 코드의 값이 <div id="wrap"> 의 안으로 들어와야 합니다.

빨간 점선을 보시면 이해가 쉬우실 겁니다.

<!-- 으로 시작하는 부분은 주석으로 코드로 해석되는 값은 아닙니다.

    <!--우측 사이드바 시작-->
      <div id="sidebar1">
        <div class="blank"></div>
          <s_sidebar1>

            <s_sidebar1_element>

            </s_sidebar1_element>

          </s_sidebar1>

        <div class="blank"></div>
      </div>
    <!-- 우측 사이드바 끝 -->

5. 위 html 까지 잘 따라오셨다면 css 로 들어가서 아래의 코드를 원하시는 부분에 입력해줍니다.

여기서 /* 로 시작하는 부분은 주석 입니다.

/* sidebar1 우측 사이드바 시작 */

#sidebar1 {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  padding: 0;
  width: 300px;
  height: 100%;
  background-color: #fff;
  border-left: 1px solid #ddd;
  cursor: default;
}

마지막으로 미리보기 한번 하시고 적용 누르시면 티스토리 홈 화면 상

우측에 사이드바가 추가된 것을 확인하실 수 있으실 겁니다.

안녕하세요, 수염난아이티 입니다.

이번 페이지에서는 티스토리 홈 화면에서 전체 메뉴를 아래로 이동하는 방법을 알아보겠습니다.

매우매우 간단하니 차근차근 따라와주시면 쉽게 적용하실 수 있으십니다.

우선 저는 square 스킨을 적용한 상태 입니다.

스킨별로 html 코드가 상이할 수 있으니 동일 스킨이 적용되어 있는지 확인해주시기 바랍니다.

적용 전에는 아래 그림과 같이 적용 전에는 전체 글이 홈 화면에서 상단에 위치해 있습니다.

이제 아래의 순서를 따라오시면서 '전체 글' 을 맨 아래로 이동시켜 보겠습니다.

1. 우선 관리 페이지로 들어갑니다.

2.스크롤을 내려 '스킨편집'을 클릭합니다.

3. 'html' 을 클릭합니다.

4. 'ctrl+f' 키를 눌러 's_list' 를 입력하여 아래 박스 표시의 코드를 찾아낸 뒤,

해당 코드를 'ctrl+x' 를 눌러 잘라냅니다.

5. 그리고 '<s_side' 검색하여 맨 아래의 '<s_sidebar_element>' 를 찾아내어

그 아래 잘라두었던 코드를 'ctrl+v' 로 붙여넣기를 합니다.

6. 여기서 중요한게 하나 있습니다.

위와 같이 붙여넣기를 한 뒤, 전체를 선택하여 해당 코드의 열을 아래 사진과 같이 맞춰줘야 합니다.

열을 맞추는 작업은 한 줄 한 줄 선택하여 스페이스를 해줘도 되고

한꺼번에 움직이려면 tab 키를 사용해도 됩니다.

그렇지 않으면 해당 코드의 위치가 html 상에서 읽히지 않습니다.

그 뒤 우측 상단의 '적용' 버튼 누르기를 잊지 마세요. 

잘 따라오셨다면 '전체 글' 이 홈 화면에서 맨 아래로 이동한 것을 확인하실 수 있으실 겁니다.

안녕하세요, 수염난아이티 입니다.

이번 페이지에서는 티스토리 사이드바에 달력을 추가하는 방법을 알아보겠습니다.

우선 제 티스토리는 'Square (사용자반응형)' 을 사용하고 있습니다.

최종적으로 적용한 제 사이드바의 달력은 아래와 같으며

비슷한 유형의 달력을 추가하고 싶으신 분 께서는 설명을 차근차근 따라오시면

어려움 없이 적용할 수 있을거라고 생각합니다. 저도 HTML / CSS 에 관련한 지식은 단 1도 없습니다^^;;

1. 우선 티스토리에 접속하여 우측의 '관리'로 들어갑니다.

2. 좌측 하단의 '스킨편집' 으로 들어갑니다.

3. 우측 상단의 'html 편집' 으로 들어갑니다.

4. 'ctrl + f' 눌러서 's_sidebar' 를 검색한 뒤, 적당한 위치에 아래의 코드를 입력합니다.

저는 블로그메뉴 밑에 달력 코드를 입력했습니다.

달력 코드를 워하시는 사이드바 위치에 입력하기 위해서는 여러번 시도하면서

미리보기로 보시는 방법을 추천 드립니다.

<s_sidebar_element>
	<!-- 달력 -->
	<div class="module popularPost">
		<div class="calendar">
		<h1 class="sr-only">캘린더</h1>
			

  
«   2025/06   »
  

    

      
일
      
월
      
화
      
수
      
목
      
금
      
토
    
  
  

    

      
1
      
2
      
3
      
4
      
5
      
6
      
7
    
    

      
8
      
9
      
10
      
11
      
12
      
13
      
14
    
    

      
15
      
16
      
17
      
18
      
19
      
20
      
21
    
    

      
22
      
23
      
24
      
25
      
26
      
27
      
28
    
    

      
29
      
30
      
 
      
 
      
 
      
 
      
 
    
  

		</div>
	</div>
</s_sidebar_element>
#출처 : 피카부 티스토리

5. 이제 html을 입력했으니 아래와 같이 css 로 들어가서 꾸미는 작업을 해봅니다.

저는 css 맨 상단에 아래와 같은 코드를 입력했습니다.

/* calendar */
.calendar {}
.calendar .tt-calendar {}
.calendar .tt-calendar caption {font-size:1em}
.calendar .tt-calendar caption a:first-child, .calendar .tt-calendar caption a:last-child {color:#999; font-size:0.375em}
.calendar .tt-calendar caption a {vertical-align:middle}
.calendar .tt-calendar th, .calendar .tt-calendar td {padding:5px 0; text-align:center}
.calendar .tt-calendar th {font-size:0.875em; font-weight:normal}
.calendar .tt-calendar td {font-size:0.75em; color:#0f6789}
.calendar .tt-calendar .cal_current_week {}
.calendar .tt-calendar .cal_week2, .calendar .tt-calendar .cal_day_sunday {color:red}
.calendar .tt-calendar td a {display:inline-block; padding:2px 8px; background:skyblue; color:#fff; border-radius:30px;}
.calendar .tt-calendar .cal_day4 {background:#496d83; color:#fff}
.calendar .tt-calendar .cal_day4 a {background:#f2f5a9}

상기 css 코드는 동일하게 피카부 티스토리 글을 참고 했으며 색상은 제 취향에 맞게 수정했습니다.

완료하셨다면 꼭 적용을 눌러주셔야 합니다.

안녕하세요, 수염난 아이티 입니다.

티스토리를 꾸미다보면 글씨체를 변경하고 싶을 수 있는데,

이번 페이지에서는 티스토리의 글씨체 변경하는 방법을 알아보겠습니다.

우선 글씨체를 변경하기 위해서 원하는 글씨체를 찾아야 하는데요,

저는 아래의 사이트에서 무료글씨체를 찾아서 적용했습니다.

무표글씨체 사이트 : 눈누

https://noonnu.cc/font_page/pick

저는 '스포카 한 산스 네오' 라는 글씨체를 제 티스토리에 적용했습니다.

★주의사항★

글씨체마다 무료/유료의 차이인지 모르겠으나, 글씨체 별 제공 코드가 다릅니다.

원하시는 글씨체를 찾으시되 제 CSS 에 적용한 코드와 동일한 코드가 제공되는지 우선 확인을 해주세요.

[코드보러가기]

이제 제가 적용한 사례를 아래와 같이 설명 드리겠습니다.

순서가 조금 많아보일 수 있으나 생각보다 간단하여 차근차근 따라오시면

충분히 적용 가능하실거라고 생각합니다.

1. 눈누 사이트에 접속해서 우측 상단 검색바에서 원하시는 글씨체를 검색합니다.

2. 검색해두고 다시 티스토리로 접속하여 우측의 '관리' 버튼을 클릭합니다.

3. 좌측메뉴 하단으로 이동하여 '스킨편집'을 클릭합니다.

4. 우측의 'html 편집' 을 클릭합니다.

5. 눈누 사이트로 돌아가 코드 복사 버튼을 클릭합니다.

6. 다시 티스토리 창으로 돌아와서 상단의 'CSS'를 클릭합니다.

그리고 아래의 코드를 입력합니다. 저는 CSS 코드 거의 상단에 해당 코드를 아래 파란박스처럼 입력했습니다.

해당 코드는 물론 눈누 사이트에서 복사한 코드 입니다.

아래 코드의 /*web font load*/ 내용은 눈누 사이트에서 복사한 코드는 아니고

제가 주석으로 별도로 입력한 코드입니다. 나중에 어떤 내용인지 구분하기 위함입니다.

7. 이제 거의 다 왔습니다.

적용한 코드를 잘 보면 아시겠지만, 'SpoqHanSansNeo-Regular' 라고 새로운 폰트의 개체명이 적용되어 있습니다.

이제 이 것을 CSS 모든 font-family 코드에 복사 붙여넣기를 했습니다.

저는 총 16개 검색되어서 수정 했습니다.

8. 다 적용했다면 '적용'을 클릭합니다.