본문 바로가기

티스토리 웹폰트 적용 요즘 Wordpress 가 급 땡기긴 하지만 서버 운영이랑 디자인 새로 하는데 시간을 투자하기 힘들어서, 당분간 그냥 티스토리 쓰는 걸로... 웹폰트하면 나눔글꼴이지. 하지만 이제 좀 질린다고 해야 하나. 서핑하다 구글의 Noto 폰트를 발견했다. 한국어도 완벽한 것 같고. Noto 는 구글이 개발한 오픈 소스 폰트 패밀리이다. 컴퓨터에서 표시 못하는 문자를 사작형(ㅁ)으로 표시하곤 하는데 구글이 이를 "두부"(tofu) 라고 부르며, 웹에서 이를 없애기 위해 만든 이름이 Noto(No Tofu) 이다. 1. woff 파일 다운로드 https://www.google.com/fonts/earlyaccess Early Access 페이지에 방문하면 구글에서 제공하는 많은 웹 폰트들의 링크/소스가 있다. 그 ..
@keyword (At-rule) CSS 문서에는 '@'을 이용한 특정기능을 하는 rule 들이 있습니다. @charset @charset 은 스타일 시트의 문자 인코딩을 설정할 수 있도록 합니다. 스타일 시트 문서의 최상단에 와야 합니다. 브라우저가 결정하는 css 인코딩 결정 우선 순위로는, HTTP Content-Type -> @charset -> 그래도 없으면 utf-8 로 인식합니다. @charset "utf-8"; @import @import 는 다른 스타일 시트에서 스타일을 가져올 수 합니다. CSS2.1 에서는 @charset 을 제외하고는 문서에서 가장 앞에 와야 합니다. URI를 문자열로 지정하는 방법과 url() 안에 지정하는 방법이 있습니다. @import "mystyle.css"; @import url("mysty..
Web Safe Font Combinations Commonly Used Font Combinations
CSS Pseudo-elements CSS pseudo-elements는 어떤 선택자에 특별한 효과를 더할 때 사용된다. Syntax selector:pseudo-element {property: value} CSS classes는 pseudo-elements로도 사용된다. selector.class:pseudo-element {property: value} The :first-line Pseudo-element "first-line" pseudo-element는 선택자의 첫번째 줄 텍스트에 특별한 스타일을 더해준다. p {font-size: 12pt} p:first-line {color: #0000FF; font-variant: small-caps} Some text that ends up on two or more lines 위 예제는..
CSS Pseudo-classes CSS pseudo-classes는 어떤 선택자에 특별한 효과를 더하는데 사용된다. Syntax selector:pseudo-class {property: value} 또한 CSS classes는 psudo-classes로 사용될 수 있다. selector.class:pseudo-class {property: value} Anchor Pseudo-classes 링크에 마우스를 올렸을 때나, 활성화된, 방문한, 방문하지 않은 링크는 CSS를 지원하는 브라우저에 모두 다른방법으로 보여지게 될 수 있다. a:link {color: #FF0000} /* unvisited link */ a:visited {color: #00FF00} /* visited link */ a:hover {color: #FF00FF} ..
CSS Positioning Properties CSS positioning 속성은 요소의 위치를 상,하,좌,우로 지정한다. 요소의 모양(shape)을 지정하고, 다른 것들 뒤에 요소를 위치시키고, 요소의 내용이 지정된 영역에 비해 너무 클 때 지정한다. CSS bottom Property (CSS top Property, CSS left Property, CSS right Property) bottom 속성은 요소의 아래 테두리를 지정한다. "position" 속성이 "static"의 값을 가진다면, "bottom" 속성은 효과가 없다. (상속불가) /* window의 아래 테두리의 20px 위에 문장의 아래 테두리 지정 */ p { position: absolute; bottom: 20px } /* window의 아래 테두리의 20px 밑에 문장의..
CSS Classification Properties CSS classification 속성은 요소를 어떻게 보여줄지 컨트롤하고 이미지를 또다른 요소와 나타내는 것을 지정하고, 일반 위치에서 상대적으로 요소를 위치시키고, 절대값을 사용하여 요소를 위치시키고, 보이는 요소를 컨트롤하게 한다. CSS cursor Property cursor 속성은 요소에 포인팅했을 때 나타나는 커서의 형태를 지정한다. (상속가능) h2 { cursor: crosshair } p { cursor : url("first.cur"), url("second.cur"), pointer } Values url - 사용될 사용자 커서의 주소 default - 기본 커서 auto - 브라우저가 커서를 지정 crosshair - 십자선 모양의 커서 pointer - 링크를 가리키는 손모양 커..
CSS Dimension Properties CSS dimension 속성은 요소의 가로, 세로 길이를 컨트롤하게 한다. 또한 두 라인 사이의 공백을 증가하게 한다. CSS height Property height 속성은 요소의 높이를 지정한다. (상속불가) img { height: 230px } Values auto - 브라우저가 실제 높이를 계산한다. length - px, cm 등으로 높이를 정의한다. % - 포함하는 블럭의 %로 높이를 정의한다. CSS line-height Property line-height 속성은 줄간격을 지정한다. (음수값 허용안함) (상속가능) p { line-height: 1.4 } p { line-height: 14pt } p { line-height: 140% } Values normal - 라인 사이의 적당한..