코딩 9일째
--------------------------------------------------------------------
Emmet
link + tab키
<link rel="stylesheet" href=""> 불러옴
script[src] + tab키
<script src="">
ctrl+shift+a 에다가 p 넣고 엔터
"Tap" => 코드 확장
"ctrl+shift+a" => 코드 감싸기
"ctrl+/" => 한 줄 코멘트 (주석) 처리
"ctrl+shift+/" => block 코멘트
--------------------------------------------------------------------
ul>li ul이 직접 낳은 자식만
ul li 서브메뉴, 주메뉴 다
--------------------------------------------------------------------
<p> 태그의 부모는 <header> / <h3>은 그냥 형
--------------------------------------------------------------------
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>문자 선택자</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/text.css">
<!-- script[src]*2-->
<script src="js/modernizr-custom.js"></script>
<script src="js/script.js"></script>
</head>
<body>
<!-- emmet 단축키
"Tap" => 코드 확장
"ctrl+shift+a" => 코드 감싸기
"ctrl+/" => 한 줄 코멘트 (주석) 처리
"ctrl+shift+/" => block 코멘트
-->
<header>
<h3>낙화</h3>
<p>
가야할 때가 언제인가를<br>
분명히 알고 가는 이의<br>
뒷모습은 얼마나 아름다운가.
</p>
<p>
봄 한철<br>
격정을 인내한 희망의 문학<br>
나의 사랑은 지고 있다.<br>
분분한 낙화
</p>
<p>
결별이 이룩하는 축복에 싸여<br>
지금은 가야할 때
</p>
<p>
무성한 녹음과 그리고<br>
머지 않아 열매 맺는<br>
가을을 향하여<br>
나의 청춘은 꽃답게 죽는다.
</p>
<p>
헤어지자<br>
섬세한 손길을 흔들며<br>
하롱하롱 꽃잎이 지는 어느 날
</p>
<p>
나의 사랑, 나의 결별<br>
샘터에 물 고인 듯 성숙하는<br>
내 영혼의 슬픈 눈.
</p>
</header>
</body>
</html>
--------------------------------------------------------------------
@charset "utf-8";
/*시작문자 선택*/
header p:nth-child(3) {}
/*첫째는 '낙화'*/
header p:nth-of-type(3) {}
p:first-letter {color: skyblue;}
p:first-line {color: skyblue;}
/*둘 중 하나만 적용 된다.*/
/*전, 후 문자 선택*/
p:before {
content: 'before';
}
p:after {
content: 'after';
}
/*
'문자열'과 수식
11+1 => 12
'11'+1 => 111
'p'+0+'.jpg' => p0.jpg
'*/
p::selection {
/* p::selection의 경우 꼭! 콜론을 두 개 해야함. */
/* 색상입력 후 'ctrl+e'
색상조절 창 열림.
*/
background-color: yellow;
color: #111
}
--------------------------------------------------------------------
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>상태 선택자</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/form.css">
<!-- script[src]*2-->
<script src="js/modernizr-custom.js"></script>
<script src="js/script.js"></script>
</head>
<body>
<!--form>input[value]*2-->
<form>
<input type="text" value="enabled">
<input type="text" value="disabled" disabled>
</form>
<hr>
<section>
<h2>enabled</h2>
<input type="text">
<h2>disabled</h2>
<input type="text" disabled="">
</section>
<!--
section>h2+input+h2+input[disabled]
둘째, 첫째, 넷째, 첫째
-->
</body>
</html>
--------------------------------------------------------------------
@charset "utf-8";
/*input 태그가 사용 가능 할 때*/
input:enabled {
background-color: #eee;
}
/*input 사용 불가능 할 때*/
input:disabled {
background-color: ;
}
/*inpuut 태그가 초점(focus)이 맞았을 때
focus: tab키로 이동가능. 반대: blur
클릭했을 때!!!
*/
input:focus {
background-color: #ee0;
}
/*#16진수표기
0 1 2 3 4 5 6 7 8 9 a b c d e f
red => #ff0000, #f00
green => #00ff00, #0f0
blue => #0000ff, #00f
yellow => #ffff00, #ff0
*/
--------------------------------------------------------------------
http://www.w3schools.com/css/css_pseudo_classes.asp
http://www.w3schools.com/css/css_pseudo_elements.asp
--------------------------------------------------------------------
p115.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/p115.css">
<script src="js/modernizr-custom.js"></script>
</head>
<body>
<!--p155-->
<article>
<!--input[type=checkbox]*2-->
<input type="checkbox">
<div>
<h1>서 시</h1>
<p>죽는 날까지 하늘을 우러러
한 점 부끄럼이 없기를,
잎새에 이는 바람에도
나는 괴로워했다.
별을 노래하는 마음으로
모든 죽어 가는 것을 사랑해야지
그리고 나한테 주어진 길을
걸어가야겠다.
오늘밤에도 별에 바람이 스치운다.</p>
</div>
</article>
</body>
</html>
--------------------------------------------------------------------
p115.css
@charset: "utf-8";
input[type=checkbox]:checked + div {
height: 0px;
}
div {
overflow: hidden;
width: 650px; height: 300px;
-ms-transition-duration: 1s;
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-o-transition-duration: 1s;
transition-duration: 1s;
}
--------------------------------------------------------------------