타이포그래피

모든 저작권은 <생활코딩>의 생산자인 <egoing>님에게 있습니다.

문제시, 비공개로 전환하겠습니다.

<font-size>

단위 - unit을 지정해야한다.
크게 3가지의 단위가 있다.

1. px - 모니터 상의 화소 하나의 크기에 대응되는 단위입니다.
고정된 값이기 때문에 이해하기 쉽습니다만,
사용자가 글꼴의 크기를 조정할 수 없기 때문에 가급적 사용을 하지 않는 것이 좋습니다.

2. em - 부모 태그의 영향을 받는 상대적인 크기입니다.
부모의 크기에 영향을 받기 때문에 파악하기가 어렵습니다.
rem이 등장하면서 이 단위 역시 사용이 권장되지 않습니다.

3. rem - html 태그에 적용된 font-size의 영향을 받습니다.
html 태그의 폰트 크기에 따라서 상대적으로 크기가 결정되기 때문에 이해하기 쉽습니다.
가장 바람직한 단위입니다. 이것을 사용하세요.

사용자가 브라우저의 글꼴크기를 키웠을 때... [zoom in, zoom out이 아니다. 폰트크기 설정할 때를 말하는 것이다.]
1. px은 안바뀐다.
2. rem은 바뀐다.

예제

<!DOCTYPE html>

<html>

<head>

#px{font-size: 16px;}

#rem{font-size: 1rem;}

</style>

</head>

<body>

</body>

</html>

<color>

Font의 색깔을 지정하는 3가지 방법
1. color name
2. hex
3. rgb

CSS의 색깔코드 검색 - http://www.w3schools.com/css/css_colors.asp

예제

<!DOCTYPE html>

<html>

<head>

h1{

color:red;

}

h2{color:powderblue;}

h3{color:#C9DD03;}

h4{color:rgb(255,255,255);}

</style>

</head>

<body>

<h1>Hello World</h1>

<h2>Hello There</h2>

<h3>Hello Here</h3>

<h4>Hello You</h4>

</body>

</html>

<text-align>

text align의 값: left, right, center, justify

예제

<!DOCTYPE html>

<html>

<head>

<style>

text-align: justify;

border:1px solid gray;

}

</style>

</head>

<body>

<p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras accumsan iaculis tristique. Pellentesque eu erat mattis est semper condimentum. Nunc sed facilisis turpis. Mauris vulputate, purus in suscipit accumsan, dolor lorem elementum mi, non congue metus urna vitae tortor. Duis dictum ipsum non neque elementum iaculis. Sed sodales purus nisl, gravida pellentesque metus vehicula vitae. Suspendisse sed justo ut lorem molestie consectetur. Nullam efficitur quis velit ut scelerisque. Integer at velit pharetra neque efficitur varius.

Vestibulum interdum tellus sed tellus pretium vulputate. Vestibulum a mattis ante. Ut at metus eget eros dictum tristique. Proin sodales nulla eget enim pulvinar imperdiet. Aliquam et congue quam. Duis blandit dui faucibus lorem auctor, ut laoreet dolor aliquet. Vestibulum nec placerat ligula, vitae vehicula neque. Nulla dictum dui et vehicula mattis. Aenean non erat non diam sollicitudin posuere.

Donec placerat felis in elementum ullamcorper. Duis tellus nunc, eleifend non molestie eget, ornare ut risus. Morbi sit amet nunc ante. Donec vestibulum tortor nec massa vestibulum suscipit. Quisque faucibus pulvinar erat, vitae gravida tortor commodo vitae. Suspendisse malesuada urna eu imperdiet tincidunt. Curabitur non scelerisque nulla. Nullam pellentesque ante ex, eget varius odio lacinia nec. Cras sed ligula vitae odio dictum semper ut sed eros. Vivamus sollicitudin elementum felis a accumsan. In vitae mi at sem molestie bibendum nec quis libero. Fusce sed tortor ultrices, maximus risus nec, tincidunt orci.

