본문 바로가기

SKIN & CSS74

CSS 선택자(Selectors) CSS에서 어떤 요소를 선택자로 골라서 특별한 스타일을 적용할 수 있다. 그 가운데 선택자 :root로 변수를 만드는 방법을 소개한다. :root { --bg_color: #121212; /*변수이름은 반드시 앞에 --를 붙여야 한다.*/ --border_color: #e7e7e8 } 이제 아래와 같이 변수를 부르면 된다. footer { background-color: var(--bg_color); /*변수를 불러서 적용하는 형식: var(--이름)*/ border-top: 1px solid var(--border_color); } 다른 선택자를 쓰는 방법도 같이 옮겨둔다. 선택자(Selector) 보기 보기 설명 .class .intro class="intro"인 모든 요소를 선택한다. .class1.. 2023. 1. 19.
행-높이(line-height)와 행간(leading) 글자 크기와 마찬가지로 행 높이(line-height) 또한 가독성에 큰 영향을 미친다. 전통적인 행간(leading)은 아래 그림과 같이 아래 끝선과 위 끝선 사이의 거리를 말한다. 금속활자로 찍을 때 행과 행 사이에 기다란 납(lead)을 끼우는 데서 유래한 말이라고 한다. 활자에서 문자 'M'을 찍는 틀은 정사각형에 가깝다. em square는 뜻으로 글자 크기를 나타내는 단위를 em으로 정했다. 'M'의 가로 길이가 기준이 된다. CSS에서 조절하는 행-높이(line-height)는 선-상자(line-box)의 높이를 말하는데 행간을 이등분하는 선 사이의 높이와 같다. 행-높이가 글자 크기의 1.5배가 될 때가 가독성이 좋다고 한다. 사람마다 다르겠지만 나는 조금 더 넓어야 보기 좋다. 그래서 이.. 2023. 1. 18.
블로그 본문 글씨 크기는 얼마? 블로그 스킨을 바꾸면 고치고 싶은 부분이 눈에 띈다. 그 가운데 본문에 쓰는 글꼴과 크기가 있다. 블로그 본문에 가장 좋은 글꼴과 크기는 뭘까? 사람마다 느낌은 다르니까 정답은 없다. 블로그 본문은 쉽게 읽을 수 있어야 한다고 생각한다. 개인적으로 노안이라서 작은 글씨는 눈에 잘 들어 오지 않는다. body { font-weight: 400; font-family: 'NEXON Lv1 Gothic OTF''; font-size: 1.0em; line-height: 2.1em; } CSS에서 글자 크기를 나타내는 단위는 여러 가지다. 단위 설명 pt (points) 1pt=1/72인치=0.35mm로 절대 크기. 1inch=25.4mm px(pixels) 화면 해상도에 대한 상대 크기 em 1em은 지정된 .. 2023. 1. 17.
파비콘 만들기 예전에 만든 파비콘을 바꿨다. "파비콘(fabicon)"("즐겨찾기 아이콘(favorites icon)"의 줄임말)은 웹 브라우저의 주소 표시줄, 탭 및 책갈피에 표시되는 작은 아이콘이다. 일반적으로 사용자가 웹 사이트 또는 웹 페이지를 빠르게 식별하는 데 사용된다. 아이콘은 웹 사이트 로고를 간단하게 나타낸 것으로 크기는 보통 16x16픽셀이다. 파비콘은 일반적으로 .ico 파일로 저장되지만 .png 또는 .gif 파일로도 저장할 수 있으며 웹 페이지의 HTML 코드에서 요소를 사용하여 지정한다. 관리자 화면에서 왼쪽 메뉴에서 블로그를 선택하면 파비콘을 바꾸는 화면이 나온다. 뭔가 알아보기 쉽게 한글을 넣었다. 파비콘을 만드는 방법은 간단하다. 1. 먼저 파비콘으로 만들 이미지 파일을 준비하자. 바탕에.. 2023. 1. 14.
티스토리 제목에 번호 붙이기 HTML은 HyperText Markup Language를 간단하게 적은 것이다. 굳이 우리말로 옮기면 쯤 된다. 종종 잊어버리는데 Markup언어이므로 태그를 잘 활용하면 논문처럼 상당히 체계적인 글을 쓸 수 있다. 글을 입력할 때 그림과 같이 제목과 본문을 따로 설정해 줄 수 있다. 여기서 제목 1, 2, 3을 택하면 자동으로 제목(heading)을 나타내는 h 태그를 입력해 준다. 조심할 점은 티스토리 스킨은 대부분 글 제목에 을 이미 배정되어 있어서 제목 1은 , 제목 2는 을 달아 준다. 스킨에 이미 h 태그에 꾸미기를 해둔 대로 나온다. 이렇게 글 안에 작은 제목을 구별해 두면 검색 로봇이 글을 더 잘 파악할 수 있어서 검색이 잘 되게 만들 수 있다고 한다. 이제 한 발 더 나아가 제목에 자동.. 2023. 1. 12.
둥근 테두리 요즘처럼 모든 것을 혼자 할 수 있는 시대가 과연 있었을까? 티스토리 스킨을 고치다 보면 유행에 민감해진다. 요즘 둥근 테두리에 꽂혔다. 예전엔 칼처럼 딱 잘리고 꼭 들어맞아야 보기 좋았는데 모서리를 살짝 둥글게 돌린 것이 보기 좋다. 두려울 것은 없다. 프로가 만든 것을 보고 따라 하면 된다. 1. skin.html 파일에서 둥글게 고치고 싶은 요소를 찾는다. 주로 div 요소의 class나 id 이름을 살피면 된다. button, input 요소도 대상이다. 또는 . 버튼이나 인풋도 마찬가지다. 2. style.css 파일을 열고 1에서 찾은 요소를 찾는다. CTRL+F를 누르고 찾고 싶은 단어를 입력한다. border-radius: 5px; /*모든 꼭짓점을 둥글게*/ border-radius: 5.. 2023. 1. 12.
티스토리 인용 스타일 바꾸기 완전 초보일 때는 인용 스타일 바꾸기도 쉽지 않다. 티스토리에서 기본으로 제공하는 인용 스타일이 네 가지 있다. 그런데 살짝 맘에 들지 않아서 바꾸고 싶다면 CSS를 손보면 된다. 스킨마다 다르지만 blockquote를 찾으면 된다. .article blockquote { background-color: #F3F6FB; /*배경색*/ padding: 25px 45px; /*안쪽 여백*/ line-height: 1.75em; /*줄 높이*/ font-size: 1.0em !important; border-left: 4px solid #E4E8F0; /*왼쪽 테두리: 굵기 4px 실선 solid 색 #E4E8F0*/ border-right: 1px solid #E4E8F0; /*오른쪽 테두리*/ border.. 2023. 1. 10.
가독성 좋은 넥슨 고딕 본문 글꼴을 바꿨다. 눈누에서 제공하는 웹 폰트인 넥슨 고딕(NEXON Lv1 Gothic OTF)을 적용했다. 이제까지 구글 폰트인 노토 산스(Noto Sans)를 써왔는데 이게 좀 더 가독성이 좋은 느낌이다. 제목으로 쓰던 메이플스토리도 넥슨에서 제공하는 글꼴이라 서로 잘 어울린다. 가끔 이렇게 블로그 글꼴을 바꾸면 기분 전환도 된다. @font-face { font-family: 'NEXON Lv1 Gothic OTF'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@2.1/NEXON Lv1 Gothic OTF.woff') format('woff'); font-weight: normal; font-style: normal; .. 2023. 1. 9.
티스토리 목차 만들기 HTML은 마크업 언어다. 따라서 태그를 잘 이용하면 쉽게 목차를 만들 수 있다. 링크된 글을 읽으면 쉽게 해결된다. 내게 필요한 부분만 따로 떼어내 옮겨 놓는다. 특정한 영역에 있는 H 태그를 뽑아 목차를 만든다. https://www.codingfactory.net/12114 jQuery / Plugin / jquery.toc / H 태그로 목차 만드는 플러그인 jquery.toc jquery.toc는 HTML 문서에 있는 h1, h2 등 h 태그를 이용하여 자동으로 목차를 만들어주는 플러그인입니다. GitHub : https://github.com/ndabas/toc Download : http://ndabas.github.com/toc/assets/jquery.toc.zip 목차 클 www.cod.. 2022. 12. 27.
그리드는 블로그 스킨 레이아웃 끝판왕 씨에스에스도 발전하고 있다. 그리드가 처음 등장한 때는 2017년 10월 17일이다. 나온 지 꽤 오래되었는데 이제야 알았다. 그리드(grid)는 이름 그대로 화면에 눈금을 매겨 놓고 영역을 필요한 곳에 넣기만 하면 되도록 돕는다. 반응형 스킨을 만들 때 아주 편하다. https://studiomeal.com/archives/533 이번에야말로 CSS Grid를 익혀보자 이 포스트에는 실제 코드가 적용된 부분들이 있으므로, 해당 기능을 잘 지원하는 최신 웹 브라우저로 보시는게 좋습니다. (대충 인터넷 익스플로러로만 안보면 된다는 이야기) 이 튜토리얼은 “ studiomeal.com 2022. 12. 15.
수학 사전을 만들기 위한 스킨 수학 용어를 쉽게 찾아볼 수 있는 블로그를 만들고 싶은 꿈이 있다. 한 때는 데이터 베이스를 공부해서 수학 사전을 만들려고 했는데 이게 참 어려운 일이라 일단 포기했다. 지난번에 카테고리를 왼쪽에 띄워서 고정하는 형태로 간단-수학 스킨을 공개해 두었는데 뭔가 맘에 안 드는 구석이 많다. 그래서 이번에는 그리드를 써서 스킨을 고쳐 보았다. 1. 이름은 math_dic 2. $\LaTeX$으로 수식 입력을 자유롭게 할 수 있다. 3. 반응형 스킨으로 모바일에선 1단 스킨으로 변신한다. 4. 그리드만 고쳐주면 다양한 모양으로 변신 가능하다. https://design.tistory.com/ MATH_DIC design.tistory.com 2022. 12. 14.
수학이야기 스킨 두 가지 공개하는 스킨은 모두 하나에서 나와서 거의 같은 모양이다. 블로그 스킨을 직접 다듬기 시작한 까닭은 수식을 입력하기 쉬운 스킨이 없었기 때문이다. 대단한 특징은 없지만 굳이 꼽아 보자면 아래와 같다. 1. 자유로운 수식 입력 (Mathjax ) $$\sum_{n=1}^{\infty}a_n=\lim_{n \to \infty}\sum_{k=1}^{n} a_k$$ 2. 카테고리(글갈래)가 많은 블로그에 적합 - PC 환경에선 왼쪽에 고정 또는 오른쪽 옆에 붙여 놓음 3. 커버는 리스트형과 갤러리형 제공 4. 스크린 해상도에 따라 반응하는 스킨 - 모바일 환경에선 카테고리를 하단으로 옮겨서 1단형으로 변환 수식 입력을 위해 $\LaTeX$를 알고 싶다면 글갈래에서 LaTeX를 눌러보자. Mathstory_2da.. 2022. 11. 27.
반응형

티스토리툴바