position
1. relative : 본인 이동 (원하는대로)
2. absolute : 부모 기준 이동(부모 안에서 자리잡기) -> 부모 position 필수 / 처음 위치 (0,0)
3. fixed : 화면 기준 => 스크롤해도 고정
position 지정 후 left, botom 등 속성 이용 가능
- 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
|
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>배치 방법 지정</title>
<style>
.box{
width: 100px;
height: 100px;
position: relative;
}
.box1{
background-color: rgb(255, 168, 168);
left: 30px; /*left에서 30px 떨어짐*/
top: 30px
}
.box2{
background-color: rgb(212, 247, 212);
left: 50px;
top: 50px;
}
.box3{
background-color: rgb(205, 205, 255);
left: 70px;
top: 70px;
}
</style>
</head>
<body>
<h1>오늘 배울 내용은 position</h1>
<div id="area">
<div class="box box1"></div>
<div class="box box2"></div>
<div class="box box3"></div>
</div>
</body>
|
cs |
- absolute
- 부모 position 없을 때 => <body> 기준
|
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
|
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>배치 방법 지정</title>
<style>
#area{
width: 500px;
height: 500px;
border: 1px solid;
}
.box{
width: 100px;
height: 100px;
position: absolute;
}
.box1{
background-color: rgb(255, 168, 168);
left: 10px;
top: 10px;
}
.box2{
background-color: rgb(212, 247, 212);
left: 30px;
top: 30px;
}
.box3{
background-color: rgb(205, 205, 255);
left: 70px;
top: 70px;
}
</style>
</head>
<body>
<h1>오늘 배울 내용은 position</h1>
<div id="area">
<div class="box box1"></div>
<div class="box box2"></div>
<div class="box box3"></div>
</div>
</body>
|
cs |
- 부모 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
|
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>배치 방법 지정</title>
<style>
#area{
width: 500px;
height: 500px;
border: 1px solid;
position: relative; /*부모 영역 position은 주로 relative*/
}
.box{
width: 100px;
height: 100px;
position: absolute;
}
.box1{
background-color: rgb(255, 168, 168);
left: 10px;
top: 10px;
}
.box2{
background-color: rgb(212, 247, 212);
left: 30px;
top: 30px;
}
.box3{
background-color: rgb(205, 205, 255);
left: 70px;
top: 70px;
}
</style>
</head>
<body>
<h1>오늘 배울 내용은 position</h1>
<div id="area">
<div class="box box1"></div>
<div class="box box2"></div>
<div class="box box3"></div>
</div>
</body>
|
cs |
- z-index (요소의 수직 위치 / 레이어)
숫자 높을 수록 앞 (숫자 같으면 나중에 선언한 것이 앞)
기본값 = 0
|
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
|
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>배치 방법 지정</title>
<style>
#area{
width: 500px;
height: 500px;
border: 1px solid;
position: relative;
}
.box{
width: 100px;
height: 100px;
position: absolute;
}
.box1{
background-color: rgb(255, 168, 168);
left: 1px;
top: 1px;
z-index: 30;
}
.box2{
background-color: rgb(212, 247, 212);
left: 30px;
top: 30px;
z-index: 20;
}
.box3{
background-color: rgb(205, 205, 255);
left: 70px;
top: 70px;
z-index: 10;
}
</style>
</head>
<body>
<h1>오늘 배울 내용은 position</h1>
<div id="area">
<div class="box box1"></div>
<div class="box box2"></div>
<div class="box box3"></div>
</div>
</body>
|
cs |
- 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
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
|
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>position(fixed)</title>
<style>
#content{
width: 800px;
margin: 0 auto; /*상하 좌우*/
}
#fix{
width: 100px;
height: 100px;
text-align: center;
background-color: azure;
position: fixed; /*스크롤해도 해당 위치에 고정*/
top: 5px;
right: 5px;
}
</style>
</head>
<body>
<div id="fix">
<p>
제품문의<br>
전화번호: 010-7777-7777
</p>
</div>
<div id="content">
<h2>오늘의 뉴스</h2>
<p>오늘 서울 한낮 기온은 29도까지 오르겠고요.
특히 경북 지방을 중심으로는 대구가 32도까지 오르는 등 30도를 웃도는 곳이 많을 것으로 보입니다.
이에 따라, 경북 지방에는 올해 첫 '폭염주의보'가 내려졌습니다.
더위에 지치지 않도록, 수분 섭취를 충분히 해주시기 바랍니다.
오늘 낮 동안 기온이 크게 오르면서 대기가 불안정해져, 내륙 곳곳에 소나기가 지나겠습니다.
예상되는 소나기의 양은 5~40mm로, 지역별로 강수 차가 크게 나겠고요.
소나기가 내리는 동안 벼락과 돌풍이 동반되거나, 우박이 떨어지는 곳도 있겠습니다.</p>
<img src="images/Penguins.jpg" alt="" width="700">
<p>오늘 서울 한낮 기온은 29도까지 오르겠고요.
특히 경북 지방을 중심으로는 대구가 32도까지 오르는 등 30도를 웃도는 곳이 많을 것으로 보입니다.
이에 따라, 경북 지방에는 올해 첫 '폭염주의보'가 내려졌습니다.
더위에 지치지 않도록, 수분 섭취를 충분히 해주시기 바랍니다.
오늘 낮 동안 기온이 크게 오르면서 대기가 불안정해져, 내륙 곳곳에 소나기가 지나겠습니다.
예상되는 소나기의 양은 5~40mm로, 지역별로 강수 차가 크게 나겠고요.
소나기가 내리는 동안 벼락과 돌풍이 동반되거나, 우박이 떨어지는 곳도 있겠습니다.</p>
<p>오늘 서울 한낮 기온은 29도까지 오르겠고요.
특히 경북 지방을 중심으로는 대구가 32도까지 오르는 등 30도를 웃도는 곳이 많을 것으로 보입니다.
이에 따라, 경북 지방에는 올해 첫 '폭염주의보'가 내려졌습니다.
더위에 지치지 않도록, 수분 섭취를 충분히 해주시기 바랍니다.
오늘 낮 동안 기온이 크게 오르면서 대기가 불안정해져, 내륙 곳곳에 소나기가 지나겠습니다.
예상되는 소나기의 양은 5~40mm로, 지역별로 강수 차가 크게 나겠고요.
소나기가 내리는 동안 벼락과 돌풍이 동반되거나, 우박이 떨어지는 곳도 있겠습니다.</p>
<p>오늘 서울 한낮 기온은 29도까지 오르겠고요.
특히 경북 지방을 중심으로는 대구가 32도까지 오르는 등 30도를 웃도는 곳이 많을 것으로 보입니다.
이에 따라, 경북 지방에는 올해 첫 '폭염주의보'가 내려졌습니다.
더위에 지치지 않도록, 수분 섭취를 충분히 해주시기 바랍니다.
오늘 낮 동안 기온이 크게 오르면서 대기가 불안정해져, 내륙 곳곳에 소나기가 지나겠습니다.
예상되는 소나기의 양은 5~40mm로, 지역별로 강수 차가 크게 나겠고요.
소나기가 내리는 동안 벼락과 돌풍이 동반되거나, 우박이 떨어지는 곳도 있겠습니다.</p>
</div>
</body>
|
cs |
테이블 레이아웃
기존 html (border="1") 테이블 => table, td의 border들 겹쳐진 것
- 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
|
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>표 스타일</title>
<style>
table {
width: 200px;
border: 1px solid blue;
}
table td{
border: 1px dotted cornflowerblue;
text-align: center;
padding: 10px; /*box-sizing 기본값 content-box이므로 표 커짐*/
}
</style>
</head>
<body>
<table>
<caption>프로 야구 경기 (6월 17일)</caption>
<tr>
<td>광주</td><td>삼성 vs KIA</td>
</tr>
<tr>
<td>부산</td><td>SSG vs 롯데</td>
</tr>
<tr>
<td>목동</td><td>LG vs 키움</td>
</tr>
<tr>
<td>잠실</td><td>KT vs 두산</td>
</tr>
<tr>
<td>마산</td><td>한화 vs NC</td>
</tr>
</table>
</body>
|
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
|
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>표 스타일</title>
<style>
.table1{
width: 200px;
border-collapse: collapse; /*이중선 합치기*/
border: 1px solid blue;
}
.table1 td{
text-align: center;
padding: 10px;
border: 1px dotted red;
}
</style>
</head>
<body>
<table class="table1" border="1">
<caption>프로 야구 경기 (6월 17일)</caption>
<tr>
<td>광주</td><td>삼성 vs KIA</td>
</tr>
<tr>
<td>부산</td><td>SSG vs 롯데</td>
</tr>
<tr>
<td>목동</td><td>LG vs 키움</td>
</tr>
<tr>
<td>잠실</td><td>KT vs 두산</td>
</tr>
<tr>
<td>마산</td><td>한화 vs NC</td>
</tr>
</table>
</body>
|
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
|
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>표 스타일</title>
<style>
.table1{
width: 200px;
border-collapse: collapse;
border: 1px solid blue;
}
.table1 td{
text-align: center;
padding: 10px;
border: 1px dotted red;
}
.table2{ /*border 설정 X*/
border-collapse: seperate; /*이중선 간격 띄움*/
border-spacing: 20px 10px; /*border 간 간격 (좌우 상하)*/
width: 300px;
}
.table2 td{
border: 1px solid red;
text-align: center;
padding: 10px;
}
</style>
</head>
<body>
<table class="table1" border="1">
<caption>프로 야구 경기 (6월 17일)</caption>
<tr>
<td>광주</td><td>삼성 vs KIA</td>
</tr>
<tr>
<td>부산</td><td>SSG vs 롯데</td>
</tr>
<tr>
<td>목동</td><td>LG vs 키움</td>
</tr>
<tr>
<td>잠실</td><td>KT vs 두산</td>
</tr>
<tr>
<td>마산</td><td>한화 vs NC</td>
</tr>
</table>
<br>
<table class="table2">
<caption>프로 야구 경기 (6월 18일)</caption>
<tr>
<td>광주</td><td>삼성 vs KIA</td>
</tr>
<tr>
<td>부산</td><td>SSG vs 롯데</td>
</tr>
<tr>
<td>목동</td><td>LG vs 키움</td>
</tr>
<tr>
<td>잠실</td><td>KT vs 두산</td>
</tr>
<tr>
<td>마산</td><td>한화 vs NC</td>
</tr>
</table>
</body>
|
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
|
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>표 스타일</title>
<style>
.table1{
width: 300px;
}
.table1 td{
text-align: center;
}
.table2{
width: 300px;
}
.table2 td{
border: 1px solid rgb(75, 75, 255);
text-align: center;
empty-cells: hide /*빈 셀 감추기*/
}
</style>
</head>
<body>
<table class="table1" border="1"> <!-- table td border 모두 -->
<caption>프로 야구 경기 (6월 17일)</caption>
<tr>
<td>광주</td><td>삼성 vs KIA</td><td>TV중계(SBS)</td>
</tr>
<tr>
<td>부산</td><td>SSG vs 롯데</td><td>TV중계(MBC)</td>
</tr>
<tr>
<td>목동</td><td>LG vs 키움</td><td></td>
</tr>
<tr>
<td>잠실</td><td>KT vs 두산</td><td></td>
</tr>
<tr>
<td>마산</td><td>한화 vs NC</td><td></td>
</tr>
</table>
<br>
<table class="table2"> <!-- td border 만 -->
<caption>프로 야구 경기 (6월 18일)</caption>
<tr>
<td>광주</td><td>삼성 vs KIA</td><td>TV중계(SBS)</td>
</tr>
<tr>
<td>부산</td><td>SSG vs 롯데</td><td>TV중계(MBC)</td>
</tr>
<tr>
<td>목동</td><td>LG vs 키움</td><td></td>
</tr>
<tr>
<td>잠실</td><td>KT vs 두산</td><td></td>
</tr>
<tr>
<td>마산</td><td>한화 vs NC</td><td></td>
</tr>
</table>
</body>
|
cs |
- 영어 공백 X -> 한 단어 취급하여 한 줄 유지 ( cf .한글 )
|
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
|
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>표 스타일</title>
<style>
.table1{
width: 300px;
}
</style>
</head>
<body>
<table class="table1" border="1">
<tr>
<td>오늘은금요일이고테이블스타일공부중</td>
<td>email: honggildong@hanmail.net</td>
<!-- 한글은 공백 없어도 width에 맞춰 줄맞춰짐-->
</tr>
<tr>
<td>대한민국</td>
<td>가나다라</td>
</tr>
</table>
</body>
|
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
|
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>표 스타일</title>
<style>
.table1{
width: 300px;
table-layout: fixed; /*지정한 width 변하지 않도록 고정값 부여*/
word-break: break-all; /*영어 강제 줄바꿈*/
}
</style>
</head>
<body>
<table class="table1" border="1">
<tr>
<td>오늘은금요일이고테이블스타일공부중</td>
<td>email: honggildong@hanmail.net</td>
</tr>
<tr>
<td>대한민국</td>
<td>가나다라</td>
</tr>
</table>
</body>
|
cs |
- padding, height 차이
|
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
|
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>표 스타일</title>
<style>
.table2{
width: 300px;
height: 100px;
}
.table2 td{
text-align: center;
/* padding: 0 20px; 글자 관련 기능 아님 -> 의도치 않게 줄바꿈될 수도 */
vertical-align: middle;
}
</style>
</head>
<body>
<table class="table2" border="1">
<tr>
<td>여러분</td><td>화이팅</td>
</tr>
<tr>
<td>금요일</td><td>즐겁게</td>
</tr>
</table>
</body>
|
cs |
필터
opacity(%) : 투명도
blur(px) : 흐리게
grayscale(%) : 흑백
contrast(%) : 대비
drop-shadow(px px px color) : 그림자효과
hue-rotate(deg) : 색상보정
invert(%) : 색상반전
saturate(%) : 채도
sepia(%) : 세피아필터
|
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
|
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>필터</title>
<style>
.img1{
filter: blur(10px);
transition: all 2s;
}
.img1:hover{
filter: blur(0);
}
.img2{
filter: grayscale(100%);
}
.img2:hover{
filter: grayscale(0%);
transition: all 2s;
}
</style>
</head>
<body>
<img class="img1" src="images/coffee-blue.jpg" alt="">
<img class="img2" src="images/Penguins.jpg" alt="">
</body>
|
cs |
transition 문제
- 그림 밑에 캡션 숨김 -> 사진에 포인터 올리면 캡션 올라오며 표시됨
|
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
|
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>전환 효과</title>
<style>
h2{
text-align: center;
}
.dogList img{
width: 300px;
height: 250px;
}
.dogList li{
float: left;
margin-right: 10px;
list-style: none;
position: relative;
}
.dogList .caption{
width: 300px;
height: 250px;
background-color: rgba(0,0,0,0.5);
position: absolute;
left: 0;
top: 250px;
opacity: 0;
transition: all 0.3s;
}
.dogList h3, .dogList p {
text-align: center;
color: white;
line-height: 60px;
}
.dogList li:hover .caption{
opacity: 1;
transform: translateY(-250px);
}
</style>
</head>
<body>
<h2>애완견 전환 효과</h2>
<div id="container">
<ul class="dogList">
<li>
<img src="images/doberman.jpg" alt="">
<div class="caption">
<h3>도베르만</h3>
<p>나이 : 2살</p>
<p>특징: 다정, 생기발랄</p>
</div>
</li>
<li>
<img src="images/shepherd.jpg" alt="">
<div class="caption">
<h3>셰퍼드</h3>
<p>나이 : 2살</p>
<p>특징: 다정, 생기발랄</p>
</div>
</li>
<li>
<img src="images/dalmatian.jpg" alt="">
<div class="caption">
<h3>달마시안</h3>
<p>나이 : 2살</p>
<p>특징: 다정, 생기발랄</p>
</div>
</li>
</ul>
</div>
</body>
|
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
|
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
h2{
text-align: center;
}
#container{
text-align: center;
}
.dogList img{
width: 300px;
height: 180px;
}
.dogList li{
display: inline-block;
text-align: center;
position: relative;
}
.dogList .caption{
width: 300px;
height: 180px;
color: white;
background-color: rgba(0,0,0,0.5);
opacity: 0;
position: absolute;
top: 180px;
box-sizing: border-box;
padding: 20px;
transition: all 0.3s;
}
.dogList img:hover+.caption{
opacity: 1;
transform: translateY(-180px);
}
</style>
<body>
<h2>애완견 전환 효과</h2>
<div id="container">
<ul class="dogList">
<li>
<img src="../../doberman.jpeg" alt="">
<div class="caption">
<h3>도베르만</h3>
<p>나이 : 2살</p>
<p>특징: 다정, 생기발랄</p>
</div>
</li>
<li>
<img src="../../shepherd.jpg" alt="">
<div class="caption">
<h3>셰퍼드</h3>
<p>나이 : 2살</p>
<p>특징: 다정, 생기발랄</p>
</div>
</li>
<li>
<img src="../../dalmatian.jpg" alt="">
<div class="caption">
<h3>달마시안</h3>
<p>나이 : 2살</p>
<p>특징: 다정, 생기발랄</p>
</div>
</li>
</ul>
</div>
</body>
|
cs |
=> 학원에서 문제 풀 땐 계속 transition 구현이 안 돼서 너무 머리 아팠는데 복습을 하며 뭐가 문제였는지 깨달았다. img:hover로 할땐 .caption이 형제선택자니 +를 입력해야 했는데 자식선택자에게 쓰는 띄어쓰기를 했었다.. 선택자 부분 다시 복습해야지
홈페이지 실습
- index.html
|
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
|
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/index.css">
<title>DD 베이커리</title>
</head>
<body>
<!-- 헤더 영역 시작-->
<header>
<div class="logo">
<a href="#"><img src="images/LOGO.jpg" alt=""></a>
</div>
<nav>
<ul>
<li class="dropdown"><a href="#">DD 소개</a></li>
<li class="dropdown"><a href="#" class="dropbtn">빵 만들기</a>
<ul class="dropdown_content">
<li><a href="#">제빵 재료</a></li>
<li><a href="#">제빵 도구</a></li>
<li><a href="#">제빵 포장재료</a></li>
</ul>
</li>
<li class="dropdown"><a href="#" class="dropbtn">커뮤니티</a>
<ul class="dropdown_content">
<li><a href="#">나만의 레시피</a></li>
<li><a href="#">내가 만든 빵</a></li>
<li><a href="#">제빵 노하우</a></li>
</ul>
</li>
</ul>
</nav>
</header>
<!-- 헤더 영역 종료 -->
<!-- 메인 이미지 영역 시작 -->
<div id="main_image">
<div class="imgs">
<img src="images/images(1).jpg" alt="">
</div>
<div class="welcome">
<h1>베이커리 카페</h1>
<h2>세상에 하나뿐인 베이커리</h2>
</div>
</div>
<!-- 메인 이미지 영역 끝 -->
<!-- 메인 콘텐츠 영역 시작 -->
<div id="contents">
<!-- 공지사항 영역 시작 -->
<div class="notice">
<h2>공지사항</h2>
<table>
<tr>
<th>내용</th><th>날짜</th>
</tr>
<tr>
<td>제1회 DD 베이커리 워크숍에 초대합니다(서울권)</td><td>2017-12-12</td>
</tr>
<tr>
<td>올림픽공원 카페 초보 여성 창업을 추천받습니다.</td><td>2017-12-10</td>
</tr>
<tr>
<td>맛과 영양, 환경문제까지 생각하는 베이커리!</td><td>2018-03-09</td>
</tr>
<tr>
<td>고품질 크림으로 만든 디저트로 달콤하게 겨울나기</td><td>2018-03-07</td>
</tr>
<tr>
<td>온가족이 함께 즐기는 베이킹 체험 교실</td><td>2018-03-05</td>
</tr>
</table>
</div>
<!-- 공지사항 영역 끝 -->
<!-- Partner 영역 시작 -->
<div class="partner">
<h2>Partner</h2>
<div class="partner_info">
<img src="images/PARTNER.jpg" alt="">
<img src="images/PARTNER_UP.png" alt="">
</div>
</div>
<!-- Partner 영역 종료 -->
<!-- 아이콘 제작 콘텐츠 영역 시작 -->
<div class="icons">
<div class="icon">
<img src="images/icon1.png" alt="">
<button>고수의 레시피</button>
</div>
<div class="icon">
<img src="images/icon2.png" alt="">
<button>모임 일정</button>
</div>
<div class="icon">
<img src="images/icon3.png" alt="">
<button>식품안전관리</button>
</div>
</div>
<!-- 아이콘 제작 콘텐츠 영역 끝 -->
</div>
<!-- 메인 콘텐츠 영역 끝 -->
<!-- 푸터 영역 시작-->
<footer>
<ul>
<li><a href="#">법적고지</a></li>
<li><a href="#">개인정보취급방침</a></li>
<li><a href="#">개인정보처리방침</a></li>
</ul>
<address>
사업자번호:228-81-03754<br>
상호명:(주)디디베이커리<br>
대표자:다진<br>
개인정보관리책임자:윤준우<br>
상담전화:1588-0789<br>
사업장주소:서울특별시 금천구 가산동 가산디지털2로<br>
E-mail : master@ddbb.com
</address>
</footer>
<!-- 푸터 영역 끝 -->
</body>
|
cs |
'Programming > 국비학원' 카테고리의 다른 글
| 220621 - 반응형 웹(고정/가변 그리드, 미디어 쿼리, flex box) (0) | 2022.06.22 |
|---|---|
| 220620 - css(홈페이지 구현 실습) (0) | 2022.06.21 |
| 220616 - css (box-sizing, float, column, transition, transform, animation) (0) | 2022.06.17 |
| 220615 - css - 그라데이션, 레이아웃, 테두리 (0) | 2022.06.16 |
| 220614 - css - 선택자(가상, 가상 요소), 문단, 리스트, 배경 스타일 (0) | 2022.06.15 |