In hac habitasse platea dictumst. Maecenas congue arcu nulla, vel pharetra mauris condimentum vel. Quisque sit amet sapien arcu. Vestibulum eu consectetur ante, vel iaculis justo. Proin in ipsum vel eros auctor rhoncus sed vel lacus. Vestibulum suscipit dolor eget nunc accumsan semper. In ac porta libero. Pellentesque risus ipsum, egestas sit amet rhoncus eu, finibus sit amet felis. Nunc gravida nulla non elit porttitor, sed maximus arcu semper. Ut nulla ante, ornare nec quam sed, venenatis viverra odio. Ut vitae odio nisi. Nam vitae ullamcorper nulla. Sed eu fermentum velit. Pellentesque id dolor metus. Nullam pharetra pharetra enim, pretium convallis metus ultrices eget. Sed cursus vestibulum orci in cursus.

Integer commodo varius ornare. Vivamus lacus urna, scelerisque nec lectus porta, interdum commodo dolor. Curabitur sagittis diam quis tellus semper commodo. Ut non orci consectetur, cursus urna et, tincidunt est. Donec mollis vulputate tempus. Aliquam sapien leo, venenatis at ligula vitae, vestibulum finibus ipsum. Donec pulvinar pretium mattis. Mauris risus augue, eleifend et suscipit ac, convallis vel nisl. Fusce tincidunt fringilla vulputate. Ut porttitor lorem vitae sodales finibus.

</p>

</body>

</html>

<font>

1. font-family : 서체를 지정하는 속성이다.

예제

h1{

font-family: "Times New Roman", Times, serif;

}

위 코드의 의미는 h1 태그를 Times New Roman을 지정한다.
그런데 사용자의 컴퓨터에 폰트가 없으면 Times를 사용한다.
이 때 마지막 폰트는 포괄적인 폰트로 지정한다. 아래와 같은 것이 있습니다.
serif (장식이 있는 폰트), sans-serif, cursive (흘림체), fantasy, monospace (고정폭),

2. font-weight : 폰트의 두께

예제

h1{

font-weight: bold;

}

3. line-height: 행과 행 사이의 간격 지정. 기본 값은 1.2

예제

h1{

font-family: "Times New Roman", Times, serif;

}

4. font: font-size와 font-family는 필수로 포함되어야하는 정보

예제

h1{

font: 15px arial, sans-serif;

}

font-family.html

<!DOCTYPE html>

<html>

<head>

<style>

#type1{

font-size:5rem;

font-family: arial, verdana, "Helvetica Neue", serif;

font-weight: bold;

line-height: 2;

}

#type2{

font:bold 5rem/2 arial, verdana, "Helvetica Neue", serif;

}

</style>

</head>

<body>

Hello world<br>

Hello world

</p>

Hello world<br>

Hello world

</p>

</body>

</html>

<서체>

서체의 구분방법
1. 고정폭 vs 가변폭
2. Serif vs Sans serif : serif는 글꼴에 사용하는 장식, sans는 장식이 없는 것(부정의 표현)

폰트 랭킹 - http://www.fontreach.com/#top
국내 폰트 (네이버 폰트 자료실) - http://software.naver.com/software/fontList.nhn?categoryId=I0000000#brandId=

<웹폰트>

사용자가 가지고 있지 않은 폰트를 웹페이지에서 사용하는 방법 (서버에서 전송한다.)

웹폰트의 사용시 폰트파일의 크기를 주의깊게 봐야한다. -> 데이터 소모

구글에서 "WEB FONT GENERATOR" 검색 -> 웹폰트를 만들어준다.
이렇게 생성된 웹폰트는 코딩내의 @fontface 부분과 연동되어 있음.

예제

<!DOCTYPE html>

<html>

<head>

<style>

#font1{

font-family: 'Open Sans Condensed', sans-serif;

}

#font2{

font-family: 'Indie Flower', cursive;

}

</style>

</head>

<body>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce facilisis lacus eu ex rhoncus pretium. Sed vestibulum risus pharetra, consequat nibh ac, ornare nunc. Nunc eu dui eget lorem aliquet finibus.

</p>

Quisque nec arcu felis. Vestibulum gravida, augue eu facilisis tempus, neque erat tincidunt nunc, consequat ultrices felis urna eu augue. Nulla ut urna purus. Curabitur ultricies rutrum orci malesuada tempor.

</p>

</body>

</html>

저작자표시 비영리 변경금지

con-templatio

타이포그래피

댓글

티스토리툴바

타이포그래피

관련글

댓글

티스토리툴바