예제 5-11. CSS3 스타일로 폼 꾸미기. 4. 폼 꾸미기

WEB/CSS3-CONCEPT 2017. 11. 6. 18:38 |

4. 폼 꾸미기


* input[type=text]로 폼 요소에 스타일 입히기

1
2
3
4
input[type=text] // 속성 셀렉터 : <input>의 type 속성이 text인 경우에 적용
{
    color : red;
}
cs

그림 5-21. [type=text] 셀렉터로 입력 폼의 글자색을 red로 꾸민 예

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>폼 스타일 주기</title>
<style>
input[type=text] {
    color : red;
}
</style>
</head>
<body>
<form>
    <label>
        이름 : <input type="text" placeholder="Elvis">
    </label>
</form>
</body>
</html>
 
cs



* input[type=text]로 폼 요소의 테두리 만들기

1
2
3
4
5
input[type=text] // 속성 셀렉터 : <input>의 type 속성이 text인 경우에 적용
{
    border : 2px solid skyblue;
    border-radius : 5px;
}
cs


그림  5-22. [type=text] 셀렉터를 입력 폼에 테두리를 꾸민 예

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
<head><title>폼 스타일 주기</title>
<style>
input[type=text] {
    border : 2px solid skyblue;
    border-radius : 5px;
}
</style>
</head>
<body>
<form>
    <label>
        이름 : <input type="text" placeholder="Elvis">
    </label>    
</form>
</body>
</html>
 
cs



* 폼 요소에 마우스 처리

- 마우스가 올라올 때, :hover

1
2
3
4
5
6
7
8
input[type=text]
{
    color : red;
}
input[type=text]:hover
{
    background : aliceblue;
}
cs


그림 5-23. :hover를 이용하여 입력 창에 마우스가 올라오면 배경색을 aliceblue로 칠하기

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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>:focus로 폼 스타일</title>
<style>
input[type=text] {
    color : red;
}
input[type=text]:hover {
    background : aliceblue;
}
input[type=text]:focus {
    font-size : 120%;
}
</style>
</head>
<body>
<form>
    <label>
        이름 : <input type="text" placeholder="Elvis">
    </label>
</form>
</body>
</html>
 

cs






- 입력할 때, :focus

그림 5-24. :focus를 이용하여 포커스를 받고 입력하는 동안 120%로 글자 키우기

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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>:focus로 폼 스타일</title>
<style>
input[type=text] {
    color : red;
}
input[type=text]:hover {
    background : aliceblue;
}
input[type=text]:focus {
    font-size : 120%;
}
</style>
</head>
<body>
<form>
    <label>
        이름 : <input type="text" placeholder="Elvis">
    </label>
</form>
</body>
</html>
 
cs





예제 5-11. CSS3 스타일로 폼 꾸미기

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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>폼 스타일 주기</title>
<style>
input[type=text] { /* text 창에만 적용 */
    color : red;
}
input:hover, textarea:hover { /* 마우스 올라 올 때 */
    background : aliceblue;
}
input[type=text]:focus, input[type=email]:focus { /* 포커스 받을 때 */
    font-size : 120%;
}
label {
    display : block; /* 새 라인에서 시작 */
    padding : 10px;
}
label span {
    float : left;
    width : 90px;
    text-align : right;
    padding : 10px;
}
</style></head>
<body>
<h3>CONTACT US</h3>
<hr>
<form>
    <label>
        <span>Name</span><input type="text" placeholder="Elvis"><br>
    </label>
    <label>
        <span>Email</span><input type="email" placeholder="elvis@graceland.com">
    </label>
    <label>
        <span>Comment</span><textarea placeholder="메시지를 남겨주세요"></textarea>
    </label>
    <label>
        <span></span><input type="submit" value="submit">
    </label>
</form>
</body></html>
 
cs



저작자표시 비영리 동일조건

'WEB > CSS3-CONCEPT' 카테고리의 다른 글

예제 5-5. 유동 배치 - float : left 혹은 float : right  (0) 2017.12.15
예제 5-12. 애니메이션 만들기 연습. 예제 5-13. font-size에 대한 전환 효과 만들기. 예제 5-14. 다양한 변환 사례. 5. CSS3 스타일로 태그에 동적 변화 만들기  (0) 2017.11.06
예제 5-10. 마우스가 올라오면 행의 배경색이 변하는 표 만들기. 3. 표 꾸미기  (0) 2017.11.06
예제 5-9. CSS3 스타일을 응용하여 리스트로 메뉴 만들기  (0) 2017.11.06
예제 4-21. 마우스 커서 제어, cursor  (0) 2017.11.04
Posted by 너래쟁이
:

티스토리툴바