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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        label {
            display: block; /* 새라인에서 시작*/
            padding: 5px;
        }
        
        label span {
            display: inline-block;
            width: 90px;
            text-align: right;
            padding: 10px;
        }
        
        input[type=text] {
            color: red;
        }
        
        input:hover, textarea:hover {
            background: aliceblue;
        }
        
        input[type=text]:focus, input[type=email]:focus {
            font-size: 120%;
        }
 
    </style>
</head>
<body>
    <h3>CONTACT US</h3><hr>
    <form>
        <label>
            <span>Name</span>
            <input type="text" placeholder="Elvis">
        </label>
        <label>
            <span>Email</span>
            <input type="email" placeholder="Elvis@graceland.com">
        </label>
        <label>
            <span>Comment</span>
            <textarea placeholder="메세지를 남겨주세요"></textarea>
        </label>
        <label>
            <span><input type="submit" value="submit"></span>
        </label>
    </form>
</body>
</html>
 cs

위 코드를 적용하면 크롬에서 아래와 같이 나옵니다.

'Web > Html_Css' 카테고리의 다른 글

자바스크립트 없이 onmouse효과주기  (0) 2020.03.12
onclick으로 페이지 내용 바꾸기  (0) 2020.03.12
테이블 꾸미기  (0) 2020.03.06
nav 태그, 리스트를 메뉴처럼  (0) 2020.03.06
텍스트에 마우스 올렸을 때 마우스 모양 변경  (0) 2020.03.06
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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table { /* 이중 테두리를 제거 */
            border-collapse: collapse;
        }
 
        td, th {
            text-align: left;
            padding: 5px;
            height: 15px;
            width: 100px;
        }
 
        thead, tfoot {
            background: darkgray;
            color: yellow;
        }
 
        tbody tr:nth-child(even){ /* even은 짝수 라인에 적용 */
            background: beige;
        }
        tbody tr:nth-child(odd){ /* odd는 홀수 라인에 적용 */
            background: dimgrey;
        }
        tbody tr:hover {
            background: pink;
        }
    </style>
</head>
<body>
    <h3>1학기 성적</h3><hr>
    <table border="1">
        <thead>
            <tr>
                <th>이름</th>
                <th>HTML</th>
                <th>CSS</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th>합</th>
                <th>310</th>
                <th>249</th>
            </tr>
        </tfoot>
        <tbody>
            <tr>
                <td>황기태</td>
                <td>80</td>
                <td>70</td>
            </tr>
            <tr>
                <td>이재문</td>
                <td>95</td>
                <td>99</td>
            </tr>    
            <tr>
                <td>이병은</td>
                <td>85</td>
                <td>90</td>
            </tr>
            <tr>
                <td>김남윤</td>
                <td>50</td>
                <td>40</td>
            </tr>
        </tbody>
    </table>
</body>
</html>
 cs

위 코드를 적용하면 크롬에서 아래와 같이 나옵니다.

--

마우스를 올릴시 (김남윤)

'Web > Html_Css' 카테고리의 다른 글

onclick으로 페이지 내용 바꾸기  (0) 2020.03.12
form 꾸미기  (0) 2020.03.06
nav 태그, 리스트를 메뉴처럼  (0) 2020.03.06
텍스트에 마우스 올렸을 때 마우스 모양 변경  (0) 2020.03.06
텍스트 그림자 만들기  (0) 2020.03.06
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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #mbar{background: olive;}
 
        #mbar ul{
            margin: 0;
            padding: 0;
            width: 567px;
        }
        #mbar ul li {
            display: inline-block; /*새줄로 넘어가지 않게*/
            list-style-type: none;
            padding: 0px 15px;
        }
        #mbar ul li a{
            color: white;
            text-decoration: none;
        }
 
        #mbar ul li a:hover{
            color: violet;
            text-decoration: none;
        }
    </style>
</head>
<body>
    <nav id="mbar">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Espresso</a></li>
            <li><a href="#">Cappuccino</a></li>
            <li><a href="#">Cafe Latte</a></li>
            <li><a href="#">F.A.Q</a></li>
        </ul>
    </nav>
</body>
</html>
 cs

위 코드를 적용하면 크롬에서 아래와 같이 나옵니다.

'Web > Html_Css' 카테고리의 다른 글

form 꾸미기  (0) 2020.03.06
테이블 꾸미기  (0) 2020.03.06
텍스트에 마우스 올렸을 때 마우스 모양 변경  (0) 2020.03.06
텍스트 그림자 만들기  (0) 2020.03.06
div 박스에 배경 꾸미기  (0) 2020.03.06
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h3>마우스 커서</h3><hr>
    <p style="cursor: crosshair;">마우스커서</p>
    <p style="cursor: help;">마우스커서</p>
    <p style="cursor: pointer;">마우스커서</p>
    <p style="cursor: progress;">마우스커서</p>
    <p style="cursor: n-resize;">마우스커서</p>
</body>
</html>
 cs

 

'Web > Html_Css' 카테고리의 다른 글

