* Division : 웹사이트의 레이아웃, 틀을 만들 때 논리적 구분을 위해 사용
> 테이블보다 유용하게 사용 가능!
- div는 'block 요소'
span, image는 'in-line' 요소
- div
|
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">
<title>css07.html</title>
<style>
div{
width: 300px;
height: 300px;
background-color: rgb(255, 137, 157);
}
#blueDiv{
background-color: rgb(79, 79, 255);
}
</style>
</head>
<body>
<!-- div : division 웹사이트의 레이아웃, 틀을 만들 때 논리적 구분을 위해 사용 -->
<div>금요일</div>
<div id="blueDiv">BLUE</div>
</body>
</html>
|
cs |
- [응용] 영화 목록 만들기
|
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
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
table, td{
border : 1px solid black;
border-collapse: collapse;
}
table{
width: 800px;
}
img {
width: 180px;
height: 180px;
}
</style>
</head>
<body>
<!-- h1{영화목록}+table>tr>(td>img)*5+tr>td*5../images/movie_image1.jpg -->
<h1>영화목록</h1>
<table>
<tr>
<td><img src="../images/movie_image1.jpg" alt="스즈메의 문단속"></td>
<td><img src="../images/movie_image2.jpg" alt="던전앤드래곤"></td>
<td><img src="../images/movie_image3.jpg" alt="더퍼스트슬램덩크"></td>
<td><img src="../images/movie_image4.jpg" alt="웅남이"></td>
<td><img src="../images/movie_image5.jpg" alt="리바운드"></td>
</tr>
<tr>
<td>스즈메의 문단속</td>
<td>던전앤드래곤</td>
<td>더퍼스트슬램덩크</td>
<td>웅남이</td>
<td>리바운드</td>
</tr>
</table>
<table>
<tr>
<td><img src="../images/movie_image6.jpg" alt="소울메이트"></td>
<td><img src="../images/movie_image7.jpg" alt="오토라는남자"></td>
<td><img src="../images/movie_image8.jpg" alt="파벨만스"></td>
<td><img src="../images/movie_image9.jpg" alt="라이스보이 슬립스"></td>
<td><img src="../images/movie_image10.jpg" alt="에브리씽 에브리웨어 올앳원스"></td>
</tr>
<tr>
<td>소울메이트</td>
<td>오토라는남자</td>
<td>파벨만스</td>
<td>라이스보이 슬립스</td>
<td>에브리씽 에브리웨어 올앳원스</td>
</tr>
</table>
</body>
</html>
|
cs |
- margin / padding
> 개발자 도구에서 패딩, 마진에 수치 주면 어떨지 확인 가능
|
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
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css09.html</title>
<style>
body{
font-size:20px;
}
div{
width: 300px;
height: 300px;
/* border는 상속이 안돼서 p태그에 전달 x */
border: 1px solid red;
margin-left: 220px;
}
p{
/* font-size: 10px; */
padding-top: 74px;
padding-left: 30px;
padding-right: 30px;
}
</style>
</head>
<body>
<h1>상속</h1>
<div>
<p>부모 요소에 적용한 스타일이 자식 요소에 연결되어
전달되는 것을 css에서의 상속이라 한다.</p>
</div>
<p>CSS에서 상속은 기본적으로 하위요소에 상속되는 속성과
상속되지 않는 속성으로 구분된다.</p>
<P>border, margin, padding, float, position 속성들은 상속되지 않는다.</P>
<!-- 테두리와 컨텐츠 사이의 공백 : padding -->
</body>
</html>
|
cs |
- margin / padding
|
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
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/* 각 div 영역의 너비 230px, 높이 250, 배경 오렌지 */
div{
width: 230px;
height: 250px;
background-color: orange;
}
/* id가 div1인 영역은 1px 검정 실선 */
/* id가 div2인 영역은 배경 핑크 */
div#div1{
border: 1px solid black;
padding: 20px;
/* margin: 30px; */
/* margin-left: 700px; */
/* margin: 20px 30px; 상하 좌우 */
/* margin: 0 auto; 위아래는 0, 좌우는 중앙에 배치 */
/* margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 40px; */
margin: 10px 20px 30px 40px;
}
div#div2{
background-color: pink;
width: 50px;
height: 50px;
/* 패딩 상 우 하 좌
40 20 40 20 */
/* 화면 정 중앙에 배치 */
padding: 40px 20px 40px 20px;
margin: 0 auto;
}
</style>
</head>
<body>
<div id="div1">
ID: <input type="text" name="id" id="">
PW: <input type="text" name="pwd" id="">
</div>
<!-- div#div2{box2} -->
<div id="div2">box2</div>
</body>
</html>
|
cs |
- img / div / position(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
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
img{
width: 100px;
height: 100px;
}
#div1{
width: 100px;
height: 100px;
padding: 50px;
background-color: green;
}
#div2{
width: 100px;
height: 50px;
padding: 50px;
background-color: blue;
position: absolute; /* 화면을 기준으로 절대적인 위치로 */
/* top: 20px;
left: 150px; */
right: 50px;
bottom: 100px;
}
/* div는 테이블보다 위치를 변경하기 쉽다. > position */
</style>
</head>
<body>
<h1>이미지</h1>
<div id="div1"><img src="../images/movie_image1.jpg" alt=""></div>
<div id="div2">오늘은 금요일</div>
</body>
</html>
|
cs |
- position(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
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/* h1 배경 실버 글자색 화이트 */
h1{
background-color: silver;
color: white;
}
/* p 배경 노란색 패딩 10 */
p{
background-color: yellow;
padding: 10px;
}
/* class rel 너비 300px 높이 300px 배경 파란색 */
.rel{
/* relative : 원래 배치되어야 할 위치에서 상대적 위치로 */
position: relative;
top: 20px;
left: 100px;
width: 300px;
height: 300px;
background-color: blue;
}
</style>
</head>
<body>
<h1>Relative Position</h1>
<p class="rel">박스의 위치를 지정할 때 사용할 수 있는 속성
top, right, left, bottom이 있다</p>
<p>상대 위치 지정 방식으로 박스가 재배치될 경우 다른 블록 요소 배치에
영향을 주지 않고 배치된다.
</p>
</body>
</html>
|
cs |
- 쿠팡 상품 화면 > div로! [응용]
|
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
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Q02</title>
<style>
img{
border:1px solid lightgray;
}
div{
padding-left: 30px;
}
#div1{
position: absolute;
top: 10px;
left: 10px;
}
#div2{
position: absolute;
top: 10px;
left: 490px;
}
#div3{
position: absolute;
top: 320px;
left: 10px;
}
#div4{
position: absolute;
top: 320px;
left: 250px;
}
#div5{
position: absolute;
top: 320px;
left: 490px;
}
#div6{
position: absolute;
top: 320px;
left: 730px;
}
#div7{
position: absolute;
top: 630px;
left: 10px;
}
#div8{
position: absolute;
top: 630px;
left: 490px;
}
#div9{
position: absolute;
top: 630px;
left: 730px;
}
</style>
</head>
<body>
<div id="div1">
<img src="https://static.coupangcdn.com/ua/cmg_paperboy/image/1680228665486/C2-B1.jpg" alt="">
</div>
<div id="div2">
<img src="https://static.coupangcdn.com/ca/cmg_paperboy/image/1680228693574/C2-B2.jpg" alt="">
</div>
<div id="div3">
<img src="https://static.coupangcdn.com/ra/cmg_paperboy/image/1680228681707/C2-B3.jpg" alt="">
</div>
<div id="div4">
<img src="https://static.coupangcdn.com/oa/cmg_paperboy/image/1680228714464/C2-B4.jpg" alt="">
</div>
<div id="div5">
<img src="https://thumbnail9.coupangcdn.com/thumbnails/remote/x/image/displayitem/displayitem_528ab20a-45fd-421d-b662-3b6dd1a409e0.png" alt="">
</div>
<div id="div6">
<img src="https://thumbnail6.coupangcdn.com/thumbnails/remote/x/image/displayitem/displayitem_4652668b-c739-4f8f-b00f-c71fb2abea30.png" alt="">
</div>
<div id="div7">
<img src="https://static.coupangcdn.com/da/cmg_paperboy/image/1680228728779/C2-B7.jpg" alt="">
</div>
<div id="div8">
<img src="https://thumbnail10.coupangcdn.com/thumbnails/remote/x/image/displayitem/displayitem_20fc13fd-08ee-43c9-91a5-a2d45f5fbb2e.png" alt="">
</div>
<div id="div9">
<img src="https://thumbnail9.coupangcdn.com/thumbnails/remote/x/image/displayitem/displayitem_e8be23da-a599-4ce9-9478-1a227ea3894c.png" alt="">
</div>
</body>
</html>
|
cs |
> div 활용해서 이미지 위치 바꿔보기!
|
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
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Q02</title>
<style>
img{
border:1px solid lightgray;
}
div{
padding-left: 30px;
}
#div1{
position: absolute;
top: 10px;
left: 10px;
}
#div2{
position: absolute;
top: 10px;
left: 490px;
}
#div3{
/* position: absolute;
top: 320px;
left: 10px; */
position: absolute;
top: 320px;
left: 730px;
}
#div4{
position: absolute;
top: 320px;
left: 250px;
}
#div5{
position: absolute;
top: 320px;
left: 490px;
}
#div6{
/* position: absolute;
top: 320px;
left: 730px; */
position: absolute;
top: 320px;
left: 10px;
}
#div7{
position: absolute;
top: 630px;
left: 10px;
}
#div8{
position: absolute;
top: 630px;
left: 490px;
}
#div9{
position: absolute;
top: 630px;
left: 730px;
}
</style>
</head>
<body>
<div id="div1">
<img src="https://static.coupangcdn.com/ua/cmg_paperboy/image/1680228665486/C2-B1.jpg" alt="">
</div>
<div id="div2">
<img src="https://static.coupangcdn.com/ca/cmg_paperboy/image/1680228693574/C2-B2.jpg" alt="">
</div>
<div id="div3">
<img src="https://static.coupangcdn.com/ra/cmg_paperboy/image/1680228681707/C2-B3.jpg" alt="">
</div>
<div id="div4">
<img src="https://static.coupangcdn.com/oa/cmg_paperboy/image/1680228714464/C2-B4.jpg" alt="">
</div>
<div id="div5">
<img src="https://thumbnail9.coupangcdn.com/thumbnails/remote/x/image/displayitem/displayitem_528ab20a-45fd-421d-b662-3b6dd1a409e0.png" alt="">
</div>
<div id="div6">
<img src="https://thumbnail6.coupangcdn.com/thumbnails/remote/x/image/displayitem/displayitem_4652668b-c739-4f8f-b00f-c71fb2abea30.png" alt="">
</div>
<div id="div7">
<img src="https://static.coupangcdn.com/da/cmg_paperboy/image/1680228728779/C2-B7.jpg" alt="">
</div>
<div id="div8">
<img src="https://thumbnail10.coupangcdn.com/thumbnails/remote/x/image/displayitem/displayitem_20fc13fd-08ee-43c9-91a5-a2d45f5fbb2e.png" alt="">
</div>
<div id="div9">
<img src="https://thumbnail9.coupangcdn.com/thumbnails/remote/x/image/displayitem/displayitem_e8be23da-a599-4ce9-9478-1a227ea3894c.png" alt="">
</div>
</body>
</html>
|
cs |
- div / span / position(fixed)
|
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
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div, img{
width: 300px;
height: 300px;
}
span{
background-color: blue;
}
div#div1{
background-color: green;
position: relative;
top: -300px;
}
div#div2{
background-color: red;
position: relative;
top: -300px;
left: 600px;
}
img{
/* fixed : 고정위치 > 스크롤 움직여도 같은 곳 위치 */
position: fixed;
bottom: 10px;
right: 0px;
}
</style>
</head>
<body>
<p>
br이 없어도 엔터친 효과가 나는 엘리먼트를 block 요소라 한다.
in-line 요소는 현재 컨텐츠를 감쌀만한 크기를 차지한다.
<!-- div는 'block 요소' -->
<!-- span, image는 'in-line' 요소 -->
</p>
<span>출력1</span>
<span>출력2</span>
<img src="../images/movie_image1.jpg" alt="">
<img src="../images/movie_image2.jpg" alt="">
<div id="div1"></div>
<div id="div2"></div>
<!-- br*50 -->
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>
|
cs |
- 네이버 창 만들기 [응용]
> style 적용하기 위해 부모 클래스(vscode_workspace) 밑에 있는 main.css 연결
|
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
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- style 적용하기 위해 부모 클래스(vscode_workspace) 밑에 있는 main.css 연결 -->
<link rel="stylesheet" href="../css/main.css">
</head>
<body>
<div id="container">
<!-- div#header>div#logo>img -->
<div id="header">
<div id="logo"><img src="../images/naver.png" alt=""></div>
<!-- div#naver>a.button[href='#']*5 -->
<div id="nav">
<a href="#" class="button">HOME</a>
<a href="#" class="button">JAVA</a>
<a href="#" class="button">ORACLE</a>
<a href="#" class="button">AI</a>
<a href="#" class="button">BIGDATA</a>
</div>
</div>
<!-- BODY -->
<!-- div#sidebar1>h1{왼쪽제목}+ul>li{신문사$}*4 -->
<div id="sidebar1">
<h1>왼쪽제목</h1>
<ul>
<li>신문사1</li>
<li>신문사2</li>
<li>신문사3</li>
<li>신문사4</li>
</ul>
</div>
<!-- div#contents>h1{메인컨텐츠}+ul>li{메인기사$}*4 -->
<div id="contents">
<h1>메인컨텐츠</h1>
<ul>
<li>메인기사1</li>
<li>메인기사2</li>
<li>메인기사3</li>
<li>메인기사4</li>
</ul>
</div>
<!-- div#contents>h1{우측제목}+ul>li{우측기사$}*4 -->
<div id="sidebar2">
<h1>우측제목</h1>
<ul>
<li>우측기사1</li>
<li>우측기사2</li>
<li>우측기사3</li>
<li>우측기사4</li>
</ul>
</div>
<!-- div#footer>h1{네이벙}+p{이 사이트는 오늘 만들어진 사이트입니다} -->
<div id="footer">
<h1>네이벙 피씽 사이트</h1>
<p>이 사이트는 오늘 만들어진 사이트입니다</p>
<p>회원 가입하시면 여러분의 소중한 개인정보는
제 마음대로 사용하겠습니다..
</p>
</div>
</div>
</body>
</html>
|
cs |
(+main 추가)
- 마블 캐릭터 정보 페이지 구현 [응용]
|
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
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css15.html</title>
<style>
table, td, th{
border : 1px solid rgb(83, 79, 74);
}
table{
/* 부모의 100% = body의 100% */
width: 100%;
/* 중앙정렬 */
text-align: center;
/* 테두리 병합 */
border-collapse: collapse;
}
th{
font-size: 15px;
background-color: #e0bbd8;
}
td{
height: 24px;
}
tr{
font-size: 12px;
cursor: pointer
}
#id {width: 10%;}
#pw {width: 10%;}
#name {width: 10%;}
#email {width: 10%;}
#addrs {width: 10%;}
/* 선택자
1. tag
2. id
3. class
4. 하위선택자
div p 부모엘리먼트 자손엘리먼트 (자식/손자/증손자...)
ol>li 부모엘리먼트 > 자식엘리먼트 (직계자식)
5. 유사선택자 : hover, active
th:hover
td:active
*/
th:hover {
/* th 위에 올라오면 커서를 원래 모양으로 변경 */
cursor: default;
}
tr:hover {
color: #ffffff;
background: #00ccff;
font-weight: bold;
}
.odd{
background-color: #feffcf;
}
</style>
</head>
<body>
<h1>마블 캐릭터 정보</h1>
<!-- table>(tr>th*5)+(tr>td*5)*4 -->
<table>
<tr>
<th id="id">ID</th>
<th id="pw">PW</th>
<th id="name">NAME</th>
<th id="email">EMAIL</th>
<th id="addrs">ADDRS</th>
</tr>
<tr class="odd">
<td>id1</td>
<td>pwd1</td>
<td>아이언맨</td>
<td>ironman@gmail.com</td>
<td>절벽 위</td>
</tr>
<tr>
<td>id2</td>
<td>pwd2</td>
<td>토르</td>
<td>thor@gmail.com</td>
<td>아스가르드</td>
</tr>
<tr class="odd">
<td>id3</td>
<td>pwd3</td>
<td>헐크</td>
<td>hulk@gmail.com</td>
<td>뉴욕</td>
</tr>
<tr>
<td>id4</td>
<td>pwd4</td>
<td>캡틴아메리카</td>
<td>cap@gmail.com</td>
<td>마블 스튜디오</td>
</tr>
</table>
</body>
</html>
|
cs |
- 디자인 활용 > button / button:hover
|
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
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
ul{
list-style: none;
}
.button{
background-color: rgb(141, 151, 243);
text-decoration: none;
width: 10%
}
.button:hover{
color: rgb(255, 255, 255);
background-color: rgb(243, 171, 171);
}
</style>
</head>
<body>
<ul>
<li><a href="#" class="button">HOME</a></li>
<li><a href="#" class="button">뉴스</a></li>
<li><a href="#" class="button">날씨</a></li>
<li><a href="#" class="button">영화</a></li>
<li><a href="#" class="button">스포츠</a></li>
</ul>
</body>
</html>
|
cs |
- 요기요 페이지 구현 [응용]
|
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
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div:hover{
cursor: pointer;
}
.text{
color:black;
font-size: 15px;
font-weight: bold;
font-family: "나눔고딕";
}
#text2{
position:absolute;
left: 240px;
top: 10px;
}
#text3{
position:absolute;
left: 450px;
top: 10px;
}
#text4{
position:absolute;
left: 660px;
top: 10px;
}
#text5{
position:absolute;
left: 30px;
top: 220px;
}
#text6{
position:absolute;
left: 240px;
top: 220px;
}
#text7{
position:absolute;
left: 450px;
top: 220px;
}
#text8{
position:absolute;
left: 660px;
top: 220px;
}
#text9{
position:absolute;
left: 30px;
top: 430px;
}
#text10{
position:absolute;
left: 240px;
top: 430px;
}
#text11{
position:absolute;
left: 450px;
top: 430px;
}
#text12{
position:absolute;
left: 660px;
top: 430px;
}
#text13{
position:absolute;
left: 30px;
top: 640px;
}
#text14{
position:absolute;
left: 240px;
top: 640px;
}
img{
width: 200px;
height: 200px;
border: 1px solid lightgray;
}
#div1{
position:absolute;
left: 10px;
top: 10px;
}
#div2{
position:absolute;
left: 220px;
top: 10px;
}
#div3{
position:absolute;
left: 430px;
top: 10px;
}
#div4{
position:absolute;
left: 640px;
top: 10px;
}
#div5{
position:absolute;
left: 10px;
top: 220px;
}
#div6{
position:absolute;
left: 220px;
top: 220px;
}
#div7{
position:absolute;
left: 430px;
top: 220px;
}
#div8{
position:absolute;
left: 640px;
top: 220px;
}
#div9{
position:absolute;
left: 10px;
top: 430px;
}
#div10{
position:absolute;
left: 220px;
top: 430px;
}
#div11{
position:absolute;
left: 430px;
top: 430px;
}
#div12{
position:absolute;
left: 640px;
top: 430px;
}
#div13{
position:absolute;
left: 10px;
top: 640px;
}
#div14{
position:absolute;
left: 220px;
top: 640px;
}
</style>
</head>
<body>
<div id="image">
<div id="div1"><img src="https://d5bfh7nnlp98y.cloudfront.net/2302_jsevent/230130_YGY_m2_MW_thumb_1.png" alt=""></div>
<div id="div2"><img src="https://www.yogiyo.co.kr/mobile/image/category-01.png" alt=""></div>
<div id="div3"><img src="https://www.yogiyo.co.kr/mobile/image/category-onedish.png" alt=""></div>
<div id="div4"><img src="https://www.yogiyo.co.kr/mobile/image/category-10.png" alt=""></div>
<div id="div5"><img src="https://www.yogiyo.co.kr/mobile/image/category-02.png" alt=""></div>
<div id="div6"><img src="https://www.yogiyo.co.kr/mobile/image/category-03.png" alt=""></div>
<div id="div7"><img src="https://www.yogiyo.co.kr/mobile/image/category-04.png" alt=""></div>
<div id="div8"><img src="https://www.yogiyo.co.kr/mobile/image/category-05.png" alt=""></div>
<div id="div9"><img src="https://www.yogiyo.co.kr/mobile/image/category-06.png" alt=""></div>
<div id="div10"><img src="https://www.yogiyo.co.kr/mobile/image/category-07.png" alt=""></div>
<div id="div11"><img src="https://www.yogiyo.co.kr/mobile/image/category-08.png" alt=""></div>
<div id="div12"><img src="https://www.yogiyo.co.kr/mobile/image/category-09.png" alt=""></div>
<div id="div13"><img src="https://www.yogiyo.co.kr/mobile/image/category-11.png" alt=""></div>
<div id="div14"><img src="https://www.yogiyo.co.kr/mobile/image/category-convenience-store.png" alt=""></div>
</div>
<div class="text">
<p id="text1"></p>
<p id="text2">전체보기</p>
<p id="text3">1인분 주문</p>
<p id="text4">프랜차이즈</p>
<p id="text5">치킨</p>
<p id="text6">피자/양식</p>
<p id="text7">중국집</p>
<p id="text8">한식</p>
<p id="text9">일식/돈까스</p>
<p id="text10">족발/보쌈</p>
<p id="text11">야식</p>
<p id="text12">분식</p>
<p id="text13">카페/디저트</p>
<p id="text14">편의점/마트</p>
</div>
</body>
</html>
|
cs |
- 아마존 가입 페이지 구현 [응용]
|
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
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Amazon
</title>
</head>
<style>
/* #logo{
position:absolute;
top: 1px;
left: 45%;
} */
input{
width: 350px;
height: 30px;
}
#logo{
margin: 0 auto;
/* position:absolute;
top: 1px;
left: 90%; */
/* position: absolute;
top: 1px;
left: 50%; */
/* margin-right: 50%; */
/* left: 50%;
right: 50%; */
width: 400px;
}
p{
font-weight: bold;
color: navy;
}
#p1{
font-weight:lighter;
font-size: 14px;
color: navy;
}
#table{
margin: 10px auto;
padding: 30px 30px 30px 30px;
width: 400px;
border: 1px solid lightgray;
}
#must{
font-size: smaller;
font-weight:lighter
}
#submit{
background-color: rgb(255, 225, 144);
border: 1px solid lightgray;
padding: 10px;
width: 400px;
height: 40px;
/* left: 40%;
position:absolute; */
margin: 20px auto;
}
.button{
text-decoration: none;
}
/* div.h1{
position:absolute;
} */
</style>
<body>
<div id="logo">
<img id="img" width="400px" src="../images/Amazon_logo.jpg" alt="">
</div>
<div id="table">
<h1>Create account</h1>
<p>Your name</p>
<input type="text" name="name" id="">
<br>
<p>Email</p>
<input type="text" name="Email" id="">
<br>
<p>Password</p>
<input text="password" placeholder="At least 6 characters" name="password" id="">
<p id="must">! Passwords must be at least 6 characters.</p>
<p>Re-enter password</p>
<input type="password" name="Repassword" id="ㅁㅁ">
<br><br><br>
<input id="submit" type="submit" value="Create your Amazon Account">
<br>
<p id="p1">By creating an account, you agree to Amazon's <br></p>
<a id="condition" href="Conditions of Use"></a>
<p id="p1">
<a href="#" class="button">Conditions of Use</a> and
<a href="#" class="button">Privacy Notice.</a></p>
<br>
<hr size="1" color="lightgray">
<br>
<p id="p1">Aready have an account?
<a class="button" href="Sign">Sign-in ▶</a></p>
<p id="p1">Buying for work?
<a class="button" href="create">Create a free business account ▶</a></p>
</div>
</body>
</html>
|
cs |
- [종합] div / span / id / list 등
|
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
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/* div 너비 100px 높이 100px */
div{
width: 100px;
height: 100px;
}
/* box1의 배경 red */
div#box1{
background-color: red;
}
/* box2의 배경 파랑 */
div#box2{
background-color: blue;
}
/* span ==> inline요소 ==> block요소 */
span{
background-color: yellow;
width: 150px;
height: 150px;
/* inline요소는 크기를 지정해도 자신의 공간 만큼만 차지함 */
display: block;
/* 위처럼 inline요소를 block요소로 바꿀 수 있음 */
}
/* span에 마우스를 올려 놓으면 배경을 초록색으로 */
span:hover{
background-color: green;
}
/* span을 클릭하면 배경을 파랑색 */
span:active{
background-color: blue;
}
</style>
</head>
<body>
<!-- (div>div#box1{푸른하늘})+(div>div#box2{은하수}+span{span은 inline요소}) -->
<div>
<div id="box1">푸른하늘</div>
</div>
<div>
<div id="box2">은하수</div>
</div>
<span>span은 inline요소</span>
하하하
</body>
</html>
|
cs |
|
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 lang="en">
<head>
<meta charset="UTF-8">
<title>css17.html</title>
<style>
/* span 태그의 배경을 red 테두리 실선 검정색 1px */
div.css_test > span{
/* div의 css_test 클래스의 직속 자손 span */
background-color: red;
/* border: solid 1px black; */
padding: 10px;
/* padding : 컨텐츠와 테두리 안쪽 사이의 공간 */
/* margin : 테두리 바깥쪽 공간 */
}
#aaa {
/* 테두리 둥글게 */
border-radius: 10px;
}
#bbb {
border-radius: 20px;
}
#ccc {
/* 좌측 상단부터 시계방향 */
border-radius: 5px 10px 20px 30px;
}
#bbb:active{
background-color: blue;
}
</style>
</head>
<body>
<!-- div.css_test>span#aaa{버튼1}+br*2 -->
<div class="css_test">
<span id="aaa">버튼1</span><br><br>
<span id="bbb">버튼2</span><br><br>
<span id="ccc">버튼3</span><br><br>
</div>
</body>
</html>
|
cs |
|
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">
<title>css18.html</title>
<style>
/* 점빼기 */
ul{
list-style: none;
margin: 0px;
padding: 0px;
}
li > a{
/* 직계 자손이면 li > a 후손이면 li a */
text-decoration: none;
background-color: #aaaaaa;
display: block;
color: #000000;
width: 150px;
}
li a:hover{
color: white;
background-color: #1f6c7d;
}
/* 클릭하면 다른 배경과 글자색 */
li a:active{
color: red;
background-color: black;
}
</style>
</head>
<body>
<!-- ul>(li>a[href='#'])*5 -->
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">뉴스</a></li>
<li><a href="#">날씨</a></li>
<li><a href="#">영화</a></li>
<li><a href="#">스포츠</a></li>
</ul>
</body>
</html>
|
cs |
|
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 lang="en">
<head>
<meta charset="UTF-8">
<title>css19.html</title>
<style>
/* 점빼기 */
ul{
list-style: none;
margin: 0px;
padding: 0px;
}
li{
display: inline;
}
li a{
text-decoration: none;
background-color: #aaaaaa;
color: white;
}
/* 마우스가 올라오면 배경은 검정색 글씨 흰색 */
li a:hover{
background-color: black;
color: white;
}
</style>
</head>
<body>
<!-- ul>(li>a[href='#'])*5 -->
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">뉴스</a></li>
<li><a href="#">날씨</a></li>
<li><a href="#">영화</a></li>
<li><a href="#">스포츠</a></li>
</ul>
</body>
</html>
|
cs |
* 인라인 / 블락(display)
- 인라인 요소를 블락 요소로 => display: block;
- 블락 요소를 인라인 요소로 => display: inline;
- display:none => 특정 때만 보이게
|
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
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css20.html</title>
<style>
div.content{
position: absolute;
/* 있는데도 안보이게.. display: none */
display: none;
background: #cccccc;
padding: 10px 20px;
}
div.dropdown{
display: inline;
}
.dropdown:hover .content{
/* 마우스 올려놓으면 content가 보임 */
display: block;
}
</style>
</head>
<body>
<div class="dropdown">
<span>마우스올려놓기</span>
<div class="content">
<p>Hellow World!!!</p>
</div>
</body>
</html>
|
cs |
'HTML' 카테고리의 다른 글
| [HTML] javascript (2) - 응용 (0) | 2023.04.16 |
|---|---|
| [HTML] javascript (1) (0) | 2023.04.16 |
| [HTML] CSS(Cascade Style Sheet) - width / border / text-align border-collapse / font / #id / .class (0) | 2023.04.09 |
| [HTML] http / 기본 구조 + html:5 (테이블/광고판/입력 표현/기능/form/검색창/로그인창) (0) | 2023.04.09 |
| [HTML] 기본 구조 (창에 글 쓰기/리스트/테이블/하이퍼링크) (0) | 2023.04.09 |