본문 바로가기

SKIN & CSS74

티스토리 스킨_태그 구름 꾸미기 티스토리는 블로그 스킨을 쉽게 만들고 관리할 수 있도록 치환자를 제공하고 있다. 글을 쓰면서 꼬리표를 잘 달지는 않지만 다른 사람 블로그를 찾았을 때 태그를 살펴보는 습관이 있다. 잘 정리된 블로그는 태그만 보고 주된 관심사를 쉽게 파악할 수 있다. 또 카테고리를 보여주지 않는 스킨을 쓸 때는 태그를 잘 달아서 글갈래를 잘 나누어 주면 좋다. 직접 만든 스킨을 쓰다가 왓에버 스킨으로 바꾸고 몇 가지 손을 보고 있다. 오늘은 태그 클라우드를 고쳐 본다. 참고로 이 블로그에서 '태그'는 '꼬리표'로 바꿔 부르고 있다. 꼬리표 구름으로 해석하면 되겠다. 일반적인 설명은 아래 글을 읽으면 알 수 있다. 태그 클라우드 · GitBook 태그 클라우드 치환자 태그 클라우드는 사용한 태그 리스트를 출력합니다. 태그 .. 2022. 1. 13.
티스토리 Whatever 스킨 바꾸기 기분을 바꾸고 싶을 때 블로그 스킨을 바꿔 보자. 티스토리는 스킨을 마음대로 편집해서 개성 있는 블로그를 만들 수 있어서 좋다. 기본으로 제공하는 스킨을 그대로 써도 좋지만 글꼴만이라도 바꿔서 다른 분위기를 연출해 보면 좋다. 지난번에는 포트폴리오 스킨을 살펴보았는데 오늘은 왓에버(Whatever) 스킨을 살펴보려고 한다. Whatever를 우리말로 옮기면 '무엇이든'이다. 티스토리-스킨마다 독특한 커버를 제공한다. 이 스킨은 아래와 같은 커버 가 눈에 딱 들어와서 써 보려고 한다. whatever 스킨에 카테고리 넣기 스킨을 바꾸면 손 봐야 할 곳이 몇 군데 있다. 수식을 보여줄 수 있도록 스크립트도 불러오고 몇몇 글꼴도 바꾼다. 처음에 몰랐는데 왓에버 스킨은 카테고리를 보여주지 않는다. 그래서 고쳤다.. 2022. 1. 7.
티스토리 대표 블로그 지정하기 티스토리는 블로그를 5개까지 운영할 수 있다. 현재 3개를 운영하고 있는데 어제 갑자기 대표 블로그를 바꾸고 싶어 졌다. 이제까지는 가장 먼저 만든 수학 이야기를 주로 쓰는 블로그를 대표 블로그로 지정해 두었는데 내 블로그를 구독하는 사람들이 수학 이야기는 크게 관심이 없을 듯하다. 실제로 수학 이야기는 대부분 구글 검색을 통해 들어오는 경우가 대부분이다. 두 번째로 만든 이 블로그는 취미생활을 주제로 삼았다가 요즘은 세상사에 대한 잡담도 올리고 있다. 대선 국면이다 보니 정치에도 관심이 많아서 할 말이 생긴다. 나처럼 대표 블로그를 바꾸고 싶은 사람들을 위해 방법을 정리해 둔다. 1. 블로그 관리 화면 상단에 있는 대표 사진을 클릭한다. 2. 계정관리를 클릭한다. 3. 대표 블로그로 쓸 블로그를 지정한.. 2021. 12. 21.
포트폴리오 스킨 톺아보기 티스토리에서 제공하는 블로그 스킨은 아주 좋아서 잘 고르기만 하면 된다. 그동안 직접 만든 스킨을 쓰다가 식상해져서 스킨을 바꿔 보았다.( '스킨skin'을 '살결'로 옮기고 싶지만 이 글에서는 참는다.) 고민 끝에 '포트폴리오'를 골랐다. 기본 스킨이 아주 좋지만 남들과 조금 다르게 고쳐서 쓰고 싶은 사람도 있을 것이다. 예를 들면 배경색이나 글꼴을 바꾸면 분위기가 확 달라진다. 블로그 살결을 고쳐서 개성을 드러내고 싶은 분을 위해 '포트폴리오'을 톺아보려고 한다. 먼저 구조를 살펴보자. 사이드바는 숨겨져 있다가 나타난다. 스킨을 손보려면 해당 영역(Div)의 클래스 이름을 알아야 한다. 파일 index.html을 열어서 클래스 이름을 확인하고 style.css 파일을 고치면 된다. 예를 들어 블로그 .. 2021. 12. 19.
미디어 쿼리 적용할 때 화면 크기 이젠 모바일이 대세라 모바일에 최적화된 웹 페이지가 많다. 이제 블로그 스킨은 반드시 반응형으로 만들어야만 한다. 반응형을 위해서 필요한 미디어 쿼리를 적용할 때 디바이스에 따라 정해주어야 하는 화면의 너비를 잘 정리해 둔 페이지를 소개한다. 아이패드도 기종에 따라 화면의 너비가 조금씩 다르다. https://css-tricks.com/snippets/css/media-queries-for-standard-devices/ Media Queries for Standard Devices This page lists a ton of different devices and media queries that would specifically target that device. That’s probably not .. 2021. 12. 19.
눈누 한글 웹폰트 로마자에 비해 한글은 글꼴을 만들기가 어렵다. 그래도 요즘 한글도 무료 글꼴이 많다. 구글에서 제공하는 폰트도 있지만 '눈누'에서 제공하는 글꼴도 쓸만한 것이 많다. 블로그를 보는 사람이 모두 같은 글꼴로 보이게 하려면 웹폰트를 써야 한다. '눈누'에서 제공하는 웹폰트를 쓰는 방법은 아주 간단하다. 마음에 드는 글꼴을 찾는다. 상주곶감체를 골라 보았다. css 파일을 열어서 맨 위에 복사한 코드를 붙여넣는다. @font-face { font-family: 'SANJUGotgam'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2112@1.0/SANJUGotgam.woff') format('woff'); font-weight: normal;.. 2021. 12. 16.
다단으로 만들기 다단 레이아웃, 이거 무척이나 쓰고 싶은 기능이었는데 이제 되는 모양이다. 자왈 이약실지자 선의 공자께서 말씀하셨다. "약(約)으로써 잃는 자는 드물다." 약은 적극적이고 긍정적인, 더 의도적인 검약을 말하므로 무위, 무욕과 통한다. 노자의 사상과 크게 떨어져 있지 않다. 대저 일을 약하게 하면 실수가 적은 것이니, 단지 검약이라는 수준에서 한 말은 아니다. -윤언명 子曰 君子欲訥於言 而敏於行 자왈 군자욕눌어언 이민어행 공자께서 말씀하셨다. "군자는 말은 어눌하게 하고 행동은 민첩하게 하려고 노력한다." 고려 중기 대국사 보조지눌(普照知訥)의 이름도 이 장에서 유래하였다. 학이편 3장에서도 교언영색을 경계하고 있다. 공자님은 말보다는 행동을 중하게 여기셨다. 행동이 따르지 않는 말은 공허하다. 요즘 정치.. 2021. 5. 17.
시에스에스CSS: before & after 요즘 나오는 티스토리 블로그 스킨은 대부분 관련 글 보이기 목록을 사진과 함께 보여주고 있다. 글에 대표 이미지가 있다면 문제없지만 글에 이미지가 없는 글은 애써 디자인한 틀이 깨질 수도 있다. 이를 방지하기 위해 정해진 이미지를 미리 불러들이게 만든다. 대표 이미지가 있으면 위에 덮여 보이고 없으면 정해진 이미지가 보이게 하는 것이다. 이때 쓰는 시에스에스 구문은 :before이다. ::before는 선택한 요소의 첫 자식으로 가상 요소(pseudo-element)를 하나 만든다. 보통 컨텐트 content 속성과 함께 짝지어, 요소에 장식용 콘텐츠를 추가할 때 사용한다. 기본값은 인라인이다. 이 블로그 스킨은 아래와 같은 구문이 있다. .cover-list ul li figure:before { ba.. 2021. 1. 3.
시에스에스 속성: 표시(display) 시에스에스 문법에서 표시 속성은 은근히 어렵다. 시에스에스에서 표시 속성(display property)은 요소를 블록이나 인라인 요소로 처리할 것인가와 자식 요소에 적용되는 배열의 흐름(flow layout), 격자(grid) 또는 변동(flex)을 정해준다. 요소에 따라 기본이 되는 배열의 흐름이 정해져 있다. 배열의 흐름은 인라인과 블록으로 나눌 수 있는데 인라인은 왼쪽에서 오른쪽으로, 블록은 위에서 아래로 배열된다. 스팬(span)은 인라인이 기본이고 디아이브이(div)는 블록이 기본이다. 스팬을 블록으로 또는 디아이브이를 스팬처럼 인라인으로 흐르게 하려면 시에스에스로 보임 속성을 따로 정해 주어야 한다. 요소 안에 요소가 있을 때 표시 속성은 안쪽과 바깥쪽 유형을 정할 수 있다. 외부 유형으로 .. 2020. 12. 29.
간단-수학 스킨 여러 가지 기본 스킨을 버무려 만들어서 딱히 출발점을 밝히기 어렵다. 그냥 간단한 스킨이다. 1. 사이드바와 헤더를 하나로 모으고 옆에 고정해 두었다. 2. 사이드바 내용을 모두 없애고 카테고리만 남겼다.(카테고리가 너무 많은 블로그는 적당하지 않다.) 3. 커버는 리스트형과 갤러리형 하나씩 남겼다. 4. 아래 파일을 내려받아서 올리면 된다. 2020. 12. 29.
여백과 폭 시에스에스에서 영역(div) po를 만들었다. 영역의 여백과 폭은 어떻게 정해지는가 알아야 한다. 여백은 안쪽 여백 padding과 바깥 여백 margin이 있다. 폭에는 여백이 들어가지 않음을 명심해야 영역 안에 영역을 넣을 때 폭을 정할 수 있다. 바깥 영역의 폭은 margin-right+margin-left+width+padding-right+padding-left+border-right+border-left 보다 더 커야 한다. 따라서 아래와 같은 po를 둘러싸는 영역의 폭은 최소 540px는 되어야 한다. See the Pen padding&margin by 박영호 (@lyrsqwja) on CodePen. 2020. 12. 28.
색 이야기 블로그 스킨을 바꾸거나 누리집에서 글자 색이라도 바꾸고 싶어 질 때가 많다. 요즘은 시에스에스(CSS:Cascading Style Sheet)가 대세다. 시에스에스로 색을 불러들이는 여러 가지 방법을 하나씩 알아보자. 영어 잘하는 사람은 여기를 보면 되지만 귀찮은 사람들을 위해 몇가지 뽑아내 옮겨 적어 본다. 컴퓨터에서 보이는 색들은 물감을 섞는 것이 아니라 빛을 섞는 것이라고 생각하면 조금 더 쉽다. 잘 모르면 포토샵과 같은 프로그램을 쓰면 쉽게 알 수 있지만 조금만 연습하면 그냥 느낌으로 알 수도 있을 것이다. 1. 색 이름 HTML4에 있는 색이름 : aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, si.. 2020. 12. 27.
반응형

티스토리툴바