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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!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: yellow;
            padding: 20px;
            border: 5px dotted red;
            margin: 30px;
        }
    </style>
</head>
<body>
    <div>
        <img src="media/mio.png" alt="고양이눈">
    </div>
</body>
</html>
 cs

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

 

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

border 둥근 모서리 테두리  (0) 2020.03.06
border 테두리  (0) 2020.03.06
border, margin  (0) 2020.03.06
css 폰트 예제1  (0) 2020.03.05
css3 색 color 활용1  (0) 2020.03.05
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
<!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>
        body {background: ghostwhite;}
        span {background: deepskyblue;}
        div.box {
            background: yellow;
            border-style: solid;
            border-color: peru;
            border-width: 30px;
            margin: 40px;
            padding: 20px;
        }
    </style>
</head>
<body>
    <div class="box">
        <span>DIVDIVDIV</span>
    </div>
</body>
</html>
 cs

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

 

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

border 테두리  (0) 2020.03.06
이미지 border, margin  (0) 2020.03.06
css 폰트 예제1  (0) 2020.03.05
css3 색 color 활용1  (0) 2020.03.05
css 기초 적용 예제2  (0) 2020.03.05
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!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>
        body {font-family: 'Times New Roman', Times, serif;}
        h3 {font: italic bold 40px consolas, sans_serif;}
    </style>
</head>
<body>
    <h3>consolas font</h3>
    <hr>
    <p style="font-weight: 900;">font-weight: 900</p>
    <p style="font-weight: 100;">font-weight: 100</p>
    <p style="font-style: italic;">font-style: italic</p>
    <p style="font-style: oblique;">font-style: oblique</p>
    <p>현재의 크기의
        <span style="font-size: 1.5em;">1.5배</span>크기로
    </p>
</body>
</html>
 cs

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

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

이미지 border, margin  (0) 2020.03.06
border, margin  (0) 2020.03.06
css3 색 color 활용1  (0) 2020.03.05
css 기초 적용 예제2  (0) 2020.03.05
css 기초 적용 예제1 , 콤마, 자손, 자식, id, class  (0) 2020.03.05
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 {
            margin-left: 30px;
            margin-right: 30px;
            margin-bottom: 10px;
            color: white;
        }
    </style>
</head>
<body>
    <h3>CSS3 색 활용</h3>
    <hr>
    <div style="background-color: deepskyblue;">deepskyblue(#00BFFF)</div>
    <div style="background-color: brown;">brown(#A52A2A)</div>
    <div style="background-color: fuchsia;">fuchsia(#FF00FF)</div>
    <div style="background-color: darkorange;">darkorange(#FF8C)</div>
    <div style="background-color: #008B8B;">darkcyan(#008B8B)</div>
    <div style="background-color: #6B8E23;">oliverab(#6B8E23)</div>
</body>
</html>
 cs

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

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

border, margin  (0) 2020.03.06
css 폰트 예제1  (0) 2020.03.05
css 기초 적용 예제2  (0) 2020.03.05
css 기초 적용 예제1 , 콤마, 자손, 자식, id, class  (0) 2020.03.05
Css 스타일 맛보기  (0) 2020.03.05
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
<!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>
        /* 콤마는 각각 적용 */
        h3, li{color: brown;}
        
        /* 자손 : 태그의 하위 태그(와 그 모든 하위)를 선택하여 적용 */
        ul strong {color: dodgerblue;}
 
        /* 자식 : 태그의 하위 특정태그를 선택하여 적용 */
        div > div > strong {background-color: yellow;} 
        
        body.main {
            background: aliceblue;
        }
        
        /* id속성을 가진 태그를 꾸미기 위해서는 아이디명에 #을 붙여서 적용 */
        #list {background: mistyrose;} 
 
        #list span {color: forestgreen;}
 
        /* class속성을 가진 태그를 꾸미기 위해서는 클래스명에 .을 붙여서 적용 */
        .warning {color: red;} 
 
        /* 가상클래스를 이용하여 스타일 적용 가능(태그 뒤에 :(콜론)으로 구분)  */
        h3:first-letter {color: red;} 
        li:hover{background: yellowgreen;}
    </style>
</head>
<body class="main">
    <h3>Web Programming</h3>
    <hr>
    <div> 
        <div>2학기 <strong>학습 내용</strong>입니다.</div>
        <ul id="list">
             <li><span>HTML5</span></li>
            <li><strong>CSS</strong></li>
            <li>JAVASCRIPT</li>
        </ul>
        <div class="warning">60점 이하는 F</div>
    </div>
</body>
</html>
 cs

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

--

마우스를 li태그 위치에 올릴경우 hover효과 발생

 

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

css 폰트 예제1  (0) 2020.03.05
css3 색 color 활용1  (0) 2020.03.05
css 기초 적용 예제1 , 콤마, 자손, 자식, id, class  (0) 2020.03.05
Css 스타일 맛보기  (0) 2020.03.05
form 태그 - 날짜, 숫자 입력, 이메일, 홈페이지, 전화번호, 검색어  (0) 2020.03.05

+ Recent posts

티스토리툴바