728x90
02_align.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>요안도라</title>
<link href="style.css" rel="stylesheet" type="text/css">
<style>
@import "../css/02_align.css";
</style>
</head>
<body>
<div class="container">
<header> </header>
<nav class="navi">
<ul>
<li><a href="#">이용 안내</a></li>
A <li><a href="#">객실 소개</a></li>
<li><a href="#">예약 방법</a></li>
<li><a href="#">예약하기</a></li>
</ul>
</nav>
<
<h2>요안도라 소개</h2>
<article>
<h3>¤ 요안도라는 게스트 하우스(Guest House) 형식의 농어촌 민박입니다</h3>
<p id="para1">
<strong>text-align:left</strong><br> 성산의 날씨는 다음주 내내 높은 구름에 햇살
가득이라고 합니다. 목요일이면 섭씨 27도까지 오른다고 하지만, 늘 부는 바람이 쾌적한 균형을 잡아 마당에 마당에 나가
앉아 있는 시간이 많아질듯 합니다.
</p>
<p id="para2">
<strong>text-align:right</strong><br>오늘은 사진에 보이는 긴 돌담을 따라 들어오는
요안도레 올레 입구에 특곤색의 대문을 달았습니다.
</p>
<p id="para3">
<strong>text-align:center</strong><br>내일은 두달 여동안 밖거리에 만든 데스트
하우스에 연백색의 황토 페인트를 칠할 예정입니다. <br> 그리고 이것저것 사소한 저이를 마치고 나면, 나이
드시고 젊고 한 미지의 새식구들을 설렘으로 만나고 함께하고, 도시의 바븐 생활로 소원해진 오래된 친구와의 우정을 이
제주에서 새롭게 열어나가기 위해 요안도라를 세상에 알리려고 합니다.
</p>
<p id="para4">
<strong>text-align:justify</strong><br>그럼 이 홈페이지를 공식적으로 체계적으로
갖추면서, 그동안 공사로 어수선해 올려드리지 못한 집 안팎 사진들을 상세하게 올리고 당신을 만날 채비를 마치겠습니다.
</p>
</article>
</section>
</div>
</body>
</html>
02_align.css
@CHARSET "UTF-8";
body{
width: 960px;
margin: 0 auto;
}
nav.navi ul li {
list-style: none;
float: left;
margin-left: 0px;
padding: 10px;
background-color: yellow;
}
nav.navi ul li a{
padding: 10px 5px 5px 35px;
display: block;
color: #000000;
width: 165px;
text-decoration: none;
}
h2{
clear: both;
padding-top: 10px;
}
p{
border: 1px solid black;
padding: 10px;
margin-top: 10px;
margin-right: 10px;
}
#para1{
text-align: left;
}
#para2{
text-align: right;
}
#para3{
text-align: center;
}
#para4{
text-align:justify; /* 균등 정렬, 양쪽 정렬 */
}
strong{
color: red;
}
728x90
'WEB > CSS' 카테고리의 다른 글
| [CSS] ch02-04.overflow (0) | 2017.08.23 |
|---|---|
| [CSS] ch02-03. shadow (0) | 2017.08.23 |
| [CSS] ch02-01. font (폰트) (0) | 2017.08.23 |
| [CSS] ch01-11. navigation (0) | 2017.08.23 |
| [CSS] ch01-10. pseudo (0) | 2017.08.23 |
댓글