테이블 꾸미기  (0) 2020.03.06
nav 태그, 리스트를 메뉴처럼  (0) 2020.03.06
텍스트 그림자 만들기  (0) 2020.03.06
div 박스에 배경 꾸미기  (0) 2020.03.06
border 둥근 모서리 테두리  (0) 2020.03.06
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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {font: normal 24px verdana;}
        .dropText {text-shadow: 3px 3px;}
        .redText {text-shadow: 3px 3px red;}
        .blurText {text-shadow: 3px 3px 5px skyblue;}
        .glowEffect {text-shadow: 0px 0px 3px red;}
        .wordArtEffect {
            color: white;
            text-shadow: 0px 0px 3px darkblue;
            }
        .threeDEffect {
            color: white;
            text-shadow: 2px 2px 4px black;
            }
 
        .multiEffect {
            color: yellow;
            text-shadow: 2px 2px 4px black,
                0 0 25px blue,
                0 0 5px darkblue;
            }
        
    </style>
</head>
<body>
    <h3>텍스트 그림자 만들기</h3>
    <hr>
    <div class="dropText">Drop Shadow</div>
    <div class="redText">Color Shadow</div>
    <div class="blurText">Blur Shadow</div>
    <div class="glowEffect">Glow Effect</div>
    <div class="wordArtEffect">WordArt Effect</div>
    <div class="threeDEffect">3D Effect</div>
    <div class="multiEffect">Multiple Shadow Effect</div>
</body>
</html>
 cs

위 코드를 적용하면 크롬에서 아래와 같이 나옵니다.

'Web > Html_Css' 카테고리의 다른 글

nav 태그, 리스트를 메뉴처럼  (0) 2020.03.06
텍스트에 마우스 올렸을 때 마우스 모양 변경  (0) 2020.03.06
div 박스에 배경 꾸미기  (0) 2020.03.06
border 둥근 모서리 테두리  (0) 2020.03.06
border 테두리  (0) 2020.03.06
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 lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div { background-color: skyblue;
            background-size: 100px 100px;
            background-image: url("media/spongebob.png");
            background-repeat: repeat-y;
            background-position: center center;
 
            width: 200px;
            height: 200px;
            color: blueviolet;
            font-size: 16px;
        }
    </style>
</head>
<body>
    <h3>div 박스에 배경 꾸미기</h3>
    <div>SpongeBob is an over-optimistic
        sponge that annoys other characters. </div>
</body>
</html>
 cs

위 코드를 적용하면 크롬에서 아래와 같이 나옵니다.

'Web > Html_Css' 카테고리의 다른 글

텍스트에 마우스 올렸을 때 마우스 모양 변경  (0) 2020.03.06
텍스트 그림자 만들기  (0) 2020.03.06
border 둥근 모서리 테두리  (0) 2020.03.06
border 테두리  (0) 2020.03.06
이미지 border, margin  (0) 2020.03.06
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p {background: yellowgreen;
        padding: 20px;
        width: 300px;
        }
 
        #r1 {border-radius: 50px;}
        #r2 {border-radius: 20px;
            border-style: dotted;
        }
    </style>
</head>
<body>
    <h3>둥근 모서리 테두리</h3>
    <p id="r1">반지름 50픽셀의 둥근 모서리</p>
    <p id="r2">반지름 50픽셀의 둥근 점선 모서리</p>
</body>
</html>
 cs

위 코드를 적용하면 크롬에서 아래와 같이 나옵니다.

'Web > Html_Css' 카테고리의 다른 글

텍스트 그림자 만들기  (0) 2020.03.06
div 박스에 배경 꾸미기  (0) 2020.03.06
border 테두리  (0) 2020.03.06
이미지 border, margin  (0) 2020.03.06
border, margin  (0) 2020.03.06
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>다양한 테두리</title>
</head>
<body>
<h3>다양한 테두리</h3>
<hr>
<p style="border: 3px solid blue">3픽셀 soild</p>
<p style="border: 3px none blue">3픽셀 none</p>
<p style="border: 3px hidden blue">3픽셀 hidden</p>
<p style="border: 3px dotted blue">3픽셀 dotted</p>
<p style="border: 3px dashed blue">3픽셀 dashed</p>
<p style="border: 3px double blue">3픽셀 double</p>
<p style="border: 15px groove yellow">15픽셀 groove</p>
<p style="border: 15px ridge yellow">15픽셀 ridge</p>
<p style="border: 15px inset yellow">15픽셀 inset</p>
<p style="border: 15px outset yellow">15픽셀 outset</p>
</body>
</html>
 
 cs

위 코드를 적용하면 크롬에서 아래와 같이 나옵니다.

'Web > Html_Css' 카테고리의 다른 글

div 박스에 배경 꾸미기  (0) 2020.03.06
border 둥근 모서리 테두리  (0) 2020.03.06
이미지 border, margin  (0) 2020.03.06
border, margin  (0) 2020.03.06
css 폰트 예제1  (0) 2020.03.05

+ Recent posts

티스토리툴바