개발/CSS9

티스토리 코드블럭 테마 적용방법부터 종류별 비교까지 블로그 포스팅 내용이 게임 뿐만 아니라 개발 관련 내용도 있다 보니 소스코드를 올릴 일이 종종 있는데, 글 등록을 마친 후 내용을 보니.. 분명히 글쓰기 화면에선 이렇게 보였던 것이.. 글을 등록하고 나니 이렇게 보였다 충격받고 코드블럭 테마 적용하는 방법을 알아보았다. 블로그관리 > 플러그인에 들어가면 하단에 코드 문법 강조 플러그인이 있다. 이것을 클릭해 준다 적용을 누르면 코드블럭 테마가 적용된다. 테마는 기본 포함 총 8가지가 있는데, 미리보기가 없어서 내가 비교해 보았다 테스트는 파이썬 코드로 했다. 기본 Atom One Dark Atom One Light Github Monokai Darcula Visual Studio Xcode 개인적으로는 까만 바탕을 좋아해서 그런지 Atom One Dar.. 개발/CSS 2022. 11. 6.

완전 쉬운 티스토리 공감클릭 이미지 자동설정 방법 블로그 게시글을 보면 하단에 공감버튼이 있습니다. 포스팅을 읽는 사람마다 공감버튼을 눌러주면 좋겠지만 사실 잘 누르지 않죠 ㅠ_ㅠ 그래서 한분이라도 더 공감버튼을 누르게 하기 위해 공감클릭 유도 이미지를 게시글마다 자동으로 삽입되는 방법을 공유합니다 추가로 공감유도 이미지도 공유합니다! 이미지는 글 밑에 있습니다 공감 클릭 유도 이미지 자동삽입 설정하기 블로그관리 > 꾸미기 > 스킨 편집으로 들어갑니다 우측에 html 편집 버튼을 누릅니다 html 부분에서 Ctrl+F키를 누른 다음 article_rep_desc 를 검색합니다. article_rep_desc는 본문 내용이 나오는 부분입니다. 공감유도 문장 이미지로 넣을 경우는 위의 3줄, 글자로 넣을 경우는 아래 3줄을 복사해서 ##_article_re.. 개발/CSS 2022. 11. 4.

티스토리 표 상단 배경색 자동설정 하는 방법 블로그에 글을 쓰다 보면 표를 사용하는 경우가 많은데요, 매번 표 상단 스타일을 설정하는게 너무 귀찮더라고요. 그래서 한번 설정해서 계속 사용할 수 있는 방법을 공유합니다. 블로그관리 > 꾸미기 > 스킨 편집을 누르면 "html 편집" 이라는 버튼이 있습니다. 이걸 눌러주세요. 그럼 오른쪽에 HTML, CSS, 파일업로드 탭이 보입니다. CSS 탭을 눌러주세요. 그럼 CSS 편집화면이 아래에 나타납니다. th { text-align: center; background-color: 원하는배경색; padding: 10px; } CSS 편집화면에 원하는 배경색 부분만 변경하신 후 위의 코드를 넣어주세요. 배경색 / 글자 가운데 정렬 / padding이 추가됩니다. 이런 식으로 넣어주면 됩니다. 넣어주신 후 적.. 개발/CSS 2022. 10. 28.

CSS position 속성 - CSS 위치 지정 CSS의 position 속성으로 문서 상의 요소 배치방법을 지정할 수 있다. 값에 따라 배치 방법이 다른데, 값마다의 방법을 소개한다. static 기본값이다. top, left, right, bottom, z-index 속성이 적용되지 않는다. relative 자기 자신의 위치를 기준으로 top, left, right, bottom 값에 따라 위치가 지정된다. 오프셋은 다른 요소에 영향을 주지 않으며, 페이지 레이아웃에서 요소가 차지하는 공간은 static과 같다. 자신이 있던 위치 기준(빨간 선)으로 50px씩 이동하였다. position: relative; left: 50px; top: 50px; absolute 가장 가까운 부모 요소의 위치를 기준으로 top, left, right, bottom.. 개발/CSS 2021. 1. 4.

