728x90
반응형
18_column.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>요안도라</title>
<style>
@import "../css/18_column.css";
body {
font: 14px "맑은 고딕";
}
h1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 3em;
}
h2 {
font-size: 2em;
}
h3 {
font-size: 1.5em;
}
.container {
width: 90%;
margin: 0 auto;
background-color: #fff;
border: 1px solid #E7E7E7;
}
footer {
clear: both;
width: 100%;
padding: 5px;
background: orange;
text-align: center;
}
header, section, footer, aside, article, figure {
display: block;
}
</style>
</head>
<body>
<div class="container">
<h1>Joandora</h1>
<h2>가장 제주다운 수산리집</h2>
<section class="multicol">
<article>
<p>
<strong>요안도라는 게스트 하우스(Guest House) 형식의 농어촌 민박입니다</strong>
</p>
<p>성산의 날씨는 다음주 내내 높은 구름에 햇살 가득이라고 합니다. 목요일이면 섭씨 27도까지 오른다고
하지만, 늘 부는 바람이 쾌적한 균형을 잡아 마당에 마당에 나가 앉아 있는 시간이 많아질듯 합니다.</p>
<p>오늘은 사진에 보이는 긴 돌담을 따라 들어오는 요안도레 올레 입구에 특곤색의 대문을 달았습니다.</p>
<p>
내일은 두달 여동안 밖거리에 만든 데스트 하우스에 연백색의 황토 페인트를 칠할 예정입니다. <br> 그리고
이것저것 사소한 저이를 마치고 나면, 나이 드시고 젊고 한 미지의 새식구들을 설렘으로 만나고 함께하고, 도시의 바븐
생활로 소원해진 오래된 친구와의 우정을 이 제주에서 새롭게 열어나가기 위해 요안도라를 세상에 알리려고 합니다.
</p>
<h3 class="subtitle">요안도라 소개</h3>
<p>그럼 이 홈페이지를 공식적으로 체계적으로 갖추면서, 그동안 공사로 어수선해 올려드리지 못한 집 안팎 사진들을
상세하게 올리고 당신을 만날 채비를 마치겠습니다.</p>
</article>
</section>
<footer>
<p>제주특별자치도 남제주군 성산읍 수산리 000 번지 요안도라</p>
<address>
<strong>예약문의</strong> 070-###-####, yoan##@naver.com
</address>
<p>Copyright ⓒ. All rights reserved.</p>
</footer>
</div>
</body>
</html>18_column.css
@CHARSET "UTF-8";
.multicol{
columns: auto 3;
column-rule: 1em dotted black;/*칼럼크기 칼럼모양 칼럼색깔*/
}
.subtitle{
column-span: all;/*칼럼 모두를 합친다.*/
background: skyblue;
padding: 5px;
border: 2px double blue;
}
728x90
반응형
'WEB > CSS' 카테고리의 다른 글
| [CSS] ch04-20. tb2 (0) | 2017.08.28 |
|---|---|
| [CSS] ch04-19. tb (0) | 2017.08.28 |
| [CSS] ch04-17. clear (0) | 2017.08.28 |
| [CSS] ch04-16. float (0) | 2017.08.28 |
| [CSS] ch04-15. zindex (0) | 2017.08.28 |