소스

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link href="css/grid.css" rel="stylesheet" />
    <style>
        
    </style>
    </head>
<body>
    <div class="container_12">
        <div class="grid_1">1</div>
        <div class="grid_1">2</div>
        <div class="grid_1">3</div>
        <div class="grid_1">4</div>
        <div class="grid_1">5</div>
        <div class="grid_1">6</div>
        <div class="grid_1">7</div>
        <div class="grid_1">8</div>
        <div class="grid_1">9</div>
        <div class="grid_1">10</div>
        <div class="grid_1">11</div>
        <div class="grid_1">12</div>
        <!--<div class="grid_1">13</div>-->
        
        <div class="grid_2">1</div>
        <div class="grid_2">2</div>
        <div class="grid_2">3</div>
        <div class="grid_2">4</div>
        <div class="grid_2">5</div>
        <div class="grid_2">6</div>
        
        <div class="grid_3">1</div>
        <div class="grid_3">2</div>
        <div class="grid_3">3</div>
        <div class="grid_3">4</div>
        
        <div class="grid_12">1</div>
        
    </div>
</body>
</html>
cs

결과

결과창은 grid_12 부분의 공간을 보여주는것이다

위의 소스에서 주석처리한부분을 풀어보면 12다음에 13은 아래로 한칸 내려가서 표현된다.


* 해당 파일은 <link href="css/grid.css" rel="stylesheet" /> 가 필요하다. grid.css를 다운받아야 한다.

css.zip

 

공간할당은 아래와 같다.

위에서부터 grid_1,grid_2,,,grid_12 순서이다.


저작자표시 비영리 변경금지

'* Programming > HTML&CSS' 카테고리의 다른 글

[HTML/CSS] 기본적인 웹 화면 만들기  (0) 2016.09.27
[HTML/CSS] 그리드(grid)를 이용한 반응형 웹  (0) 2016.09.27
[HTML/CSS] 반응형 웹 (모바일 환경&태블릿 환경&PC 환경)  (0) 2016.09.27
[HTML/CSS] 위치 변경하기  (1) 2016.09.26
[HTML/CSS] 제휴 사이트 연결하기  (0) 2016.09.26

<body>부분소스

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<body>
    <div id="header">
        <h1>GOOGLE</h1>
    </div>
    <div id="menu">
        <ul>
            <li id="mn1"><a href="#">menu1</a></li>
            <li id="mn2"><a href="#">menu2</a></li>
            <li id="mn3"><a href="#">menu3</a></li>
            <li id="mn4"><a href="#">menu4</a></li>
        </ul>
    </div>
    <div id="content">
        <div></div>
        <h1>환영합니다</h1>
        <p>한빛 교육센터에 오신것을 환영합니다</p>
        <p>이곳에는 내용이 쏼라쏼라</p><br/>
    </div>
    <div id="footer">
        정책 및 약관|회사소개|광고|마이비즈니스|제휴제안|이용약관|개인정보취급방침|청소년보호정책|고객센터
    </div>
</body>
cs


<head>부분소스

1. PC 환경

소스

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
        @media screen and (min-width:1024px){
            /*pc 환경*/
            #header{
                width: 100%;
                height: 80px;
                background-image: url(googlelogo.png);
                background-repeat: no-repeat;
                background-size:180px 70px;
            }
            #header>h1{
                position: absolute;
                left: -999px;
            }
            #menu{
                background-color: lightskyblue;
                overflow: hidden;
            }
            #menu>ul{
                width: 400px;
                margin: 0px auto;
            }
            #menu>ul>li{
                float: left;
                list-style: none;
            }
            #menu>ul>li>a{
                text-decoration: none;
                border-left: solid white 5px;
                border-right: solid white 5px;
                display: inline-block;
                width: 100px;
                height: 30px;
                box-sizing: border-box;
                text-align: center;
                color: floralwhite;
                font-weight: bold;
            }
            #menu>ul>li>a:hover{
                color: royalblue;
            }
            #content{
                clear: both;
            }
            #content>div{
                width: 100%;
                height: 500px;
                background-image: url(jung2.png);
                background-repeat: no-repeat;
                background-size: 100%;
            }
        }
cs

결과


2. 태블릿 환경

