• 코드:
​x
 
1
<!DOCTYPE html>
2
<html lang="ko">
3
​
4
<head>
5
    <meta charset="UTF-8">
6
    <title>CSS Dynamic Selectors</title>
7
    <style>
8
        input {
9
            border: 3px solid #FFEFD5;
10
            width: 300px;
11
            padding: 10px;
12
            outline: none;
13
            transition: 0.5s;
14
        }
15
        input:focus { border: 3px solid #CD853F; }
16
    </style>
17
</head>
18
​
19
<body>
20
​
21
    <h1>input 요소의 스타일 설정</h1>
22
    <form>
23
        아래의 입력 양식을 마우스로 클릭해 보세요!<br><br>
24
        <input type="text" id="email" name="email" value="마우스로 클릭해 보세요!">
25
    </form>
26
​
27
</body>
28
​
29
</html>