learn-htmlandcss/6_2State.html at main · Hanjun2022/learn-htmlandcss · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>State classElement</title>
    <!-- /* ctrl+그냥 누르면 새 탭으로 열림*/-->
    <style>
      a {
        font-size: 30px;
      }
      a:link {
        color: cyan;
      }
      a:visited {
        color: red;
      }
      a:hover {
        color: blue;
        font-weight: 900;
      }
      fieldset:hover {
        background-color: lightgrey;
        box-shadow: 0 0 20px grey;
      }
      a:active {
        color: yellow;
      }
      input:focus {
        outline: none;
        border: 3px solid rgb(31, 97, 252);
        box-shadow: 0 0 20px;
        margin-bottom: 10px;
      }
      li:nth-child(odd) {
        background-color: yellow;
      }
      li:not(.target) {
        font-size: 30px;
      }
      /*가상 요소*/
      /*특정 태그 앞이나 뒤에 무언가를 붙힐때(필수 표시) before,after*/
      .required::before {
        content: '*';
        margin-left: 2px;
        color: red;
        font-size: 10px;
      }
      .required::after {
        content: '*';
        margin-left: 2px;
        color: red;
        font-size: 10px;
      }
      [data-tooltip] {
        position: relative;
      }
      [data-tooltip]:hover::after {
        content: attr(data-tooltip);
        /*조상죽에 static이 아닌걸로 적용 body 태그가 아닌걸로 적용 */
        position: absolute;
        top: 0px;
        left: 56px;
        background-color: black;
        color: white;
        width: 200px;
      }
      .letter::first-letter {
        font-size: 60px;
        color: blue;
      }
      .line::first-line {
        background-color: yellow;
        color: blue;
        font-size: 20px;
      }
      /*드래그 했을 때 background 를 변하게함*/
      p::selection {
        background-color: red;
        color: white;
      }
    </style>
  </head>
  <body>
    <fieldset>
      <legend>State Class</legend>
      <a href="https://naver.com">네이버</a>
      <a href="https://kakao.com">카카오</a>
    </fieldset>
    <fieldset>
      <legend>focus, before, after</legend>
      <div class="field">
        <label class="required" for="name">이름</label>
        <input type="text" id="name" />
      </div>
      <div class="field">
        <label class="required" for="age">나이</label>
        <input type="text" id="age" />
      </div>
      <button data-tooltip=" 이 버튼을 클릭하여 정보를 보내주십시오">
        보내기
      </button>
    </fieldset>
    <fieldset>
      <legend>nth-child ,not</legend>
      <ul>
        <li class="target">1Content</li>
        <li>2Content</li>
        <li>3Content</li>
        <li>4Content</li>
        <li>5Content</li>
      </ul>
    </fieldset>

    <fieldset>
      <legend>first-letter,first-line,section</legend>
      <div>
        <p class="letter">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non
          risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec,
          ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula
          massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci
          nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl
          sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae,
          consequat in, pretium a, enim. Pellentesque congue. Ut in risus
          volutpat libero pharetra tempor. Cras vestibulum bibendum augue.
          Praesent egestas leo in pede. Praesent blandit odio eu enim.
          Pellentesque sed dui ut augue blandit sodales. Vestibulum ante ipsum
          primis in faucibus orci luctus et ultrices posuere cubilia Curae;

        </p>
        <p class="line">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non
          risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec,
          ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula
          massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci
          nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl
          sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae,
          consequat in, pretium a, enim. Pellentesque congue. Ut in risus
          volutpat libero pharetra tempor. Cras vestibulum bibendum augue.
          Praesent egestas leo in pede. Praesent blandit odio eu enim.
          Pellentesque sed dui ut augue blandit sodales. Vestibulum ante ipsum

        </p>
      </div>
    </fieldset>
  </body>
</html>