WEB/CSS

[CSS] ch01-08. group

밍글링글링 2017. 8. 22.
728x90

08_group.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>요안도라</title>
<style>
@import "../css/08_group.css";
</style>
</head>

<body>
    <section>
        <h1>요안도라 소개</h1>
        <h3>요안도라는 게스트 하우스(Guest House) 형식의 농어촌 민박입니다</h3>
        <p>성산의 날씨는 다음주 내내 높은 구름에 햇살 가득이라고 합니다. 목요일이면 섭씨 27도까지 오른다고 하지만, 늘
            부는 바람이 쾌적한 균형을 잡아 마당에 마당에 나가 앉아 있는 시간이 많아질듯 합니다. 오늘은 사진에 보이는 긴 돌담을 따라
            들어오는 요안도레 올레 입구에 특곤색의 대문을 달았습니다.</p>
    </section>
</body>
</html>

 

08_group.css

@CHARSET "UTF-8";

h1, h3{
    font-family: "돋움"; /*돋움 글꼴// 현장에서는 돋움, 굴림 선호.*/
    color: purple; /*글자색 보라*/
}
p{
    font-size: 12px; /* 글자크기 12px*/
    line-height: 20px; /*줄간격 20px*/
    margin: 10px 20px; /*바깥 여백 상하 10px, 좌우 20px*/
    border: 1px solid #ccc; /* 1px 회색의 실선 테두리*/
    padding: 5px; /*단락 안여백 5px*/
}

728x90

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

[CSS] ch01-10. pseudo  (0) 2017.08.23
[CSS] ch01-09. attr  (0) 2017.08.22
[CSS] ch01-07.child  (0) 2017.08.22
[CSS] ch01-06. descendant  (0) 2017.08.22
[CSS] ch01-05. ID  (0) 2017.08.22

댓글