코딩 10일째
http://css3generator.com/
http://www.css3maker.com/
-------------------------------------------------------------------------
CSS3 시작!
http://www.w3schools.com/cssref/css_units.asp
-------------------------------------------------------------------------
기존 글꼴 선택
font-size: 30px;
font-size: 0.5em; <- 1/2 배율로 변경
-------------------------------------------------------------------------
units.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>웹페이지 단위</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/units.css">
<script src="js/modernizr-custom.js"></script>
<script src="js/script.js"></script>
</head>
<body>
<!-- h3{너에게 묻는다}; 태그와 태그 사이에 글을 쓸 때 중괄호-->
<h3>너에게 묻는다 - 안도현</h3>
<p><span>너에게 묻는다</span><br>
<span>연탄재 함부로 발로 차지 마라</span><br>
<span>너는누구에게한번이라도뜨거운사람이었느냐</span><br>
반쯤 깨진 연탄<br>
언젠가는 나도 활활 타오르고 싶을 것이다<br>
나를 끝 닿는데 까지 한번 밀어붙여 보고 싶은 것이다<br>
타고 왔던 트럭에 실려 다시 돌아가면<br>
연탄, 처음으로 붙여진 나의 이름도<br>
으깨어져 나의 존재도 까마득히 뭉개질 터이니<br>
죽어도 여기서 찬란한 끝장을 한번 보고 싶은 것이다<br>
나를 기다리고 있는 뜨거운 밑불위에<br>
지금은 인정머리없는 차가운, 갈라진 내 몸을 얹고<br>
아랫쪽부터 불이 건너와 옮겨 붙기를<br>
시간의 바통을 내가 넘겨 받는 순간이 오기를<br>
그리하여 서서히 온몸이 벌겋게 달아 오르기를<br>
나도 느껴보고 싶은 것이다<br>
나도 보고 싶은 것이다<br>
모두들 잠든 깊은 밤에 눈에 빨갛게 불을 켜고<br>
구들장 속이 얼마나 침침하니 손을 뻗어 보고 싶은 것이다<br>
나로 하여 푸근한 잠 자는 처녀의 등허리를<br>
밤새도록 슬금슬금 만져도 보고 싶은 것이다</p>
</body>
</html>
-------------------------------------------------------------------------
units.css
@charset: "utf-8";
/*웹의 기본단위 'px' 'em' '%'*/
/*기본 글씨 픽셀: 16픽셀*/
h3 {
font-size: 16px;
font-weight: normal; /*bold, bolder, light, lighter*/
font-style: italic; /*em 태그 사용시, 누운 글씨를 다시 제자리로 돌릴 때*/
}
p {
/*
small, medium, large
x-small, xx-small, x-large, xx-large
*/
font-size: 14px;
line-height: 1.6em; /*줄간격, em, 폰트사이즈가 기준*/
letter-spacing: -2px;
word-spacing: 10px; /*단어와 기호를 같이 쓸 때 유용*/
}
/*
p > span:nth-child(1) {}
p > span::nth-child(2) {} <- <br>이 선택
p > span:nth-child(3) {} <- 두번째 span
*/
p > span:nth-of-type(1) {
font-weight: bold;
color: #333;
}
p > span:nth-of-type(2) {
color: #ff0;
background-color: #222;
}
p > span:nth-of-type(3) {
letter-spacing: 10px;
font-style: italic;
}