relative




소스 코드

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>
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            .box1{
                position: static; /* 기본값 static , 물처럼 흐르듯이 표현*/
                left: 100px;
                width:300px;
                height:300px;
                background-color: yellow; 
                display: inline-block;
            }
            .box2{
                position: relative; /* top left는 static이 아닌 속성에 모두 적용가능 */
                top: 100px;
                left: 100px;
                width:300px;
                height:300px;
                background-color: red; 
                display: inline-block;
            }
            .box3{
                width:300px;
                height:300px;
                background-color: green; 
                display: inline-block;
            }
            .box4{
                width:300px;
                height:300px;
                background-color: blue; 
                display: inline-block;
            }
            .box5{
                width:300px;
                height:300px;
                background-color: bisque; 
                display: inline-block;
            }
        </style>
    </head>
    <body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
    <div class="box5"></div>
    </body>
</html>
 
 
 
cs



box2의 스타일 left, top은 box1과 body에 관계하여 적용되었다.



absolute



소스 코드

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
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            body{
                position: relative;
            }
            .box1{
                
                width:300px;
                height:300px;
                background-color: yellow; 
                display: inline-block;
            }
            /* absolute 는 도화지가 한 장 더 생긴다. */
            .box2{
                position: absolute;
                left: 100px;
                top: 100px;
                width:300px;
                height:300px;
                background-color: red; 
                display: inline-block;
            }
            .box3{
                width:300px;
                height:300px;
                background-color: green; 
                display: inline-block;
            }
            .box4{
                width:300px;
                height:300px;
                background-color: blue; 
                display: inline-block;
            }
            .box5{
                width:300px;
                height:300px;
                background-color: bisque; 
                display: inline-block;
            }
        </style>
    </head>
    <body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
    <div class="box5"></div>
    </body>
</html>
 
 
 
cs


빨간색 box가 다른 box들 위에 나타난다. (새로운 도화지에 그린 느낌)



fixed


코드 그냥 안넣겠습니다 위의 코드에서 box2의 position 속성만 fixed 로 바꿔주면 되니까



스크롤해도 빨간색box가 fixed(고정)된 위치에 나타납니다.

저작자표시

'국비지원 Spring프레임워크 > HTML' 카테고리의 다른 글

input 태그  (0) 2020.11.04
레이아웃 FLEX  (0) 2020.11.03
div로 컨텐츠 위치 조정하기  (0) 2020.11.03
SVG 이미지  (0) 2020.11.03
Form 태그  (0) 2020.11.03



소스 코드

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
<html>
    <head>
        <style>
            .btn1{
                background-color: #FF5A5F;
                border: 0;
                color: white;
                cursor: pointer;
                font-size: 15px;
                font-weight: 700;
                border-radius: 6px;
                outline: 0;
                height: 45px;
                width: 70px;
                box-shadow: 0 2px 2px 0 black;
                opacity: 0.7;
            }
            .btn1:hover{
                opacity: 1;
            }
            .btn_google{
                background-color: white;
                width: 400px;
                height: 45px;
                font-size: 15px;
                font-weight: 700;
                border-radius: 6px;
                cursor: pointer;
            }
            .btn2{
                height: 20px;
                width: 260px;
            }
        </style>
    </head>
    <body>
        <h1>버튼</h1>
        <hr/>
        <button class="btn1">검색</button>
        <h1>구글 버튼</h1>
        <hr/>
        <button class="btn_google">
            <!-- 구글 로고 svg를 검색해서 복붙 했음 -->
        <svg viewBox="0 0 533.5 544.3" style="width: 18px; height: 18px; " xmlns="http://www.w3.org/2000/svg">
            <path d="M533.5 278.4c0-18.5-1.5-37.1-4.7-55.3H272.1v104.8h147c-6.1 33.8-25.7 63.7-54.4 82.7v68h87.7c51.5-47.4 81.1-117.4 81.1-200.2z" fill="#4285f4"/>
            <path d="M272.1 544.3c73.4 0 135.3-24.1 180.4-65.7l-87.7-68c-24.4 16.6-55.9 26-92.6 26-71 0-131.2-47.9-152.8-112.3H28.9v70.1c46.2 91.9 140.3 149.9 243.2 149.9z" fill="#34a853"/>
            <path d="M119.3 324.3c-11.4-33.8-11.4-70.4 0-104.2V150H28.9c-38.6 76.9-38.6 167.5 0 244.4l90.4-70.1z" fill="#fbbc04"/>
            <path d="M272.1 107.7c38.8-.6 76.3 14 104.4 40.8l77.7-77.7C405 24.6 339.7-.8 272.1 0 169.2 0 75.1 58 28.9 150l90.4 70.1c21.5-64.5 81.8-112.4 152.8-112.4z" fill="#ea4335"/>
        </svg>
        구글 계정으로 로그인
        </button>        
        <h1>인풋태그</h1>
        <hr/>
        <input class="btn2" type="text" placeholder="🔍 Search...">
        <!-- 이모지에서 돋보기를 이용 했음 -->
    </body>
