'W3C/CSS'에 해당하는 글 20건

티스토리 웹폰트 적용

W3C/CSS 2015. 11. 24. 16:48

요즘 Wordpress 가 급 땡기긴 하지만 서버 운영이랑 디자인 새로 하는데 시간을 투자하기 힘들어서,
당분간 그냥 티스토리 쓰는 걸로...

 

웹폰트하면 나눔글꼴이지. 하지만 이제 좀 질린다고 해야 하나.
서핑하다 구글의 Noto 폰트를 발견했다. 한국어도 완벽한 것 같고.
Noto 는 구글이 개발한 오픈 소스 폰트 패밀리이다.
컴퓨터에서 표시 못하는 문자를 사작형(ㅁ)으로 표시하곤 하는데 구글이 이를 "두부"(tofu) 라고 부르며,
웹에서 이를 없애기 위해 만든 이름이 Noto(No Tofu) 이다.

 

 

1. woff 파일 다운로드

 

https://www.google.com/fonts/earlyaccess
Early Access 페이지에 방문하면 구글에서 제공하는 많은 웹 폰트들의 링크/소스가 있다.
그 중에서 맘에 드는 폰트를 다운받으면 되는데, 링크를 가져가는 것 보다는 링크 속의 파일을 직접 다운받아
본인의 사이트에 적용하는 것이 조금은 귀찮지만 속도면에서는 훨씬 나을 것이다.
Noto 의 한국어 버전의 이름은 Noto Sans KR (Korean) 이다.

 

1
@import url(http://fonts.googleapis.com/earlyaccess/notosanskr.css);
 cs

 

위에서 처럼 링크가 있는데 링크를 다운받아 보면 폰트 파일의 위치를 알 수 있다.

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
/*
 * Noto Sans KR (korean) http://www.google.com/fonts/earlyaccess
 */
@font-face {
  font-family: 'Noto Sans KR';
  font-style: normal;
  font-weight: 100;
  src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.woff2) format('woff2'),
       url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.woff) format('woff'),
       url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.otf) format('opentype');
}
/* ... 중략 ... */
@font-face {
   font-family: 'Noto Sans KR';
   font-style: normal;
   font-weight: 900;
   src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.woff2) format('woff2'),
        url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.woff) format('woff'),
        url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.otf) format('opentype');
 }
 cs

 

위 주소에서 원하는 woff 파일들을 모두 다운받는다.

 

폰트 두께 별로 7가지 (thin, light, black, ...)가 있는데 otf 파일을 받으면 실제 글꼴을 확인할 수 있다.
난 그 중 2가지만 사용하려고 한다. regular, bold (한 개당 용량이 1MB 쯤 됨.)

 

 

2. woff 파일 업로드 / CSS 적용

 

우선 다운받은 파일들(woff, woff2)을 본인의 사이트나 블로그에 올린다.
티스토리에서는 관리자 - HTML/CSS 편집 - 파일올리기 에서 올리면 된다.
올리고 css 파일을 수정한다.

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
@font-face {
   font-family: 'Noto Sans KR';
   font-style: normal;
   font-weight: 400;
   src: url(./NotoSansKR-Regular.woff2) format('woff2'),
        url(./NotoSansKR-Regular.woff) format('woff');
 }
@font-face {
   font-family: 'Noto Sans KR';
   font-style: normal;
   font-weight: 700;
   src: url(./NotoSansKR-Bold.woff2) format('woff2'),
        url(./NotoSansKR-Bold.woff) format('woff');
 }
 cs

 

font-face 정의하고 페이지 전체나 적용을 원하는 곳에 font-family : 'Noto Sans KR' 만 적용하면 끝.

 

 

저작자표시
WRITTEN BY
손가락귀신
정신 못차리면, 벌 받는다.
,

@keyword (At-rule)

W3C/CSS 2013. 4. 5. 00:20

CSS 문서에는 '@'을 이용한 특정기능을 하는 rule 들이 있습니다.

 

 

@charset

 

@charset 은 스타일 시트의 문자 인코딩을 설정할 수 있도록 합니다.
스타일 시트 문서의 최상단에 와야 합니다.
브라우저가 결정하는 css 인코딩 결정 우선 순위로는,
HTTP Content-Type -> @charset -> <link charset=""> 그래도 없으면 utf-8 로 인식합니다.

 

@charset "utf-8";

 

 

@import

 

@import 는 다른 스타일 시트에서 스타일을 가져올 수  합니다.
CSS2.1 에서는 @charset 을 제외하고는 문서에서 가장 앞에 와야 합니다.
URI를 문자열로 지정하는 방법과 url() 안에 지정하는 방법이 있습니다.

 

@import "mystyle.css";
@import url("mystyle.css");

 

Media types 별로 스타일을 가져오고 싶다면 URI 뒤에 콤마(,)로 나열하면 됩니다.

 

@import url("bluish.css") projection, tv;

 

 

@media

 