소스

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
        @media screen and (min-width:400px) and (max-width:1023px){
            /*태블릿 환경*/
            #header{
                width: 100%;
                height: 80px;
                background-image: url(googlelogo.png);
                background-repeat: no-repeat;
                background-size: 180px 70px;
            }
            #header>h1{
                position: absolute;
                left: -999px;
            }
            #menu>ul>li{
                background-color: darksalmon;
                display: inline-block;
                width: 50%;
                height: 50px;
                border-bottom: solid white 3px;
            }
            #menu>ul>li>a{
                display: inline-block;
                width: 100%;
                height: 100%;
                text-align: center;
                text-decoration: none;
                font-size: 1.5em;
                color: white;
                line-height: 50px;
                font-weight: bold;
                /*text-transform: uppercase;*/
                font-variant: small-caps;
            }
        }
cs

결과


3. 모바일 환경

소스

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
        @media screen and (max-width:399px){
            /*모바일 환경*/
            #header>h1{
                text-align: center;
            }
            #menu>ul{
                /*display: none;*/
            }
            #menu>ul>li{
                background-color: darksalmon;
                border-left: solid red 10px;
                border-bottom: solid white 3px;
            }
             #menu>ul>li>a{
                text-decoration: none;
                color: white;
            }
        }
cs

결과

기준 px를 잡아 모바일 혹은 태블릿의 크기를  @media screen and (max-width:399px) 혹은  @media screen and (min-width:400px)

등으로 잡아 작성한 것이다.

웹창을 늘렸다 줄였다하는 대로 반응하는 반응형 웹이다.


전체소스

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
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>반응형 웹</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        @media screen and (max-width:399px){
            /*모바일 환경*/
            #header>h1{
                text-align: center;
            }
            #menu>ul{
                /*display: none;*/
            }
            #menu>ul>li{
                background-color: darksalmon;
                border-left: solid red 10px;
                border-bottom: solid white 3px;
            }
             #menu>ul>li>a{
                text-decoration: none;
                color: white;
            }
        }
        @media screen and (min-width:400px) and (max-width:1023px){
            /*태블릿 환경*/
            #header{
                width: 100%;
                height: 80px;
                background-image: url(googlelogo.png);
                background-repeat: no-repeat;
                background-size: 180px 70px;
            }
            #header>h1{
                position: absolute;
                left: -999px;
            }
            #menu>ul>li{
                background-color: darksalmon;
                display: inline-block;
                width: 50%;
                height: 50px;
                border-bottom: solid white 3px;
            }
            #menu>ul>li>a{
                display: inline-block;
                width: 100%;
                height: 100%;
                text-align: center;
                text-decoration: none;
                font-size: 1.5em;
                color: white;
                line-height: 50px;
                font-weight: bold;
                /*text-transform: uppercase;*/
                font-variant: small-caps;
            }
        }
        @media screen and (min-width:1024px){
            /*pc 환경*/
            #header{
                width: 100%;
                height: 80px;
                background-image: url(googlelogo.png);
                background-repeat: no-repeat;
                background-size:180px 70px;
            }
            #header>h1{
                position: absolute;
                left: -999px;
            }
            #menu{
                background-color: lightskyblue;
                overflow: hidden;
            }
            #menu>ul{
                width: 400px;
                margin: 0px auto;
            }
            #menu>ul>li{
                float: left;
                list-style: none;
            }
            #menu>ul>li>a{
                text-decoration: none;
                border-left: solid white 5px;
                border-right: solid white 5px;
                display: inline-block;
                width: 100px;
                height: 30px;
                box-sizing: border-box;
                text-align: center;
                color: floralwhite;
                font-weight: bold;
            }
            #menu>ul>li>a:hover{
                color: royalblue;
            }
            #content{
                clear: both;
            }
            #content>div{
                width: 100%;
                height: 500px;
                background-image: url(jung2.png);
                background-repeat: no-repeat;
                background-size: 100%;
            }
        }
    </style>
</head>
<body>
    <div id="header">
        <h1>GOOGLE</h1>
    </div>
    <div id="menu">
        <ul>
            <li id="mn1"><a href="#">menu1</a></li>
            <li id="mn2"><a href="#">menu2</a></li>
            <li id="mn3"><a href="#">menu3</a></li>
            <li id="mn4"><a href="#">menu4</a></li>
        </ul>
    </div>
    <div id="content">
        <div></div>
        <h1>환영합니다</h1>
        <p>한빛 교육센터에 오신것을 환영합니다</p>
        <p>이곳에는 내용이 쏼라쏼라</p><br/>
    </div>
    <div id="footer">
         정책 및 약관|회사소개|광고|마이비즈니스|제휴제안|이용약관|개인정보취급방침|청소년보호정책|고객센터
    </div>
</body>
</html>
cs


저작자표시 비영리 변경금지

'* Programming > HTML&CSS' 카테고리의 다른 글

