본문 바로가기

SKIN & CSS74

아래로 펼쳐지는 메뉴 시에스에스로 만든 아래로 펼쳐지는 메뉴를 옮겨왔다. 앞으로 스킨을 만들 때 카테고리를 이걸로 만들면 좋겠다. See the Pen dropdown_menu by 이야기꾼 (@iyagikkun) on CodePen. 2020. 12. 23.
가상 클래스(pseudo-Classes) 가상 클래스(pseudo-Classes)는 이름 그대로 클래스 아래에 다시 가상(pseudo-) 클래스를 만드는 방법이다. 의사 클래스로 옮기는 글이 많은데 아무래도 의사는 바로 뜻이 생각나지 않는다. 차라리 유사나 가짜 또는 닮음으로 옮기는 것이 좋겠다. 여기서는 가상으로 적기로 한다. 시에스에스3에서는 가상 클래스로 다양한 디자인을 만들 수 있다. 여러 가지 가상 클래스가 있지만 여기서는 목록을 꾸밀 때 좋은 nth-child를 정리해 둔다. 순서가 없는 목록(unodered list)인 클래스 안에 li가 있다. 여기서 ul이 부모이고 li는 자식이다. 자식은 차례로 번호가 매겨져 있다. 자식마다 각각 다른 디자인을 해주고 싶을 때 가상 클래스가 필요하다. 먼저 구분선을 넣어 보자. .list li.. 2020. 12. 16.
티스토리 스킨 썸네일 추출 하기 티스토리 스킨을 만들 때 이미지를 어떻게 처리하면 좋을까 고민이다. 이미지를 불러오는 html 태그는 이다. 먼저 이미지를 그대로 불러오는 경우를 보자. 1. 100%로 불러왔을 때: 2. 황금비(1.618:1)에 가깝게 불러왔을 때: 3. A4용지에 같은 비율 $\sqrt2:1$에 가깝게 불러왔을 때: 흔히 황금비가 가장 보기 좋은 비율이라고 하지만 요즘 A4 종이를 하도 많이 봐서 그런가 $\sqrt2$도 나름 보기 편하다.(황금비로 웹디자인) 다음으로 썸네일을 따로 뽑아내 쓸 수 있다. 아무래도 원본 이미지 파일이 크다면 불러오는 시간이 더 걸리므로 작게 만들어 불러 들여야 좋다. 티스토리는 내용전달-네트워크(CDN: Content Delivery Network)을 제공하고 있다. 1. 이미지에서 .. 2020. 12. 15.
미디어 쿼리와 반응형 스킨 요즘은 블로그에 접속하는 기기가 워낙 다양하다 보니 어느 하나에 맞춘 디자인은 어떤 기기에선 제대로 보이지 않게 된다. 피씨에선 아름답지만 모바일 기기에선 보기 흉해 지기도 한다. 그래서 요즘 나오는 스킨 대부분은 반응형이다. 오래 사용해서 익숙한 스킨을 바꾸기 싫다면 스타일을 손 봐서 반응형 스킨을 만들어야 한다. 이때 반드시 미디어 쿼리(media query)를 써야 한다. 나중을 위해 내가 지금 알고 있는 부분을 간단하게 갈무리해 둔다. 쿼리(query)는 물음으로 데이터베이스에 뭔가를 요청하는 것이다. 아주 자세한 설명은 아래 링크를 참고하자. developer.mozilla.org/ko/docs/Web/Guide/CSS/Media_queries 미디어 쿼리 사용하기 미디어 쿼리는 단말기의 유형(.. 2020. 12. 14.
티스토리 인용 서식 만들기 티스토리엔 알면 쓸모 있는 기능이 여럿이다. 그 가운데 서식이 있다. 자주 쓰는 서식을 미리 만들어 두고 글을 쓸 때 불러다 쓰는 기능이다. 관리자 화면/콘텐츠/서식관리에서 관리할 수 있다. 서식을 불러올 떄는 글쓰기 화면에서 서식을 고르면 된다. 인용은 로 쉽게 넣을 수 있지만 하나 더 만들어 두기로 했다. 영역(div)을 quote란 이름으로 하나 더 만들고 서식은 아래와 같이 만든다. 인용문 quote에 대한 시에스에스는 아래와 같다. .quote{ background-image: url(images/quotation.png); background-repeat: no-repeat; background-position: center top; text-align: center; width: 60%; m.. 2020. 12. 13.
티스토리 블로그에 자동 광고 넣기 며칠 째 티스토리 스킨을 만지작 거리고 있다. 이 일은 은근히 중독성이 있다. 스킨을 손보다 보면 그만큼 공부가 되기 때문에 여러 가지 몰랐던 사실을 알게 되는 장점이 있다. 오늘은 광고에 대해 몇 자 적는다. 오늘에서야 관리자 화면에서 자동 광고를 넣을 수 있음을 알았다. 에드핏과 애드센스를 연동하였다면 관리/수익에서 설정할 수 있다. 예전에 잠깐 애드센스 자동 광고를 넣어 보니 글 여기저기에 광고가 마구 나타나 눈에 거슬렸다. 그래서 광고가 들어갈 영역을 아예 스킨 파일에 만들어 두고 직접 넣었는데 에드핏과 애드센스가 폭이 다르고 스킨 작업을 할 때마다 스타일을 다시 지정해야 하는 번거로움이 있다. 그런데 이 기능을 쓰니 정해준 자리에만 딱 들어가서 보기 좋다. 한 가지 문제는 모든 스킨이 목록과 본.. 2020. 12. 11.
카테고리 치환자가 만드는 구조 스킨 파일(skin.html)에는 이렇게 적었다. 티스토리 치환자는 스킨이 스스로 어떤 구조를 만들도록 하는 파일을 모아 놓은 명령 뭉치다. 카테고리 치환자 는 일련의 작업을 벌여서 새로운 문서를 만든다. 모니터에 구현된 에이치티엠엘 문서는 아래와 같은 태그를 가지고 있다. 글갈래 (1149) 수학 이야기 미적분 기하, 벡터 확률, 통계 사는 이야기 여행, 음식 레고 들꽃 스킨에 따라 조금 다를 수 있으므로 브라우저에서 소스 보기를 눌러서 확인해 보자. 따로 이름을 정해주지 않았지만 치환자가 클래스 이름이 tt_category인 ul 안에 이름이 category_list인 ul과 또 그 안에 이름이 sub_category_list인 ul을 만든다. 색을 다르게 해서 구분했으니 확인해 보자. 구조를 알았으.. 2020. 12. 10.
돌고 돌아서 흑백으로 티스토리 블로그 스킨을 만들어 쓰다 보면 자꾸만 뭔가 마음에 들지 않는 구석이 하나둘 나타난다. 한 동안 글갈래를 따로 감추어 둔 1단 스킨을 쓰다가 사이드바에 글갈래가 드러나는 2단 스킨으로 만들었다. 스킨을 만들 때 틀을 짜는 일은 어쩌면 쉽다. 틀을 완성한 다음 색을 고르는 일이 어렵다. 며칠 사이에 아래와 같이 색을 바꾸었다. 돌고 돌아서 결국은 흑백이 되었다. 색을 고르는 안목이 없을 때는 그냥 흑백이 최고인 듯하다. 디자인 내공이 없는 나는 아직까지 구글스러운 것을 추구한다. 언젠가 화려한 스킨에도 도전해 보고 싶다. 여백(margin)을 음수로 정해서 상단(header)에 본문(article)이 걸쳐 있도록 만는 것이 포인트다. 혹시라도 써 볼 생각이 있다면 아래 링크를 참고하시라. suha.. 2020. 12. 9.
스킨에서 사이드바 반응형으로 블로그 스킨을 만들 때 사이드바가 문제다. 요즘 스킨은 대부분 1단으로 만든다, 하지만 이 블로그처럼 글갈래가 많은 블로그는 아무래도 사이드바가 있으면 좋다. 이제까지 감추어 두고 메뉴를 누르면 나타나는 방식으로 처리했는데 어제부터 사이드바가 있는 스킨을 새로 만들어 보았다. 요즘 모바일로 접속하는 사람이 많은 터라 반응형으로 만들 때 사이드바를 어떻게 처리할까가 고민이다. 완벽하지는 않지만 해결책을 찾았다. 큰 화면에선 옆에 보이도록 했다가 모바일처럼 작은 화면에선 아래 쪽으로 가져가는 것이다. 이때 행을 둘로 만들면 좋다. 새로운 시에스에스에선 아주 쉽게 행을 둘로 만들 수 있다. 이렇게 만들면 광고를 넣기도 아주 편해진다. 아직까지 모든 브라우저가 지원하지는 않는 것으로 보이지만 그래도 오래 기다려.. 2020. 12. 7.
스킨에 쓰인 색을 다른 색으로 바꾸기 suhak.tistory.com/1234 빛깔과 컴퓨터 그리고 수학 요즘 고등학교 1학년인 아들과 순열과 조합을 공부하고 있다. 한동안 고 3만 가르치다가 오랜만에 1학년 수업을 하는 셈이다. 문제를 만들기에 따라서 순열과 조합 문제도 상당히 어려울 수 있다 suhak.tistory.com 다른 블로그에 적은 윗글에 이어지는 글이다. 블로그 스킨을 디자인할 때 빛깔을 입히는 일은 매우 중요한 일이다. 글자 빛깔이나 단추 빛깔만 바꿔도 블로그 전체 분위기가 확 달라진다. 먼저 컴퓨터 프로그램에서 빛깔은 앞에 해시 #가 붙은 3 또는 6개 숫자로 구별한다. 따라서 에이치티엠엘이나 시에스에스 문서도 마찬가지다. 능력이 부족해서 블로그 스킨을 혼자서 모든 걸 다 만드는 일은 불가능하므로 주로 다른 고마운 사람이.. 2020. 12. 7.
코드펜 화면 티스토리 글 안으로 가져오기 인터넷으로 불가능한 일은 없다. 시에스에스를 공부하다가 코드펜을 알았다. 에이치티엠엘, 시에스에스, 자바스크립트를 실행해 볼 수 있는 사이트이다. 공부에 큰 도움이 된다. 여러 블로그에 코드펜 화면이 그대로 옮겨져 있음을 확인하고 방법을 찾아보았다. 생각대로 아주 잘 정리해 놓은 글이 있다. 티스토리에 코드펜 CodePen 소스 코드 올리는 방법 티스토리에 CodePen을 활용하여 소스 코드 올리는 방법입니다. 이 글은 티스토리 글쓰기가 예전 버전이 아닌 신규 버전 즉 아래 사진과 같은 글쓰기 버전을 위해서 작성하였습니다. 코드를 티스토 yjshin.tistory.com 그냥 따라하기만 하면 된다. 아무 것도 손대지 않고 테마를 라이트로 했더니 흰색으로 들어왔다. 높이를 조절하면 스크롤 막대가 보이지 않.. 2020. 12. 3.
크기를 바꿀 수 있는 벡터 그래픽 크기를 바꿀 수 있는 벡터 그래픽(SVG: Scalable Vector Graphics)을 소개한다. 맨 아래 링크한 사이트 일부를 우리말로 옮기려고 한다. 영어 잘하는 사람은 그냥 링크를 열어서 공부하면 된다. 1장 소개 이글은 크기를 바꿀 수 있는 벡터 그래픽(Scalable Vector Graphics (SVG):이하 에스브이지)의 모양과 구문에 대한 설명서이다. 1.1. 에스브이지에 대하여 에스브이지는 2차원 그래픽을 위한 언어다. 홀로 쓰는 형식 또는 다른 엑스엠엘과 같이 쓸 때, 엑스엠엘 구문으로 써야 한다. 에이치티엠엘 문서 안에서 에스브이지 코드는 에이치엠엘 구문으로 써야 한다. 에스브이지는 세 가지 그래픽 도형으로 쓸 수 있다. 세 가지는 벡터 그래픽(예 경로가 직선과 곡선으로 이루어진 .. 2020. 12. 2.
반응형

티스토리툴바