728x90
반응형

06_indent.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>요안도라</title>
<link href="style.css" rel="stylesheet" type="text/css">
<style>
    @import "../css/06_indent.css";
</style>
</head>

<body>
    <div class="container"> <!-- 의미가 없는 블럭영역 // 대부분 스타일영역으로 쓰인다  -->
        <header></header>
        <nav class="navi">
            <ul>
                <li><a href="#">이용 안내</a></li>
                <li><a href="#">객실 소개</a></li>
                <li><a href="#">예약 방법</a></li>
                <li><a href="#">예약하기</a></li>
            </ul>
        </nav>
        <section class="content">
            <h2>요안도라 소개</h2>
            <article>
                <h3>¤ 요안도라는 게스트 하우스(Guest House) 형식의 농어촌 민박입니다</h3>
                <p>성산의 날씨는 다음주 내내 높은 구름에 햇살 가득이라고 합니다. 목요일이면 섭씨 27도까지 오른다고
                    하지만, 늘 부는 바람이 쾌적한 균형을 잡아 마당에 마당에 나가 앉아 있는 시간이 많아질듯 합니다.</p>
                <p id="indnt1">오늘은 사진에 보이는 긴 돌담을 따라 들어오는 요안도레 올레 입구에 특곤색의 대문을
                    달았습니다.</p>
                <p id="indnt2">
                    내일은 두달 여동안 밖거리에 만든 데스트 하우스에 연백색의 황토 페인트를 칠할 예정입니다. <br> 그리고
                    이것저것 사소한 저이를 마치고 나면, 나이 드시고 젊고 한 미지의 새식구들을 설렘으로 만나고 함께하고, 도시의 바븐
                    생활로 소원해진 오래된 친구와의 우정을 이 제주에서 새롭게 열어나가기 위해 요안도라를 세상에 알리려고 합니다.
                </p>
                <p id="indnt3">그럼 이 홈페이지를 공식적으로 체계적으로 갖추면서, 그동안 공사로 어수선해 올려드리지
                    못한 집 안팎 사진들을 상세하게 올리고 당신을 만날 채비를 마치겠습니다.</p>
            </article>
        </section>
    </div>
</body>
</html>

 

06_indent.css

@CHARSET "UTF-8";

#indnt1{
    text-indent: 10px;/*들여쓰기*/
}
#indnt2{
    text-indent: 50px;
}
#indnt3{
    text-indent: 90px;
}
p {
    border: 1px solid black;
    padding: 10px;
    margin-bottom: 10px;
    margin-right: 10px;
}

.

728x90
반응형

'WEB > CSS' 카테고리의 다른 글

[CSS] ch02-08. list  (0) 2017.08.23
[CSS] ch02-07. spacing  (0) 2017.08.23
[CSS] ch02-05. decoration  (0) 2017.08.23
[CSS] ch02-04.overflow  (0) 2017.08.23
[CSS] ch02-03. shadow  (0) 2017.08.23

티스토리툴바