요소의 배치 순서 지정 - z-index 앞에 나와야 할 요소가 가려지는 등 난처할 때들이 있었다. z-index 속성을 사용하면 요소의 배치 순서를 정할 수 있어서 가려지는 현상을 해결할 수 있다. position이 static이 아닌 경우에만 적용이 가능하다. 5개의 겹쳐 있는 div이다. 이제 이 요소에 순서를 지정하여 배치 순서를 변경할 수 있다. 요소별 css에 z-index:값을 입력하면 값에 따라 순서가 바뀐다. z-index값이 클수록 앞으로 나오며, 보통 9999는 항상 상단에 위치해야 할 때, -1은 항상 뒤에 나와야 할 때 스인다. 역순 출력을 위하여 1번~5번 div에 각각 5~1의 z-index값을 부여했다. // HTML 1번 DIV 2번 DIV 3번 DIV 4번 DIV 5번 DIV // CSS div{ width: 1.. 개발/CSS 2021. 1. 4.

Google Fonts - 구글 무료 폰트 사이트 Google Fonts에서는 약 1,000가지의 무료 폰트를 제공한다. 한글 폰트가 글 쓴 시간 기준 26개밖에 없는 점이 아쉽지만, 영어 폰트가 대부분이므로 웹페이지 제작 및 이미지 작업 시 유용하게 사용할 수 있다. fonts.google.com/ 사이트에 접속하면, 폰트들이 나온다. 글자를 입력하면 입력한 글자대로 미리보기가 된다. 원하는 폰트를 하나 골라보자. 선택 후 + Select this style 버튼을 눌러 준다. 친절한 사용 안내법이 나온다. link의 주소를 사이에 넣은 후, css 안에 font-family 부분을 추가해 주면 사용 준비 끝. import 방식으로 css 안에 넣을 수도 있다. Google Fonts를 적용한 예제이다. 예쁜 폰트 찾아서 유용하게 사용하시길 :) Se.. 개발/CSS 2021. 1. 3.

hr 태그 - 수평선 / 문단 나누는 선 넣기 hr 태그는 문단을 나눌 때 사용하는 수평선 태그입니다. 사용 방법은 간단하며 다양한 속성으로 스타일을 줄 수 있습니다. 태그를 넣으면 기본 수평선이 추가됩니다. 아래와 같은 3가지 방법으로 스타일 추가가 가능합니다. // 사용법 1 // 사용법 2 css 추가 .클래스명{ 스타일 } // 사용법 3 css 설정 hr{ 스타일 } 스타일 속성 width 가로 값. width: 가로크기 로 사용 height 세로 값. height: 세로크기 로 사용 border 선 속성. border: 선종류 선크기 선색깔 로 사용 text-align 정렬 설정. ie만 지원하며 text-align: 정렬위치 로 사용 margin-left 왼쪽 정렬. 크롬/파이어폭스용 margin-right 오른쪽 정렬. 크롬/파이어폭스.. 개발/CSS 2021. 1. 3.

ul, li 블릿,기호,점 스타일 변경 및 없애기 ul, li 스타일은 8가지가 있다. 또한 블릿이 필요없을 경우에는 블릿을 없앨 수 있다. 기본 스타일이라 별도의 스타일 지정 필요 없음 테두리만 있는 원형 ul{ list-style-type : circle; } 네모 모양 ul{ list-style-type : square; } 숫자 형식(1. 2. 3. ~) ul{ list-style-type : decimal; } 소문자 형식(a. b. c. ~) ul{ list-style-type : lower-alpha; } 대문자 형식(A. B. C. ~) ul{ list-style-type : upper-alpha; } 소문자 로마자 형식(i. ii. iii. ~) ul{ list-style-type : lower-roman; } 대문자 로마자 형식(I. .. 개발/CSS 2021. 1. 3.

Font Awesome 사용하기 - css 아이콘 사용 Font Awesome은 다양한 아이콘을 간편하게 사용할 수 있는 라이브러리입니다. 약 1,600개의 무료 아이콘을 제공합니다.(유료는 약 8.000개) 사용법을 소개해 드립니다. 아래의 CSS 링크를 복사하여 사이에 삽입합니다. Font Awesome 사이트에 접속하여, 사용하고 싶은 아이콘을 검색합니다. fontawesome.com/icons 흐리게 표시되는 것은, 유료 전용 아이콘입니다. 사용할 아이콘을 선택합니다. 라고 쓰여 있는 1번을 누르면 소스코드 복사, 다운로드 아이콘이 그려진 2번을 누르면 SVG 파일로 다운받을 수 있습니다. 소스코드를 복사하여 원하는 곳에 붙여넣으면, 아이콘을 사용할 수 있습니다. Font Awesome Docs를 참고하면 다양한 사용법을 확인할 수 있습니다. 예제 몇.. 개발/CSS 2021. 1. 3.

이전 1 다음

💲 추천 글

티스토리툴바