[HTML/CSS] 그리드(grid)를 이용한 반응형 웹  (0) 2016.09.27
[HTML/CSS] 그리드(grid)  (0) 2016.09.27
[HTML/CSS] 위치 변경하기  (1) 2016.09.26
[HTML/CSS] 제휴 사이트 연결하기  (0) 2016.09.26
[HTML/CSS] 숨김기능&선택지시자 (+와 ~의 차이)  (0) 2016.09.26

기본 소스와 결과

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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        body{
            margin: 0px;
            padding: 0px;
        }
        div{
            width: 100px;
            height: 100px;
        }
        div:nth-child(1){
            background-color: lightpink;
        }
        div:nth-child(2){
            background-color: lightgreen;
        }
        div:nth-child(3){
            background-color: lightgray;
        }
        div:nth-child(4){
            background-color: lightyellow;
        }
        div:nth-child(5){
            background-color: lightblue;
        }
    </style>
</head>
<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
</body>
</html>
cs


1번 : 왼쪽으로 300px 만큼 이동

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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        body{
            margin: 0px;
            padding: 0px;
        }
        div{
            width: 100px;
            height: 100px;
        }
        div:nth-child(1){
            background-color: lightpink;
            margin-left: 300px;
        }
        div:nth-child(2){
            background-color: lightgreen;
            position: static;    /*디폴트값*/
        }
        div:nth-child(3){
            background-color: lightgray;
        }
        div:nth-child(4){
            background-color: lightyellow;
        }
        div:nth-child(5){
            background-color: lightblue;
        }
    </style>
</head>
<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
</body>
</html>
cs

결과

2번 : position 의 디폴트 값으로 설정(변화없음)

3번 : position 의 절대 값으로 설정

소스

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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        body{
            margin: 0px;
            padding: 0px;
        }
        div{
            width: 100px;
            height: 100px;
        }
        div:nth-child(1){
            background-color: lightpink;
            margin-left: 300px;
        }
        div:nth-child(2){
            background-color: lightgreen;
            position: static;    /*디폴트값*/
        }
        div:nth-child(3){
            background-color: lightgray;
            position: absolute;    /*절대값으로 위치를 설정*/
            left: 300px;    /* x축 */
            top: 400px;    /* y축 (작성하지 않는다면 원래의 위치로 설정됨 */
        }
        div:nth-child(4){
            background-color: lightyellow;
        }
        div:nth-child(5){
            background-color: lightblue;
        }
    </style>
</head>
<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
</body>
</html>
cs

결과

4번 : 변경사항없음

5번 : position 의 상대 값으로 설정

소스

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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        body{
            margin: 0px;
            padding: 0px;
        }
        div{
            width: 100px;
            height: 100px;
        }
        div:nth-child(1){
            background-color: lightpink;
            margin-left: 300px;
        }
        div:nth-child(2){
            background-color: lightgreen;
            position: static;    /*디폴트값*/
        }
        div:nth-child(3){
            background-color: lightgray;
            position: absolute;    /*절대값으로 위치를 설정*/
            left: 300px;    /* x축 */
            top: 400px;    /* y축 (작성하지 않는다면 원래의 위치로 설정됨 */
        }
        div:nth-child(4){
            background-color: lightyellow;
        }
        div:nth-child(5){
            background-color: lightblue;
            position: relative;    /*상대좌표로서 원래위치에서 변경*/
            left: 50px;
            top: 50px;
        }
    </style>
</head>
<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
</body>
</html>
cs

결과



저작자표시 비영리 변경금지

'* Programming > HTML&CSS' 카테고리의 다른 글

[HTML/CSS] 그리드(grid)  (0) 2016.09.27
[HTML/CSS] 반응형 웹 (모바일 환경&태블릿 환경&PC 환경)  (0) 2016.09.27
[HTML/CSS] 제휴 사이트 연결하기  (0) 2016.09.26
[HTML/CSS] 숨김기능&선택지시자 (+와 ~의 차이)  (0) 2016.09.26
[HTML/CSS] 상단 이미지 고정하기  (0) 2016.09.22

제휴 사이트 연결하기

예시로 네이버/다음/서울시청/현재 블로그 사이트를 들 것이다.


소스

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        #content a:after{
            content: '-' attr(href);
        }
    </style>
</head>
<body>
    <div id="content">
        <p><a href="http://naver.com">네이버</a></p>
        <p><a href="http://daum.net">다음</a></p>
        <p><a href="http://www.seoul.go.kr/">서울시청</a></p>
        <p><a href="http://programacion.tistory.com/">블로그</a></p>
    </div>
</body>
</html>
cs

