본문 바로가기

CSS2

[Tistory] Code block Custom - 코드 블럭 언어명 표시, 접기 버튼 [편집 전 필독] 티스토리 스킨 편집의 기초 상식 [Tistory] 티스토리 스킨 편집의 기초 - HTML, CSS, JavaScript [개요] 티스토리 블로그는 개인 및 기업의 다양한 콘텐츠를 공유하는 데 매우 유용한 플랫폼이다. 블로그의 시각적인 요소는 방문자들에게 강력한 인상을 남기며, 스킨 편집은 그 중에서도 중요 rangvest.tistory.com [언어명 표시 및 접기 버튼 추가] 1. HTML 코드 수정 위 코드를 위에 삽입 2. CSS 코드 삽입 /*Code Block Hader(언어명) 적용 시작*/ /* 코드블럭 언어 표시 스타일 */ /* 코드 블럭 레이블 컨테이너 */ .codeLabel { position: relative; /* 요소를 상대적인 위치로 설정하여 배치합니다. *.. 2023. 8. 26.
[Tistory] 티스토리 스킨 편집의 기초 - HTML, CSS, JavaScript [개요] 티스토리 블로그는 개인 및 기업의 다양한 콘텐츠를 공유하는 데 매우 유용한 플랫폼이다. 블로그의 시각적인 요소는 방문자들에게 강력한 인상을 남기며, 스킨 편집은 그 중에서도 중요한 역할을 한다. [기본 개념 이해하기] HTML HTML은 웹 페이지의 구조를 정의하는 마크업 언어이며, 웹페이지 내 요소들의 배치와 구조를 결정하고 웹브라우저가 이해하고 해석하게 사용자에게 시각적으로 표현된다. 티스토리 스킨에서는 HTML을 사용하여 블로그의 요소들을 배치하고 조직화한다. 즉, 블로그를 구성하는 곳이라 생각하면 된다. // HTML 기본 구조 // 헤더 제목 여기서 , , , 등은 시맨틱 태그로, 각각 웹페이지의 헤더, 네비게이션, 주요 콘텐츠 영역, 푸터를 나타낸다. CSS CSS는 Cascading.. 2023. 8. 26.