본문 바로가기

# Tistory/- Skin3

[Tistory] 티스토리 스킨 편집의 기초 - HTML, CSS, JavaScript [개요] 티스토리 블로그는 개인 및 기업의 다양한 콘텐츠를 공유하는 데 매우 유용한 플랫폼이다. 블로그의 시각적인 요소는 방문자들에게 강력한 인상을 남기며, 스킨 편집은 그 중에서도 중요한 역할을 한다. [기본 개념 이해하기] HTML HTML은 웹 페이지의 구조를 정의하는 마크업 언어이며, 웹페이지 내 요소들의 배치와 구조를 결정하고 웹브라우저가 이해하고 해석하게 사용자에게 시각적으로 표현된다. 티스토리 스킨에서는 HTML을 사용하여 블로그의 요소들을 배치하고 조직화한다. 즉, 블로그를 구성하는 곳이라 생각하면 된다. // HTML 기본 구조 // 헤더 제목 여기서 , , , 등은 시맨틱 태그로, 각각 웹페이지의 헤더, 네비게이션, 주요 콘텐츠 영역, 푸터를 나타낸다. CSS CSS는 Cascading.. 2023. 8. 26.
[Tistory] 콘텐츠 제목 Setting - 글 제목(Article Title) 상단 고정 및 기타 기능 [Title 상단 고정 - 본문 영역] 스크롤을 조작해도 Header를 상단에 고정시키는 방법을 알아보자. 위 Header에는 웹사이트명, 글 제목, 메뉴 등의 다양한 정보를 담을 수 있다. 해당 기능은 글을 발행하면 글 제목이 본문 상단에 자동으로 생성되며, 스크롤을 내리더라도 글 제목이 화면 상단에 고정된다. 1. HTML 코드 수정 // 글 제목 치환자 코드 삽입 // 티스토리 글제목(article title) 상단 고정 ] 위 사진처럼 와 사이에 위 코드를 삽입해준다. 2. CSS 코드 수정 .article_title { position: sticky; /* 고정 여부 */ top: 0px; /* 상단 고정의 위치 */ margin: 0px 0px 30px 0px; /* 글과의 간격 */ padd.. 2023. 8. 25.
[Tistory] 콘텐츠 제목 Setting - 부분 노출(제목 잘림), 제목 두께 [부분 노출(제목 잘림) 수정] 1. CSS에서 코드 수정 .post-item .title ① "ctrl + f" 를 눌러서 위 코드를 찾는다. ② white-space : nowrap; ▶ white-space : normal; 위와 같이 수정 ③ 적용 클릭 2. 적용 결과 [제목 두께 수정] 1. CSS에서 코드 수정 // 코드 위치 .list-type-thumbnail .post-item .title // 추가해야할 코드 font-weight: 500; ① "ctrl + f" 를 눌러서 위 코드를 찾는다. ② font-weight: 500; font-size : 1.25em; 코드 아래에 위 코드 추가 ③ 적용 클릭 2. 적용 완료 2023. 8. 24.

티스토리툴바