티스토리 뷰
<컴퓨터 화면>
<모바일 화면>
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
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
|
<body>
<div id="wrap">
<div id="header">
<p>
Joandora
</p>
</div>
<div id="navigation">
<ul>
<li>
<a href="#">이용 안내</a>
</li>
<li>
<a href="#">객실 소개</a>
</li>
<li>
<a href="#">예약 방법</a>
</li>
<li>
<a href="#">예약 하기</a>
</li>
</ul>
</div>
<div id="mid">
<div id="content">
<h3>요안도라 소개</h3>
<p>
<b>¤ 요안도라는 게스트 하우스(Guest House) 형식의 농어촌 민박입니다</b>
</p>
<p>성산의 날씨는 다음주 내내 높은 구름에 햇살 가득이라고 합니다. 목요일이면 섭씨 27도까지 오른다고 하지만, 늘 부는 바람이 쾌적한 균형을
잡아 마당에 마당에 나가 앉아 있는 시간이 많아질듯 합니다.</p>
<p>오늘은 사진에 보이는 긴 돌담을 따라 들어오는 요안도레 올레 입구에 특곤색의 대문을 달았습니다.</p>
<p>내일은 두달 여동안 밖거리에 만든 게스트 하우스에 연백색의 황토 페인트를 칠할 예정입니다.</br>
그리고 이것저것 사소한 정리를 마치고 나면, 나이 드시고 젊고 한 미지의 새식구들을 설렘으로 만나고 함께하고, 도시의 바쁜 생활로 소원해진
오래된 친구와의 우정을 이 제주에서 새롭게 열어나가기 위해 요안도라를 세상에 알리려고 합니다.</p>
<p>
그럼 이 홈페이지를 공식적으로 체계적으로 갖추면서, 그동안 공사로 어수선해 올려드리지 못한 집 안팎 사진들을 상세하게 올리고 당신을 만날 채비를
마치겠습니다.</p>
</p>
</div>
<div id="side_banner">
<div id="images">
<img src="1.jpg">
<img src="2.jpg">
<img src="3.jpg">
</div>
</div>
</div>
<div id="footer">
<div id="address">
제주특별자치도 남제주군 성산읍 수산리 000번지<br/>
</div>
<div id="last">
<i>Copyright©. All rights reserved.</i>
</div>
</div>
</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
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
|
<head>
<style>
@media screen and (min-width: 768px) {
body {
background: linear-gradient(to bottom, skyblue, white 50%);
background-repeat: no-repeat;
background-size: cover;
}
#wrap {
width: 950px;
margin: 10px auto;
border: 1px solid #cccccc;
}
#header {
background-image: url("bg.png");
background-size: cover;
overflow: hidden;
height: 280px;
}
#header p {
color: yellow;
float: left;
font-size: 4em;
font-weight: bold;
padding-left: 10px;
font-family: Arial;
text-shadow: 0 2px 1px #000;
}
#navigation {
overflow: hidden;
background-color: darkgreen;
height: 62px;
}
ul li {
list-style: none;
float: left;
margin-right: 77px;
margin-top: 4px;
margin-left: 34px;
}
ul li a {
text-decoration: none;
color: white;
}
#mid {
height: 372px;
overflow: hidden;
}
#content {
width: 717px;
background-color: white;
float: left;
padding-left: 10px;
padding-right: 8px;
}
#content p:nth-child(3) {
font-size: 0.883em;
}
#content p:nth-child(4) {
font-size: 0.883em;
}
#content p:nth-child(5) {
font-size: 0.883em;
}
#content p:nth-child(6) {
font-size: 0.883em;
}
#side_banner {
width: 215px;
height: 439px;
background-color: #dfd;
float: left;
}
#images {
margin-left: 10px;
margin-top: 13px;
}
#side_banner img {
margin-top: 6px;
width: 195px;
}
#footer {
color: white;
background-color: black;
height: 82px;
text-align: center;
}
#address {
padding-top: 23px;
margin-top: 0;
font-size: 0.8em;
}
#last {
font-size: 0.8em;
padding-top: 16px;
}
}
|
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
|
@media screen and (max-width: 767px) {
body {
background: linear-gradient(to bottom, skyblue, white 50%);
background-repeat: no-repeat;
background-size: cover;
}
#wrap {
width: 362px;
margin: 10px auto;
border: 1px solid #cccccc;
}
#header {
color: yellow;
background-color: black;
height: 100px;
}
#header p {
padding-top: 20px;
padding-left: 10px;
margin: 0;
font-weight: bold;
font-size: 3em;
font-family: Arial;
}
#navigation {
overflow: hidden;
background-color: white;
height: 245px;
}
ul li:hover {
color: red;
}
ul li {
list-style: none;
border: 1px solid #cccccc;
width: 313px;
height: 37px;
border-radius: 9px;
margin-bottom: 9px;
margin-left: -16px;
overflow: hidden;
}
ul li a {
text-decoration: none;
margin-left: 118px;
float: left;
margin-top: 8px;
}
#content {
height: 585px;
padding-left: 8px;
background-color: white;
}
#content h3 {
font-weight: bold;
font-size: 25px;
margin: 0;
}
#content p:nth-child(2) {
font-size: 18px;
padding-right: 65px;
}
#side_banner img {
margin-top: 3px;
width: 329px;
}
#images {
margin-left: 18px;
}
#footer {
color: white;
background-color: black;
height: 90px;
text-align: center;
}
#address {
padding-top: 24px;
margin-top: 0;
}
#last {
padding-top: 14px;
}
}
</style>
</head>
|
cs |
'HTML & CSS' 카테고리의 다른 글
| HTML 11월12일 OverFlow: Hidden (0) | 2021.11.12 |
|---|---|
| HTML ID & CLASS 홀리그레일 (holy grail layout) (0) | 2021.11.07 |
| HTML 폼 태그 (form tag) (0) | 2021.11.04 |
| HTML 비디오 출력 (0) | 2021.11.04 |
| html 이미지 및 오디오 출력 (image, audio) (0) | 2021.11.03 |
댓글