[🎨창작] 메모장 겸 데이터 저장

===============================================================style.css===============================================

/*<<<<<<<<<<<<<<< CSS Selector >>>>>>>>>>>>>>>>>>>*/

/*[기본 선택자 => '', '#', '.'. '[PropertyName]', '[PropertyName = Value]']*/

/*태그*/

background-color: yellow;

}

/*아이디*/

#id1{

color:yellow;

background-color: black;

}

/*클래스*/

p.class1{

color:red;

background-color: navy;

}

/*속성 여부*/

h1[text]{

color:purple;

}

/*속성 값*/

h1[text = "come"]{

color: aqua;

background-color: brown;

}

/*[반응 선택자 => ':']*/

/*다양한 이벤트 to tag*/

a:link{

color: green;

}

a:hover{

color: red;

background-color: yellow;

}

/*[구조 선택자 => ':']*/

/*동일 태그에서 n( to formula)번째 자식 선택 : nth-child(formula)*/

background-color: white;

}

p:nth-child(1){

background-color: red;

}

p:nth-child(2){

background-color: orange;

}

p:nth-child(3){

background-color: yellow;

}

p:nth-child(4){

background-color: blue;

}

/*맨 처음 자식 선택, 맨 마지막 자식 선택 : first-child, last-child*/

th:first-child{

border-radius: 10px 0 0 0;

}

th:last-child{

border-radius: 0 30px 0 0;

}

tr:nth-child(2n + 1){

background-color: aqua;

}

tr:nth-child(2n){

background-color: red;

}

/*[상태 선택자 => ':']*/

/*다양한 이벤트 to Form*/

input:disabled{

background-color: red;

}

input:enabled{

background-color: skyblue;

}

/*[기타 선택자 => '::']*/

/*다양한 특수한 경우 to etc*/

div::selection{

color: green;

background-color: black;

}

/*[조합 선택자 : ' ' | > | + | ~ | , ]*/

A B = 선택자 A에 포함된 선택자 B를 선택(여러번 가능)

A > B = 선택자 A의 자식만 하나만 선택

A + B = A선택자 바로 다음의 선택자 B 하나만 선택(여러번 가능)

A ~ B = A선택자 다음 나오는 B선택자 (모두) 선택

A, B = 선택자 A와 선택자 B를 선택

div h1{

color: red;

}

h1 + h2{

color: green;

}

h2 ~ p{

color: yellow;

background-color: black;

}

/*<<<<<<<<<<<<<<< CSS Style >>>>>>>>>>>>>>>>>>>*/

/*[박스 스타일]*/

==========================================================main.html========================================

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<p>Orange</p>

<p>Yellow</p>

<p>Nothing</p>

<table>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

<strong>UnActive</strong>

<strong>Active</strong>

<div>

발휘하기 찾아 생생하며, 피어나는 설레는 풀이 시들어 것이다. 때에, 방황하여도, 그와 이 심장은 작고 낙원을 풍부하게 아름다우냐? 이상은 같이, 봄바람을 어디 미묘한 굳세게 얼음이 가진 아니다. 날카로우나 청춘 얼마나 가지에 청춘의 가치를 얼음에 곳으로 아니다. 인간이 이상은 거친 그리하였는가? 하였으며, 현저하게 우리 대중을 청춘 인생의 돋고, 찾아 사라지지 칼이다. 미묘한 들어 장식하는 못하다 것이다. 없으면, 것이다.보라, 청춘에서만 역사를 약동하다. 사라지지 그들은 길지 아니한 품으며, 그리하였는가?

얼마나 설산에서 찾아다녀도, 그들은 이상, 보라. 끝까지 곧 든 피고 듣는다. 같으며, 긴지라 얼마나 많이 길지 고행을 아니다. 놀이 맺어, 피가 남는 품고 뿐이다. 풍부하게 따뜻한 인간이 뿐이다. 설레는 날카로우나 관현악이며, 풍부하게 바이며, 가장 얼마나 가치를 든 칼이다. 있는 피가 되려니와, 앞이 그것은 피어나기 방황하여도, 이것을 것이다. 역사를 무엇이 피고 듣는다. 없으면, 두손을 할지라도 하였으며, 얼마나 길지 사막이다. 따뜻한 영락과 소금이라 청춘의 인간이 것이다.

그들은 생의 동산에는 보라. 사라지지 청춘 따뜻한 쓸쓸한 것이다. 심장의 사는가 무한한 관현악이며, 내는 수 무엇을 것이다. 못할 같지 그들의 피고 그들을 무엇을 듣는다. 군영과 용기가 든 커다란 얼음 품으며, 예수는 쓸쓸하랴? 청춘의 어디 봄바람을 청춘이 이것은 아니다. 새 인생의 품에 사막이다. 예가 있는 동산에는 사랑의 가치를 위하여, 인간의 찾아다녀도, 있으랴? 아름답고 방황하였으며, 인생을 따뜻한 이상 칼이다.

</div>

<div>

<h1>Heading1 : h1</h1>

<h2>Heading2 : h2</h2>

<h1>Heading3 : h1</h1>

<h1>Heading4 : h1</h1>

<h1>Heading5 : h1</h1>

<h2>Heading6 : h2</h2>

<p>Heading7 : p</p>

<p>Heading8 : p</p>

<p>Heading9 : p</p>

</div>

</body>

</html>

[🎨창작] 메모장 겸 데이터 저장

댓글 2

다른 게시글