CSS ⭐ ③ 필수 속성 - (3) 연습 문제

1번 - 그림자 효과

위의 이미지를 CSS만 사용해서 아래의 이미지처럼 표시 하세요.

이미지 테두리에 1px짜리 회색(#ccc) 실선을 그립니다.
border-radius 속성을 사용해서 사각형을 원형으로 변경
box-shadow 속성을 사용해서 이미지 주변에 그림자 효과를 추가 합니다.

내가 작성한 코드

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .container {
      width: 350px;
      margin: 30px auto;
    }
    img {
      border: 1px solid #ccc;
      border-radius: 100%;
      box-shadow: 0px 0px 40px gray;
    }
  </style>
</head>
<body>
  <div class="container">
    <img src="./images/bear.jpg" alt="곰돌이">
  </div>
</body>
</html>

2번 - 화면 배치

<section> 태그 안에 <article> 태그 4개와 <footer>태그 1개가 포함되어 있습니다.

해당 화면처럼 article 요소를 격자 형태로 배치 하세요.

section의 폭은 800px
article요소의 너비 350px, 높이 200px, 마진과패딩 10px
article요소의 border 라인은 두께 1px, 색상은 (#ccc) 실선을 그립니다.

내가 작성한 코드

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

팁(Tip)

폰트 사이즈는 가급적 em으로 지정할 것
body를 div태그로 한번 감싸주고(이 문제에서는 section으로 했지만) width와 margin 잡을 것
선택자 지정 잘할 것

3번 - 네비게이션 바 만들기

아래와 같이 꾸며 보세요.

메뉴2는 마우스의 커서를 올렸을때(hover)의 상태 입니다.
메뉴 이동에 대한 a href=”#”으로 표시 합니다.

내가 작성한 코드

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .container {
      width: 800px;
      margin: 0 auto;
    }
    ul {
      list-style: none;
    }
    a {
      width: 100px;
      text-align: center;
      text-decoration: none;
      color: #000;
      background-color: #ccc;
      float: left;
      padding: 23px;
      font-size: 2em;
    }
    a:hover {
      background-color: #000;
      color: white;
    }
  </style>
</head>
<body>
  <div class="container">
    <ul>
      <li><a href="#">메뉴1</a></li>
      <li><a href="#">메뉴2</a></li>
      <li><a href="#">메뉴3</a></li>
      <li><a href="#">메뉴4</a></li>
    </ul>
  </div>
</body>
</html>

강사님 코드

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    /* 스타일을 제거하고 시작 */
    ul {
      list-style: none;
    }
    ul > li {
      float: left;
    }
    a {
      display: block;
      text-decoration: none;
      /* margin으로 하면 텍스트만 잡힘 */
      padding: 10px 20px;
      background-color: #ccc;
      color: black;
      
    }
    a:hover {
      background-color: black;
      color: white;
    }
  </style>
</head>
<body>
  <nav>
    <ul>
      <li><a href="#">메뉴1</a></li>
      <li><a href="#">메뉴2</a></li>
      <li><a href="#">메뉴3</a></li>
      <li><a href="#">메뉴4</a></li>
    </ul>
  </nav>
</body>
</html>

팁(Tip)

inline block으로 바꿔주는 법 : display: block;
margin으로 하면 텍스트만 범위로 잡힘.

저작자표시 비영리 변경금지

'🎨 Frontend > HTML & CSS' 카테고리의 다른 글

CSS ④ 전환 효과 - (2) 애니메이션 속성 (2)	2023.03.15
CSS ④ 전환 효과 - (1) transition, 실습 예제(쇼핑몰 상품 목록) (2)	2023.03.15
CSS ⭐ ③ 필수 속성 - (2) 화면 배치 (1)	2023.03.15
CSS ⭐ ③ 필수 속성 - (1) 텍스트, 박스 모델 속성 (0)	2023.03.14
CSS - ② 선택자 (0)	2023.03.13

1번 - 그림자 효과

2번 - 화면 배치

3번 - 네비게이션 바 만들기

'🎨 Frontend > HTML & CSS' 카테고리의 다른 글

검색 태그

티스토리툴바