</html>
cs



저작자표시

'국비지원 Spring프레임워크 > HTML' 카테고리의 다른 글

position: relative, absolute, fixed  (0) 2020.11.04
레이아웃 FLEX  (0) 2020.11.03
div로 컨텐츠 위치 조정하기  (0) 2020.11.03
SVG 이미지  (0) 2020.11.03
Form 태그  (0) 2020.11.03

FLEX02


각종 애플리케이션에서 레이아웃은 디자인에서 가장 중요한 요소입니다.


그러나 인류는 레이아웃을 코드로 명확히 표현하기 어려움이 있었는데 FLEX가 등장함으로써 많은 문제가 해결 되었다고 합니다. ( 생활코딩 FLEX 강의 : https://opentutorials.org/course/2418/13526 )



소스 코드 

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
<html>
    <head>
        <style>
            /* */
            .flex-container{
                display: flex; /* 콘텐츠들이 블럭에서 인라인으로 바뀌었다 */
                justify-content: space-evenly; /* 기본 진행방향은 가로, 속성값 : flex-start, flex-end, center */
                /* space-around : 가운데 콘텐츠를 기준으로 여백 ,space-between : 모서리 여백 없음 ,space-evenly : 여백이 모두같음*/
            }
            .item{
display: flex;
                border: 5px solid black;
                height: 100px;
                width: 200px;
                justify-content: center; /* 주 축 정렬( 기본 :row ) */
                align-items: center; /* 수직 축 정렬( col ) */
            }
        </style>
    </head>
    <body>
        <div class="flex-container">
            <div class="item">첫번째 박스</div>
            <div class="item">두번째 박스</div>
            <div class="item">세번째 박스</div>
        </div>
    </body>
</html>

cs







ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

FLEX 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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<html>
<head>
    <meta charset="utf-8">
    <style>        
        header{
            background-color: yellow;
            height: 80px;
        }
        /* 콘텐츠 스타일 시작 */
        .content{
            display: flex;
            flex-direction: row; /* 기본값 */
            justify-content: space-between;
            height: 500px;
        }
            .content nav{
                background-color: rgb(167, 170, 5);            
                width: 350px;
            }
            .content aside{
                background-color: red;
                width: 350px;
            }
            /* 메인 스타일 시작 */
            .content main{
                flex-direction: column;
                background-color: green;
                width: 800px;
            }
                .mini-head{
                    background-color: green;
                }
                .mini-main{
                    background-color: white;
                }
                .mini-footer{
                    background-color: red;
                }
                /* 메인 스타일 끝 */
        /* 콘텐츠 스타일 끝 */
        footer{
            background-color: pink;
            height: 80px;
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            header
        </header>
        <section class="content">
            <nav>
                nav
            </nav>
            <main>
                <div class="mini-head">mini-head</div>
                <div class="mini-main">mini-main</div>
                <div class="mini-footer">mini-footer</div>
            </main>
            <aside>
                aside
            </aside>
        </section>
        <footer>
            footer
        </footer>
    </div>
</body>
</html>
cs


ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

FLEX 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
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
<html>
    <head>
        <style>
            body{
                display: flex;
                justify-content: center;
            }
            .container{
                width: auto;
                background-color: gray;
            }
            .header{
                background-color: orange;
                text-align: center;
                margin: 10px;
            }
            .contents{
                background-color: lightgreen;
                text-align: center;
                margin: 10px;
            }
            .button{
                display: flex;
                background-color: lightblue;
                justify-content: center;
                margin: 10px;
            }
            .image-view{
                display: flex;
                width: 1000px;
                background-color: plum;
                flex-direction: column;
            }
            .text{
                text-align: center;
            }
            .image-container{
                display: flex;
                justify-content: space-around;
            }
            div.image1{
                background-image: url("images/london.jpg");
                background-size: cover;
                width: 250px;
                height: 250px;
                margin: 10px 0px;
                
            }
            div.image2{
                background-image: url("images/napa.jpg");
                background-size: cover;
                width: 250px;
                height: 250px;
                margin: 10px 0px;
                
            }
            div.image3{
                background-image: url("images/new-york.jpg");
                background-size: cover;
                width: 250px;
                height: 250px;
                margin: 10px 0px;
            }
            .image-container img{
                width: 250px;
                height: 250px;
                object-fit: fill;
                margin: 10px 0px;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="header">제목</div>
                <div class="contents">콘텐츠</div>
                    <article class="image-view">                                               
                        <div class="text">class image-view width 1000px (pink)</div> 
                        <div class="text">background-image , background-size : cover</div>
                        <div class="image-container">
                            <div class="image1"></div>
                            <div class="image2"></div>
                            <div class="image3"></div>
                        </div>
                    </article>
                <div class="button"><button>버튼</button></div>
 
                <hr>
                
            <div class="header">제목2</div>
                <div class="contents">콘텐츠2</div>
                    <article class="image-view">
                        <div class="text">class image-view width 1000px (pink)</div> 
                        <div class="text">selector img , object-fit : fill</div>
                        <div class="image-container">
                            <div class="image4"><img src="images/san-francisco.jpg" alt=""></div>
                            <div class="image5"><img src="images/san-francisco-2.jpg" alt=""></div>
                            <div class="image6"><img src="images/sonoma.jpg" alt=""></div>
                        </div>
                    </article>
                <div class="button"><button>버튼</button></div>
        </div> <!--container 끝-->
        
    </body>
</html>
cs



마지막시간에 학생들 방치해서 좀 당황했음

저작자표시

'국비지원 Spring프레임워크 > HTML' 카테고리의 다른 글

position: relative, absolute, fixed  (0) 2020.11.04
input 태그  (0) 2020.11.04
div로 컨텐츠 위치 조정하기  (0) 2020.11.03
SVG 이미지  (0) 2020.11.03
Form 태그  (0) 2020.11.03




실습 결과화면 입니다.  바로 소스 코드를 보며 이해 해보겠습니다.



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
<html>
    <head>
        <style>
            /* 인라인블럭 */
            .box{
                display: inline-block;
                border: 1px solid black;
                height: 100px;
                width: 200px;                                
            }
            /* 그냥 div 의 display는 block (부모의 영역 끝까지) */
            /* text-align 은 inline 속성을 가져야만 적용된다 */
            .container{
                display: inline-block;
                text-align: center;
                border: 3px green solid;
                width: 800px;
            }
            .outer{
                margin: 0px auto; /* 세로 가로 */
                text-align: center;
                border: 1px red solid;
                width: 80%;
            }
        </style>
    </head>
    <body>
        <div class="outer">
            <div class="container"> <!-- box클래스의 div들이 글자(?)로 인식되어서 가운데 정렬이 가능하게 된다.-->
                <div class="box">첫번째 박스</div>
                <div class="box">두번째 박스</div>
                <div class="box">세번째 박스</div>
            </div>
        </div>
    </body>
</html>
cs

outer 클래스가 가장 큰 영역을 차지하고있고 (빨간색)


그 안에 container (초록색)


또 그 안에 box (검은색) 이 있습니다.


div안에 자신이 원하는 컨텐츠를 넣어서 스타일을 입혀서 위치를 지정하는게 실무에서도 많이 쓰이는 기본기라고 합니다.

저작자표시

'국비지원 Spring프레임워크 > HTML' 카테고리의 다른 글

input 태그  (0) 2020.11.04
레이아웃 FLEX  (0) 2020.11.03
SVG 이미지  (0) 2020.11.03
Form 태그  (0) 2020.11.03
테이블 만들기 실습  (0) 2020.11.03

이미지 파일을 비트맵 형식으로 변환시킨 확장자인 SVG에 대해서 알게되었다.





이 JPG 파일을 SVG생성기로 변환시켜보았다. (convertio.co)



SVG의 장점은 글자(비트맵) 이기 때문에 jpg파일과는 다르게 확대하거나 축소하여도 깨지지가 않는다.

주로 로고(메인로고, 이모티콘) 등 작은 사진을 표현할 때 사용한다.



SVG 소스 코드 (HTML 편집기에 복사하면 SVG이미지가 출력된다)

<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
 width="500.000000pt" height="500.000000pt" viewBox="0 0 500.000000 500.000000"
 preserveAspectRatio="xMidYMid meet">

<g transform="translate(0.000000,500.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="none">
<path d="M2270 4590 c-337 -47 -596 -166 -801 -370 -217 -214 -323 -482 -323
-815 1 -251 61 -490 178 -698 38 -69 142 -213 168 -235 12 -9 15 -24 11 -52
-4 -25 0 -48 9 -62 11 -19 12 -51 6 -178 -15 -288 29 -798 108 -1251 6 -36 5
-36 -32 -44 -87 -16 -182 -89 -210 -160 -25 -68 -3 -127 65 -169 49 -31 210
-83 301 -97 103 -16 375 -6 460 16 101 27 186 71 221 115 l31 39 32 -33 c78
-82 256 -136 477 -143 289 -10 476 48 518 160 36 95 -36 210 -151 245 -46 13
-58 21 -58 37 0 11 14 85 30 165 51 242 78 391 95 516 16 125 37 519 34 639
-1 39 4 84 10 100 7 17 11 46 9 65 -4 31 2 40 64 103 161 163 268 394 303 657
17 125 19 333 4 433 -58 387 -278 683 -645 865 -218 109 -403 152 -669 157
-99 2 -209 0 -245 -5z m333 -27 c-7 -2 -21 -2 -30 0 -10 3 -4 5 12 5 17 0 24
-2 18 -5z m622 -181 c-3 -3 -11 0 -18 7 -9 10 -8 11 6 5 10 -3 15 -9 12 -12z
m245 -172 c31 -30 36 -37 11 -15 -25 23 -72 60 -103 84 -32 24 -58 45 -58 48
0 10 96 -65 150 -117z m-1875 80 c-10 -11 -22 -20 -28 -20 -5 0 1 9 14 20 31
25 37 25 14 0z m-45 -33 c0 -1 -33 -34 -72 -72 l-73 -70 70 73 c64 67 75 77
75 69z m2084 -239 c11 -18 17 -31 14 -28 -12 11 -108 141 -108 147 0 9 74 -84
94 -119z m-2234 78 c0 -2 -8 -10 -17 -17 -16 -13 -17 -12 -4 4 13 16 21 21 21
13z m890 -61 c95 -48 154 -131 181 -251 16 -71 2 -197 -31 -271 -24 -56 -46
-74 -28 -23 19 55 -13 120 -58 120 -27 0 -74 -53 -74 -84 0 -46 22 -88 53
-101 l31 -13 -36 -15 c-50 -21 -137 -31 -202 -23 -67 9 -135 52 -175 110 -124
180 -45 491 143 560 52 20 150 15 196 -9z m608 -6 c125 -61 200 -229 180 -406
-20 -178 -157 -281 -335 -253 -36 6 -82 19 -102 30 -34 18 -35 19 -10 20 33 0
55 25 64 70 8 44 -7 84 -39 105 -64 42 -115 -40 -81 -130 5 -16 3 -15 -14 5
-32 39 -52 107 -58 200 -12 175 52 302 182 361 57 26 156 25 213 -2z m123 -56
c13 -16 12 -17 -3 -4 -17 13 -22 21 -14 21 2 0 10 -8 17 -17z m-1061 3 c0 -2
-8 -10 -17 -17 -16 -13 -17 -12 -4 4 13 16 21 21 21 13z m1715 -26 c9 -16 13
-30 11 -30 -3 0 -12 14 -21 30 -9 17 -13 30 -11 30 3 0 12 -13 21 -30z m-2375
-10 c-6 -11 -13 -20 -16 -20 -2 0 0 9 6 20 6 11 13 20 16 20 2 0 0 -9 -6 -20z
m2429 -105 c0 -5 -6 1 -14 15 -8 14 -14 30 -14 35 0 6 6 -1 14 -15 8 -14 14
-29 14 -35z m-1238 18 c-8 -15 -10 -15 -11 -2 0 17 10 32 18 25 2 -3 -1 -13
-7 -23z m1268 -103 c0 -10 -3 -8 -9 5 -12 27 -12 43 0 25 5 -8 9 -22 9 -30z
m-642 -97 c-2 -16 -4 -3 -4 27 0 30 2 43 4 28 2 -16 2 -40 0 -55z m670 -25
c-3 -8 -6 -5 -6 6 -1 11 2 17 5 13 3 -3 4 -12 1 -19z m10 -60 c-3 -7 -5 -2 -5
12 0 14 2 19 5 13 2 -7 2 -19 0 -25z m-1894 -41 c34 -74 79 -122 145 -153 52
-25 63 -26 159 -22 92 4 103 3 97 -11 -12 -30 -16 -90 -10 -126 10 -49 77
-121 127 -137 l39 -11 0 -364 0 -363 -26 0 c-111 0 -456 185 -668 358 l-69 57
39 7 c21 3 91 14 154 23 152 22 160 24 160 36 0 7 -12 9 -32 6 -18 -3 -105
-16 -192 -28 l-160 -23 -77 82 c-43 45 -80 82 -83 82 -17 0 1 -25 64 -93 l71
-75 -76 -13 c-41 -6 -75 -16 -75 -20 0 -12 10 -11 101 2 l76 12 74 -62 c158
-133 407 -282 571 -343 78 -28 89 -30 193 -25 92 3 128 10 222 41 142 47 347
150 500 251 124 83 300 245 288 265 -5 8 -11 8 -21 -1 -12 -9 -14 -5 -14 25 0
21 -5 46 -11 58 -14 25 -10 28 40 35 59 8 50 23 -13 23 -39 0 -68 7 -102 25
-76 40 -155 32 -239 -25 -26 -17 -46 -20 -142 -20 -111 0 -143 -5 -143 -21 0
-4 52 -5 115 -2 114 6 134 1 101 -26 -7 -6 -26 -38 -40 -72 l-28 -60 -86 7
c-106 8 -102 -7 6 -21 l77 -10 5 -65 c3 -45 14 -83 33 -119 15 -29 24 -57 21
-62 -7 -12 -158 -88 -245 -124 -98 -41 -217 -74 -287 -82 l-62 -6 2 363 3 363
42 12 c22 7 55 22 71 34 63 45 93 162 58 232 -14 29 -14 30 2 24 39 -15 140
-26 187 -20 99 13 196 89 231 181 17 44 17 44 58 38 224 -29 398 -139 471
-298 118 -257 33 -586 -212 -816 -103 -98 -180 -145 -291 -179 -201 -60 -347
-81 -577 -81 -258 0 -469 34 -674 109 -110 40 -154 67 -228 139 -171 168 -273
399 -273 623 0 215 185 429 433 500 91 26 93 26 120 -34z m611 -19 l22 -53
-48 0 c-26 0 -48 1 -48 3 0 1 9 20 20 42 11 22 20 47 20 56 0 25 10 11 34 -48z
m826 42 c8 -5 11 -10 5 -10 -5 0 -17 5 -25 10 -8 5 -10 10 -5 10 6 0 17 -5 25
-10z m467 -107 c-2 -16 -4 -3 -4 27 0 30 2 43 4 28 2 -16 2 -40 0 -55z m-1419
34 c2 -12 -3 -17 -17 -17 -12 0 -21 6 -21 13 0 31 32 34 38 4z m250 -10 c2
-12 -3 -17 -17 -17 -12 0 -21 6 -21 13 0 31 32 34 38 4z m853 -4 c13 -16 12
-17 -3 -4 -10 7 -18 15 -18 17 0 8 8 3 21 -13z m-2001 -38 c-24 -25 -46 -45
-49 -45 -3 0 15 20 39 45 24 25 46 45 49 45 3 0 -15 -20 -39 -45z m-313 -17
c-2 -13 -4 -5 -4 17 -1 22 1 32 4 23 2 -10 2 -28 0 -40z m2424 -60 c15 -28 5
-21 -21 15 -15 20 -17 27 -6 18 9 -8 22 -23 27 -33z m-2424 0 c-3 -7 -5 -2 -5
12 0 14 2 19 5 13 2 -7 2 -19 0 -25z m1299 -4 c37 -55 -25 -117 -80 -80 -30
19 -35 65 -10 90 25 25 71 20 90 -10z m1331 -126 c-2 -18 -4 -4 -4 32 0 36 2
50 4 33 2 -18 2 -48 0 -65z m-130 -65 c-3 -10 -5 -4 -5 12 0 17 2 24 5 18 2
-7 2 -21 0 -30z m-2480 5 c-3 -8 -6 -5 -6 6 -1 11 2 17 5 13 3 -3 4 -12 1 -19z
m2600 -25 c-3 -10 -5 -4 -5 12 0 17 2 24 5 18 2 -7 2 -21 0 -30z m-2470 -5
c-3 -8 -6 -5 -6 6 -1 11 2 17 5 13 3 -3 4 -12 1 -19z m-120 -20 c-3 -8 -6 -5
-6 6 -1 11 2 17 5 13 3 -3 4 -12 1 -19z m2480 -25 c-3 -10 -5 -2 -5 17 0 19 2
27 5 18 2 -10 2 -26 0 -35z m100 -5 c-3 -7 -5 -2 -5 12 0 14 2 19 5 13 2 -7 2
-19 0 -25z m-2470 -30 c-3 -7 -5 -2 -5 12 0 14 2 19 5 13 2 -7 2 -19 0 -25z
m2460 -20 c-3 -8 -6 -5 -6 6 -1 11 2 17 5 13 3 -3 4 -12 1 -19z m-432 7 c-23
-8 -125 -11 -113 -4 7 5 38 8 68 8 30 0 51 -2 45 -4z m53 -21 c34 -24 52 -68
52 -128 0 -52 -2 -56 -47 -99 -27 -25 -60 -55 -75 -67 l-28 -21 2 48 c1 36 2
40 5 16 2 -18 8 -33 12 -33 4 0 33 23 64 51 57 50 57 51 57 107 0 62 -21 106
-62 128 -13 8 -18 13 -13 14 6 0 21 -7 33 -16z m-222 -23 c-80 -64 -119 -143
-118 -241 0 -66 32 -160 54 -160 5 0 41 20 79 45 l69 45 0 75 c0 75 11 115 31
115 6 0 3 -7 -5 -16 -12 -11 -16 -36 -16 -97 l0 -82 -81 -54 c-90 -60 -84 -61
-121 19 -33 71 -29 163 11 244 29 60 99 136 124 136 5 0 -7 -13 -27 -29z m591
-3 c-3 -8 -6 -5 -6 6 -1 11 2 17 5 13 3 -3 4 -12 1 -19z m-2440 -40 c-3 -8 -6
-5 -6 6 -1 11 2 17 5 13 3 -3 4 -12 1 -19z m2430 0 c-3 -8 -6 -5 -6 6 -1 11 2
17 5 13 3 -3 4 -12 1 -19z m-70 -20 c-3 -8 -6 -5 -6 6 -1 11 2 17 5 13 3 -3 4
-12 1 -19z m34 -85 c-12 -20 -14 -14 -5 12 4 9 9 14 11 11 3 -2 0 -13 -6 -23z
m-404 -25 c-3 -7 -5 -2 -5 12 0 14 2 19 5 13 2 -7 2 -19 0 -25z m-2007 -13 c0
-5 -5 -3 -10 5 -5 8 -10 20 -10 25 0 6 5 3 10 -5 5 -8 10 -19 10 -25z m35 -65
c9 -16 13 -30 11 -30 -3 0 -12 14 -21 30 -9 17 -13 30 -11 30 3 0 12 -13 21
-30z m2320 -20 c-14 -27 -28 -50 -30 -50 -3 0 6 23 20 50 14 28 28 50 30 50 3
0 -6 -22 -20 -50z m-61 -52 c-9 -18 -25 -45 -35 -60 -24 -33 -24 -45 -2 -27
10 8 3 -5 -15 -28 -31 -40 -153 -153 -165 -153 -9 0 127 134 137 135 5 0 11 6
14 14 3 9 0 11 -8 6 -7 -5 0 12 17 36 17 24 38 59 47 77 9 17 19 32 22 32 2 0
-3 -15 -12 -32z m-2209 -14 c9 -15 12 -23 6 -20 -11 7 -35 46 -28 46 3 0 12
-12 22 -26z m56 -41 c12 -21 22 -46 21 -56 0 -9 3 -15 7 -12 5 2 14 -2 21 -10
7 -8 10 -15 7 -15 -3 0 18 -23 46 -51 46 -45 47 -48 12 -21 -22 17 -54 45 -71
64 -42 45 -93 116 -71 99 19 -15 22 -9 7 20 -19 34 -3 20 21 -18z m2159 13 c0
-2 -8 -10 -17 -17 -16 -13 -17 -12 -4 4 13 16 21 21 21 13z m-2053 -358 c-3
-7 -5 -2 -5 12 0 14 2 19 5 13 2 -7 2 -19 0 -25z m53 -4 c0 -2 -9 0 -20 6 -11
6 -20 13 -20 16 0 2 9 0 20 -6 11 -6 20 -13 20 -16z m1797 -156 c-2 -29 -3 -6
-3 52 0 58 1 81 3 53 2 -29 2 -77 0 -105z m-17 137 c0 -2 -10 -9 -22 -15 -22
-11 -22 -10 -4 4 21 17 26 19 26 11z m-67 -52 c-7 -2 -21 -2 -30 0 -10 3 -4 5
12 5 17 0 24 -2 18 -5z m-86 -9 c-3 -3 -12 -4 -19 -1 -8 3 -5 6 6 6 11 1 17
-2 13 -5z m-702 -35 c72 -20 145 -90 114 -110 -17 -10 -336 -11 -363 0 -16 6
-13 12 25 52 62 64 135 82 224 58z m-620 -29 c3 -6 -1 -7 -9 -4 -18 7 -21 14
-7 14 6 0 13 -4 16 -10z m249 -35 c48 -8 91 -17 94 -20 4 -3 -7 -16 -22 -29
-25 -19 -27 -25 -17 -43 6 -12 11 -36 11 -54 l0 -32 -63 62 c-35 34 -85 77
-111 96 -66 47 -67 49 -21 40 22 -4 80 -13 129 -20z m-617 -122 c-2 -27 -3 -5
-3 47 0 52 1 74 3 48 2 -27 2 -69 0 -95z m1342 114 c-68 -54 -109 -92 -138
-131 -19 -25 -38 -46 -41 -46 -8 0 3 76 14 102 5 12 0 22 -18 33 -14 10 -26
21 -26 25 0 7 128 26 195 28 25 1 28 -1 14 -11z m21 -21 c0 -2 -8 -10 -17 -17
-16 -13 -17 -12 -4 4 13 16 21 21 21 13z m-210 -47 c0 -13 -68 -19 -230 -19
-162 0 -230 6 -230 19 0 3 104 6 230 6 127 0 230 -3 230 -6z m-595 -19 c10
-11 16 -20 13 -20 -3 0 -13 9 -23 20 -10 11 -16 20 -13 20 3 0 13 -9 23 -20z
m745 17 c0 -2 -15 -16 -32 -33 l-33 -29 29 33 c28 30 36 37 36 29z m-164 -86
c-11 -81 -85 -161 -163 -177 -30 -6 -31 -5 -35 35 -3 35 0 44 19 57 13 8 23
24 23 36 0 28 -28 58 -53 58 -50 0 -76 -68 -37 -92 15 -10 20 -24 20 -55 0
-47 -6 -50 -61 -31 -76 25 -131 92 -144 174 l-7 41 222 -1 222 0 -6 -45z
m-501 -1 c10 -11 16 -20 13 -20 -3 0 -13 9 -23 20 -10 11 -16 20 -13 20 3 0
13 -9 23 -20z m585 -4 c0 -2 -8 -10 -17 -17 -16 -13 -17 -12 -4 4 13 16 21 21
21 13z m627 -129 c-2 -23 -3 -1 -3 48 0 50 1 68 3 42 2 -26 2 -67 0 -90z
m-1146 56 c13 -16 12 -17 -3 -4 -10 7 -18 15 -18 17 0 8 8 3 21 -13z m449 -23
c-6 -11 -13 -20 -16 -20 -2 0 0 9 6 20 6 11 13 20 16 20 2 0 0 -9 -6 -20z
m-1143 -52 c-3 -7 -5 -2 -5 12 0 14 2 19 5 13 2 -7 2 -19 0 -25z m104 15 c13
-16 12 -17 -3 -4 -10 7 -18 15 -18 17 0 8 8 3 21 -13z m673 -55 c22 -39 11
-29 -29 27 -17 23 -21 33 -9 23 10 -9 28 -32 38 -50z m896 -13 c-41 -41 -77
-75 -79 -75 -3 0 28 34 69 75 41 41 77 75 79 75 3 0 -28 -34 -69 -75z m120 72
c0 -2 -10 -12 -22 -23 l-23 -19 19 23 c18 21 26 27 26 19z m-739 -63 c-10 -21
-27 -67 -36 -101 l-18 -63 -59 0 c-47 0 -60 3 -64 18 -3 9 -18 45 -35 80 -35
75 -36 87 -8 72 36 -20 133 -13 186 12 26 13 49 23 50 23 2 -1 -6 -19 -16 -41z
m47 21 c-6 -14 -13 -23 -15 -21 -5 5 15 46 22 46 3 0 -1 -11 -7 -25z m-997
-12 c13 -16 12 -17 -3 -4 -17 13 -22 21 -14 21 2 0 10 -8 17 -17z m26 -35 c-3
-8 -6 -5 -6 6 -1 11 2 17 5 13 3 -3 4 -12 1 -19z m113 -15 c0 -7 -39 17 -46
28 -3 6 5 3 20 -6 14 -10 26 -19 26 -22z m1587 -10 c-3 -10 -5 -4 -5 12 0 17
2 24 5 18 2 -7 2 -21 0 -30z m-1631 2 c14 -9 25 -34 33 -72 33 -171 164 -326
344 -407 121 -55 187 -69 327 -68 299 1 542 103 649 271 35 54 47 88 61 170 7
40 18 63 42 88 17 18 36 33 41 33 6 0 7 -30 3 -75 -26 -284 -204 -474 -516
-550 -91 -22 -317 -31 -418 -16 -202 30 -382 127 -484 262 -71 94 -107 188
-123 322 -7 62 1 71 41 42z m-189 -62 c-3 -10 -5 -2 -5 17 0 19 2 27 5 18 2
-10 2 -26 0 -35z m120 -5 c-3 -7 -5 -2 -5 12 0 14 2 19 5 13 2 -7 2 -19 0 -25z
m155 13 c35 -21 220 -49 456 -71 272 -25 636 -9 800 34 l52 14 0 -29 c0 -49
-50 -157 -96 -208 -182 -203 -633 -277 -910 -150 -61 28 -159 97 -200 141 -63
66 -120 174 -138 261 -8 32 -6 32 36 8z m1535 -33 c-3 -7 -5 -2 -5 12 0 14 2
19 5 13 2 -7 2 -19 0 -25z m-973 -3 c4 -10 -1 -15 -15 -15 -17 0 -18 2 -7 15
16 18 15 18 22 0z m603 9 c-3 -3 -12 -4 -19 -1 -8 3 -5 6 6 6 11 1 17 -2 13
-5z m-720 -10 c-3 -3 -12 -4 -19 -1 -8 3 -5 6 6 6 11 1 17 -2 13 -5z m310 -16
c-3 -8 -6 -5 -6 6 -1 11 2 17 5 13 3 -3 4 -12 1 -19z m340 16 c-3 -3 -12 -4
-19 -1 -8 3 -5 6 6 6 11 1 17 -2 13 -5z m350 -26 c-3 -7 -5 -2 -5 12 0 14 2
19 5 13 2 -7 2 -19 0 -25z m-434 15 c-7 -2 -19 -2 -25 0 -7 3 -2 5 12 5 14 0
19 -2 13 -5z m514 -65 c-3 -7 -5 -2 -5 12 0 14 2 19 5 13 2 -7 2 -19 0 -25z
m-10 -60 c-3 -8 -6 -5 -6 6 -1 11 2 17 5 13 3 -3 4 -12 1 -19z m-1770 -20 c-3
-8 -6 -5 -6 6 -1 11 2 17 5 13 3 -3 4 -12 1 -19z m1760 -40 c-3 -7 -5 -2 -5
12 0 14 2 19 5 13 2 -7 2 -19 0 -25z m-1546 -75 c13 -16 12 -17 -3 -4 -10 7
-18 15 -18 17 0 8 8 3 21 -13z m1379 -17 c0 -2 -8 -10 -17 -17 -16 -13 -17
-12 -4 4 13 16 21 21 21 13z m-1349 -23 c13 -16 12 -17 -3 -4 -17 13 -22 21
-14 21 2 0 10 -8 17 -17z m1309 -26 c0 -2 -15 -16 -32 -33 l-33 -29 29 33 c28
30 36 37 36 29z m177 -19 c-3 -8 -6 -5 -6 6 -1 11 2 17 5 13 3 -3 4 -12 1 -19z
m-30 -140 c-3 -8 -6 -5 -6 6 -1 11 2 17 5 13 3 -3 4 -12 1 -19z m-20 -90 c-3
-8 -6 -5 -6 6 -1 11 2 17 5 13 3 -3 4 -12 1 -19z m-827 2 c0 -5 -4 -10 -10
-10 -5 0 -10 5 -10 10 0 6 5 10 10 10 6 0 10 -4 10 -10z m98 5 c-10 -10 -89
-15 -83 -5 3 5 25 10 47 10 23 0 39 -2 36 -5z m712 -125 c0 -11 -4 -20 -9 -20
-5 0 -7 9 -4 20 3 11 7 20 9 20 2 0 4 -9 4 -20z m-1588 -30 c71 -41 159 -53
393 -53 166 0 240 4 300 16 44 10 83 17 88 17 4 0 7 -39 7 -88 0 -91 -8 -115
-55 -154 -122 -104 -501 -135 -785 -66 -184 45 -246 107 -200 203 26 54 86
103 154 127 64 22 58 22 98 -2z m1715 -36 c56 -32 93 -95 93 -157 0 -119 -149
-179 -450 -180 -277 -1 -500 72 -540 178 -6 15 -10 60 -10 102 l0 76 33 -8
c17 -4 50 -11 72 -16 22 -5 121 -12 220 -15 203 -7 357 5 432 35 56 22 91 19
150 -15z m-404 9 c-7 -2 -19 -2 -25 0 -7 3 -2 5 12 5 14 0 19 -2 13 -5z"/>
<path d="M1525 3371 c3 -5 22 -15 43 -22 51 -16 298 -119 405 -168 49 -23 93
-41 98 -41 48 0 -109 77 -378 186 -127 51 -181 66 -168 45z"/>
<path d="M3390 3320 c-30 -10 -162 -51 -292 -91 -138 -42 -238 -77 -238 -84 0
-8 69 9 193 47 105 33 243 76 305 95 61 19 112 39 112 44 0 13 -16 10 -80 -11z"/>
<path d="M1420 3060 c0 -5 6 -10 13 -10 22 0 319 -30 462 -46 77 -8 148 -16
157 -17 9 -1 18 3 20 8 4 12 -99 26 -392 54 -246 24 -260 25 -260 11z"/>
<path d="M1440 2591 c0 -5 7 -15 17 -22 15 -13 15 -12 4 9 -12 23 -21 28 -21
13z"/>
<path d="M3580 1300 c0 -5 5 -10 10 -10 6 0 10 5 10 10 0 6 -4 10 -10 10 -5 0
-10 -4 -10 -10z"/>
</g>
</svg>


저작자표시

'국비지원 Spring프레임워크 > HTML' 카테고리의 다른 글

input 태그  (0) 2020.11.04
레이아웃 FLEX  (0) 2020.11.03
div로 컨텐츠 위치 조정하기  (0) 2020.11.03
Form 태그  (0) 2020.11.03
테이블 만들기 실습  (0) 2020.11.03

Form 태그란? 사용자가 입력한 데이터를 한번에 전송하게 해주는 태그.

그런데 점점 사용을 안하는 추세라고 한다.


input type 실습을 해봤다.


데이터 전송 태그









소스 코드

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<html>
    <body>
        <h1>데이터 전송 태그</h1>
        <hr>
        <form action="https://www.naver.com">
            <input type="text" name="username" placeholder="유저네임을입력" required/><br/>
            <input type="password" name="password" placeholder="password를입력" required/><br/>
            <input type="email" name="email" placeholder="이메일을입력" required/><br/>
            <input type="date" name="date" id=""><br/>
            <input type="checkbox" name="checkbox"><br/>
            <input type="text" name="address" placeholder="주소를입력하세요" readonly><br/>
            <button>회원가입</button>
        </form>
    </body>
</html>
cs


저작자표시

'국비지원 Spring프레임워크 > HTML' 카테고리의 다른 글

input 태그  (0) 2020.11.04
레이아웃 FLEX  (0) 2020.11.03
div로 컨텐츠 위치 조정하기  (0) 2020.11.03
SVG 이미지  (0) 2020.11.03
테이블 만들기 실습  (0) 2020.11.03

만들어야 할 테이블




소스 코드


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
<table border="1">
                <tr>
                    <td><b>방 이름</b></td>
                    <td><b>대상</b></td>
                    <td><b>크기</b></td>
                    <td><b>가격</b></td>
                </tr>
                <tr>
                    <td><b>유채방</b></td>
                    <td>여성 도미토리</td>
                    <td rowspan="3">4인실</td>
                    <td rowspan="4">1인 20,000원</td>
                </tr>
                <tr>
                    <td rowspan="2"><b>동백방</b></td>
                    <td>동성 도미토리</td>
                </tr>
                <tr>
                    <td>가족 1팀</td>
                </tr>
                <tr>
                    <td><b>천혜향방</b></td>
                    <td>-</td>
                    <td>2인실</td>
                </tr>
                <tr>
                    <td colspan="4"><b>바깥채 전체를 렌트합니다</b></td>
                </tr>
            
            </table>
cs



저작자표시

'국비지원 Spring프레임워크 > HTML' 카테고리의 다른 글

input 태그  (0) 2020.11.04
레이아웃 FLEX  (0) 2020.11.03
div로 컨텐츠 위치 조정하기  (0) 2020.11.03
SVG 이미지  (0) 2020.11.03
Form 태그  (0) 2020.11.03

+ Recent posts

티스토리툴바