본문 바로가기

css

8장 마무리 문제 2

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>마무리문제 2</title>
  <style>
    section{
      width:800px;
      margin:0 auto;
    }
    h2 {
      font-size:1.5em;
    }
    h3 {
      font-size:1.0em;
    }
    p{
      line-height:20px;
      font-size:12px;
    }
    article {
      float:left;
      width:350px;
      height:200px;
      margin:10px;
      padding:10px;
      border:1px solid #ccc;
    }
    footer {
      clear:left;
      width:100%;
      height:50px;
      background-color:#222;
    }
    footer>p {
      color:white;
      font-size:0.9em;
      text-align:center;
      line-height:50px;
    }
  </style>
</head>
<body>
 <section>
  <h2>강아지 용품 준비하기 </h2>
  <article>
    <h3>강아지 집</h3>
    <p>강아지가 편히 쉴 수 있는 포근한 집이 필요합니다. 강아지의 집은 강아지가 다 큰 후에도 계속 쓸 수 있는 집으로 구입하세요.</p>
    <p>집을 구입하실 때는 박음질이 잘 되어 있는지, 세탁이 간편한 제품인지 꼭 확인하시고 고르시는 것이 좋습니다.</p>
  </article>
  <article>
    <h3>강아지 먹이</h3>
    <p>강아지의 먹이는 꼭 어린 강아지 용으로 나와있는 사료를 선택하세요.</p>
    <p>강아지에게는 성장속도에 맞는 사료를 급여하셔야 합니다.</p>
  </article>
  <article>
    <h3>밥그릇,물병</h3>
    <p>밥그릇은 쉽게 넘어지지 않도록 바닥이 넓은 것이 좋습니다.</p>
    <p>밥그릇에 물을 주게 되면 입주면에 털이 모두 젖기 때문에 비위생적이므로 대롱을 통해서 물을 먹을 수 있는 물병을 마련하시는 것이 좋습니다.</p>
  </article>
  <article>
    <h3>이름표,목줄</h3>
    <p>강아지를 잃어버릴 염려가 있으니 산책할 무렵이 되면 이름표를 꼭 목에 걸어주도록 하세요.</p>
    <p>그리고 방울이 달린 목걸이를 하고자 하실 때는 신중하셔야 합니다.</p>
  </article>
  <footer>
    <p>boxmodel 연습하기 </p>
  </footer>
</section>
</html>
 

'css' 카테고리의 다른 글

9장 예제 - 불릿 대신 배경 이미지 사용하기  (0) 2023.03.30
8장 마무리 문제 3  (0) 2023.03.28
8장 마무리 문제 1  (0) 2023.03.28
8장 실습 5  (0) 2023.03.28
8장 예제 - position 속성으로 요소 위치 저장하기  (0) 2023.03.28