결과

버튼을 클릭하면 해당사이트로 넘어간다




저작자표시 비영리 변경금지

'* Programming > HTML&CSS' 카테고리의 다른 글

[HTML/CSS] 반응형 웹 (모바일 환경&태블릿 환경&PC 환경)  (0) 2016.09.27
[HTML/CSS] 위치 변경하기  (1) 2016.09.26
[HTML/CSS] 숨김기능&선택지시자 (+와 ~의 차이)  (0) 2016.09.26
[HTML/CSS] 상단 이미지 고정하기  (0) 2016.09.22
[HTML/CSS] 테이블 만들기(지시자)  (0) 2016.09.22

기본 소스와 결과

소스

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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        div{
            width: 100px;
            height: 100px;
        }
        div:nth-child(1){
            background-color: lightpink;
        }
        div:nth-child(2){
            background-color: lightgreen;
        }
        div:nth-child(3){
            background-color: lightgray;
        }
        div:nth-child(4){
            background-color: lightyellow;
        }
        div:nth-child(5){
            background-color: lightblue;
        }
    </style>
</head>
<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
</body>
</html>
cs

결과


1. 숨김기능

소스

* display: none;  공간도 제거되며 숨겨주는 기능

* visibility: hidden; 공간은 존재하며 숨겨주는 기능

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>
<head>
    <meta charset="utf-8">
    <style>
        div{
            width: 100px;
            height: 100px;
        }
        div:nth-child(1){
            background-color: lightpink;
        }
        div:nth-child(2){
            background-color: lightgreen;
            display: none;    /*존재가 사라짐. 공간도 제거*/
        }
        div:nth-child(3){
            background-color: lightgray;
        }
        div:nth-child(4){
            background-color: lightyellow;
            visibility: hidden;    /*숨김. 공간은 남음*/
        }
        div:nth-child(5){
            background-color: lightblue;
        } 
    </style>
</head>
<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
</body>
</html>
cs

2번의 공간이 제거됨을 볼수있다.

4번은 공간은 존재하지만 숫자4와 배경색이 보이지않는다.

결과


2. 선택지시자 (+와 ~의 차이)

소스1

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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        div{
            width: 100px;
            height: 100px;
        }
        div:nth-child(1){
            background-color: lightpink;
        }
        div:nth-child(2){
            background-color: lightgreen;
        }
        div:nth-child(3){
            background-color: lightgray;
        }
        div:nth-child(4){
            background-color: lightyellow;
        }
        div:nth-child(5){
            background-color: lightblue;
        }
        div:nth-child(2)+div{
            background-color: lightgreen;
        }
        /*div:nth-child(1)+div~div{
            background-color: lightgray;
        }*/  
    </style>
</head>
<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
</body>
</html>
cs

nth-child(2) 는 2번의 위치를 말하는것이고

+div 는 다음 div 를 말하는것으로 결과적으로는 3번의 위치를 말한다.

        div:nth-child(2)+div{
            background-color: lightgreen;
        }

결과1


소스2

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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        div{
            width: 100px;
            height: 100px;
        }
        div:nth-child(1){
            background-color: lightpink;
        }
        div:nth-child(2){
            background-color: lightgreen;
        }
        div:nth-child(3){
            background-color: lightgray;
        }
        div:nth-child(4){
            background-color: lightyellow;
        }
        div:nth-child(5){
            background-color: lightblue;
        }
        div:nth-child(2)+div{
            background-color: lightgreen;
        }
        div:nth-child(1)+div~div{
            background-color: lightgray;
        }
    </style>
</head>
<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
</body>
</html>
cs

nth-child(1) 는 1번의 위치를 말하는것이고

+div 는 다음 div 를 말하는것으로 2번의 위치이다. ~div란 뜻은 2번의 위치(해당위치)의 모든 자식을 뜻해서 결과적으로는 3,4,5번까지 모두 해당된다.

        div:nth-child(1)+div~div{
            background-color: lightgray;
        }

결과2

위의 기능을 덮어써 오버라이드 되었다.


저작자표시 비영리 변경금지

'* Programming > HTML&CSS' 카테고리의 다른 글

[HTML/CSS] 위치 변경하기  (1) 2016.09.26
[HTML/CSS] 제휴 사이트 연결하기  (0) 2016.09.26
[HTML/CSS] 상단 이미지 고정하기  (0) 2016.09.22
[HTML/CSS] 테이블 만들기(지시자)  (0) 2016.09.22
[HTML/CSS] 지시자 우선순위  (0) 2016.09.22

+ Recent posts

티스토리툴바