스타일 시트에서는 각기 다른 Media 마다 문서를 어떻게 표현할지를 지정할 수 있습니다.
각기 다른 Media 란 모니터, 프린터, 음성출력, 점자출력, 핸드폰 등이 있겠네요.
화면이 큰 모니터에 비해 모바일에서는 글자도 좀 더 크게 해야 할 것이고, 화면 분할도 필요할 것입니다.
(Media type : all, braille, embossed, handheld, print, projection, screen, speech, tty, tv)

 

스타일 시트에서는 Media type을 세가지 방법으로 지정할 수 있습니다.

 

@import url("fancyfonts.css") screen;

@media print {
  /* style sheet for print goes here */
}

<link rel="stylesheet" type="text/css" media="print, handheld" href="foo.css">

저작자표시
WRITTEN BY
손가락귀신
정신 못차리면, 벌 받는다.
,

Web Safe Font Combinations

W3C/CSS 2010. 11. 1. 17:58
Commonly Used Font Combinations

사용자 삽입 이미지
사용자 삽입 이미지
사용자 삽입 이미지
WRITTEN BY
손가락귀신
정신 못차리면, 벌 받는다.
,

CSS Pseudo-elements

W3C/CSS 2006. 9. 11. 18:58
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}

<p>Some text that ends up on two or more lines</p>

위 예제는 브라우저가 "first-line" pseudo element에 따라 형태가 적용된 첫번째 줄을 보여준다.
"first-line" pseudo-element는 block-level 요소에만 사용될 수 있다.
다음 속성은 "first-line" pseudo-element가 허용된다.
  • font properties
  • color properties 
  • background properties
  • word-spacing
  • letter-spacing
  • text-decoration
  • vertical-align
  • text-transform
  • line-height
  • clear
<!-- 첫번째 줄 텍스트 스타일 지정 -->
<html>
<head>
<style type="text/css">
p:first-line
{
color: #ff0000;
font-variant: small-caps
}
</style>
</head>

<body>
<p>
Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text
</p>
</body>
</html>


The :first-letter Pseudo-element
"first-letter" pseudo-element는 선택자의 첫번째 문자 텍스트에 특별한 스타일을 더해준다.

p {font-size: 12pt}
p:first-letter {font-size: 200%; float: left}

<p>The first words of an article.</p>

"first-letter" pseudo-element는 block-level 요소에만 사용될 수 있다.
다음 속성은 "first-letter" pseudo-element가 허용된다.
  • font properties
  • color properties 
  • background properties
  • margin properties
  • padding properties
  • border properties
  • text-decoration
  • vertical-align (only if 'float' is 'none')
  • text-transform
  • line-height
  • float
  • clear
<!-- 첫번째 텍스트 문자 스타일 지정 -->
<html>
<head>
<style type="text/css">
p:first-letter
{
color: #ff0000;
font-size:xx-large
}
</style>
</head>

<body>
<p>
Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text
</p>
</body>
</html>


Pseudo-elements and CSS Classes
Pseudo-elements CSS 클래스들을 결합할 수 있다.

