HTML&CSS/실습

CSS 실습 - 클래스 선택자 사용하기

yunajoe 2023. 1. 20. 21:37

나의풀이

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>상품 소개 페이지</title>
  <style>
    .accent.bg{
      background-color: grey;
      color:black;
      padding:10px;
      border: solid 1px;
    }

    .accent {
      border: solid 1px;
      padding: 5px 10px;
    }

    p{
      font-style: italic;
    }    

  </style> 
</head>
<body>
  <div>
    <h1 class="accent bg">레드향</h1>
    <p>껍질에 붉은 빛이 돌아 <span class="accent">레드향</span>이라 불린다.</p>
    <p>레드향은 한라봉과 귤을 교배한 것으로 일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
    <p>비타민 C와 비타민 P가 풍부해 혈액순환, 감기예방 등에 좋은 것으로 알려져 있다.</p>
  </div>
</body>
</html>

 

해설풀이

 

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>상품 소개 페이지</title>
  <style>
    .accent.bg{
      background-color: grey;
  
    }

    .accent {
      border: solid 1px #000;
      padding: 5px;  
      /* 테두리와 내용 사이의 여백 */
    }

    p{
        font-style: italic;
      /* 이탤릭체 */
    }    

  </style> 
</head>
<body>
  <div>
    <h1 class="accent bg">레드향</h1>
    <p>껍질에 붉은 빛이 돌아 <span class="accent">레드향</span>이라 불린다.</p>
    <p>레드향은 한라봉과 귤을 교배한 것으로 일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
    <p>비타민 C와 비타민 P가 풍부해 혈액순환, 감기예방 등에 좋은 것으로 알려져 있다.</p>
  </div>
</body>
</html>