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
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
<!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;
        }
        
        #list {background: mistyrose;} /* id속성을 가진 태그를 꾸미기 위해서는 아이디명에 #을 붙여서 적용 */
 
        #list span {color: forestgreen;}
 
        .warning {color: red;} /* class속성을 가진 태그를 꾸미기 위해서는 클래스명에 .을 붙여서 적용 */
 
    </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

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

 

 

 


id, class 차이는 아래의 링크로 확인

https://blog.naver.com/juyoung1704/221634896152

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

css3 색 color 활용1  (0) 2020.03.05
css 기초 적용 예제2  (0) 2020.03.05
Css 스타일 맛보기  (0) 2020.03.05
form 태그 - 날짜, 숫자 입력, 이메일, 홈페이지, 전화번호, 검색어  (0) 2020.03.05
form태그와 input 태그의 여러가지 타입 type, select태그  (0) 2020.03.04
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>
        /* css주석 */
        body {background-color: mistyrose;}
        h3 {color: purple;}
        hr {border: 5px solid yellowgreen;}
        span {color: blue; font-size: 20px;}
    </style>
</head>
<body>
    <h3>Css 스타일 맛보기</h3><hr>
    <p>나는  <span>웹프로그래밍</span>을 좋아합니다.</p>
</body>
</html>
 
<!--
    css 꾸미는 방법 3가지
    1.태그에 속성으로 입력
    2.head태그안에 style태그를 만들어서 작성
    3.따로 파일을 만들거나 링크를 이용
-->
 cs

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

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

css 기초 적용 예제2  (0) 2020.03.05
css 기초 적용 예제1 , 콤마, 자손, 자식, id, class  (0) 2020.03.05
form 태그 - 날짜, 숫자 입력, 이메일, 홈페이지, 전화번호, 검색어  (0) 2020.03.05
form태그와 input 태그의 여러가지 타입 type, select태그  (0) 2020.03.04
검색 페이지 만들기  (0) 2020.03.04
 

날짜


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>
</head>
<body>
    <h3>form에 사용된 시간 날짜 요소</h3>
    <form method="get" >
 
        <!-- 
            날짜요소는 html5에서 새로 추가됨 
            외관상, 편의상 불편하기 때문에 
            자바스크립트로 만든 날짜요소를 넣는 것이 보통
        -->
        month: <input type="month"><br>
        week: <input type="week"><br>
        date: <input type="date"><br>
        time: <input type="time"><br>
        local: <input type="datetime-local"><br>
    </form>
</body>
</html>
 cs

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

 

창을 누를시 나타나는  모습

--

숫자 입력

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!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>
    <form>
        지속시간 <input type="number" min="0.0" max="10.0" step="0.5"><br>
        온도 <input type="range" min="10" max="30" list="temp">
            <datalist id="temp">
                <option value="12" label="Low"></option>
                <option value="20" label="Medium"></option>
                <option value="28" label="High"></option>
            </datalist>
    </form>
</body>
</html>
 cs

 

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

--

이메일 홈페이지 전화번호 검색어

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!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>
    <form>
        <!-- placeholder는 예시나 안내를 보여줌 -->
        email <input type="email" placeholder="id@host"><br>
        홈페이지 <input type="url" placeholder="http://"><br>
        전화번호 <input type="url" placeholder="010-0000-0000"><br>
        검색어 <input type="search" placeholder="검색어"><br>
    </form>
</body>
</html>
 cs

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

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

css 기초 적용 예제1 , 콤마, 자손, 자식, id, class  (0) 2020.03.05
Css 스타일 맛보기  (0) 2020.03.05
form태그와 input 태그의 여러가지 타입 type, select태그  (0) 2020.03.04
검색 페이지 만들기  (0) 2020.03.04
form 폼 태그  (0) 2020.03.04

+ Recent posts

티스토리툴바