p.article:first-letter {color: #FF0000}

<p class="article">A paragraph in an article</p>


Multiple Pseudo-elements
여러 pseudo-elements는 결합될 수 있다.

p {font-size: 12pt}
p:first-letter {color: #FF0000; font-size: 200%}
p:first-line {color: #0000FF}

<p>The first words of an article</p>

위 예제에서 문단의 첫번째 문자는 24pt의 폰트 크기를 가진 빨간색이 될 것이다.
문단의 나머지가 기본 색상일 때 첫번째 줄의 나머지는 파란색이 될 것이다.


CSS2 - The :before Pseudo-element
":before" pseudo-element는 요소 전에 어떤 내용을 삽입하는데 사용할 수 있다.

/* h1 요소가 나타나기 전에 사운드가 플레이 된다. */
h1:before
{
content: url(beep.wav)
}


CSS2 - The :after Pseudo-element
":after" pseudo-element는 요소 뒤에 어떤 내용을 삽입하는데 사용할 수 있다.

/* h1 요소가 나타난 후에 사운드가 플레이 된다. */
h1:after
{
content: url(beep.wav)
}


Pseudo-element

:first-letter - 첫번째 텍스트의 문자에 특별한 스타일을 더한다.
:first-line - 첫번째 줄의 텍스트에 특별한 스타일을 더한다.
:before - 요소 전에 어떤 내용을 삽입한다.(ie: x)
:after - 요소 후에 어떤 내용을 삽입한다.(ie: x)
WRITTEN BY
손가락귀신
정신 못차리면, 벌 받는다.
,

CSS Pseudo-classes

W3C/CSS 2006. 9. 11. 18:34
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}   /* mouse over link */
a:active {color: #0000FF}   /* selected link */

a:hover는 효과를 내려면 CSS 정의에서 a:link와 a:visited 후에 와야 한다.
a:active는 효과를 내려면 CSS 정의에서 a:over 후에 와야 한다.
Pseudo-class는 이름에서 대문자와 소문자를 구별한다.

<!-- Link 스타일 지정 -->
<html>
<head>
<style type="text/css">
a:link {color: #FF0000}
a:visited {color: #00FF00}
a:hover {color: #FF00FF}
a:active {color: #0000FF}
</style>
</head>
<body>
<p><b><a href="default.asp" target="_blank">This is a link</a></b></p>
</body>
</html>
.
<!-- Link 스타일 지정 -->
<html>
<head>
<style type="text/css">
a.one:link {color: #ff0000}
a.one:visited {color: #0000ff}
a.one:hover {color: #ffcc00}

a.two:link {color: #ff0000}
a.two:visited {color: #0000ff}
a.two:hover {font-size: 150%}

a.three:link {color: #ff0000}
a.three:visited {color: #0000ff}
a.three:hover {background: #66ff66}

a.four:link {color: #ff0000}
a.four:visited {color: #0000ff}
a.four:hover {font-family: monospace}

a.five:link {color: #ff0000; text-decoration: none}
a.five:visited {color: #0000ff; text-decoration: none}
a.five:hover {text-decoration: underline}
</style>
</head>

<body>
<p><b><a class="one" href="default.asp" target="_blank">changes color</a></b></p>
<p><b><a class="two" href="default.asp" target="_blank">changes font-size</a></b></p>
<p><b><a class="three" href="default.asp" target="_blank">changes background-color</a></b></p>
<p><b><a class="four" href="default.asp" target="_blank">changes font-family</a></b></p>
<p><b><a class="five" href="default.asp" target="_blank">changes text-decoration</a></b></p>
</body>
</html>


Pseudo-classes and CSS Classes
Pseudo-classes는 CSS 클래스들을 결합시킬 수 있다.

a.red:visited {color: #FF0000}

<a class="red" href="css_syntax.asp">CSS Syntax</a>


CSS2 - The :first-child Pseudo-class
The :first-child pseudo-class는 또 다른 요소의 첫번째 자식(child)인 지정된 요소를 맞춘다.
(ie 에서 동작하지 않음)

/* 선택자가 div 요소의 첫번째 자식(child)인 p 요소에 맞추고, div 요소 안에 첫번째 문단을 들여쓴다. */
div > p:first-child
{
text-indent:25px
}

/* 이 선택자는 div 안에 첫번째 문단에 맞춰질 것이다. */
<div>
<p>
First paragraph in div.
This paragraph will be indented.
</p>
<p>
Second paragraph in div.
This paragraph will not be indented.
</p>
</div>

/* 그러나 다음 문장은 맞춰지지 않는다. */
<div>
<h1>Header</h1>
<p>
The first paragraph inside the div.
This paragraph will not be indented.
</p>
</div>

/* 선택자는 p 요소의 첫번째 자식(child)인 em 요소에 맞추고, p 요소 안의 첫번째 em에 굵게 font-weight를 지정한다. */
p:first-child em
{
font-weight:bold
}

/* 아래 em은 문장의 첫번째 자식(child)이다. */
<p>I am a <em>strong</em> man.</p>

/* 선택자는 어떤 요소의 첫번째 자식(child)인 요소에 맞추고, none으로 text-decoration을 지정한다. */
a:first-child
{
text-decoration:none
}

/* 아래에서 첫번째는 문단의 첫번째 자식(child)이고, 라인이 생기지 않을 것이다.
그러나 문장의 두번째는 누장의 첫번째 자식과 달리 라인이 생길 것이다. */
<p>
Visit <a href="http://www.google.co.kr">Google</a>
Google
Visit <a href="http://www.google.co.kr">Google</a>
Google
</p>


CSS2 - The :lang Pseudo-class
The :lang pseudo-class는 다른 언어에 대한 특정할 규칙을 정의한다.
(ie 에서 동작하지 않음)

/* the :lang class는 "no" 값을 가진 lang 속성으로 인용부호의 타입을 정의한다. */
<html>
<head>
<style type="text/css">
q:lang(no)
{
quotes: "~" "~"
}
</style>
</head>

<body>
<p>Some text <q lang="no">A quote in a paragraph</q>
Some text.</p>
</body>
</html>


Pseudo-classes

:active - 선택된 링크에 지정된 스타일 중
:focus - 요소가 포커스를 가지는 동안 요소에 특별한 효과를 줌
:hover - 마우스를 올렸을 때 요소에 특별한 스타일을 추가
:link - 방문하지 않은 링크에 특별한 스타일을 추가
:visited - 방문한 링크에 특별한 스타일을 추가
:first-child - 다른 요소의 첫번째 자식 요소에 특별한 스타일을 추가 (ie : x)
:lang - 지정된 요소에 사용할 특별한 언어를 지정 (ie : x)
WRITTEN BY
손가락귀신
정신 못차리면, 벌 받는다.
,