본문 바로가기

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.
반응형

티스토리툴바