ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • CSS 실습
    카테고리 없음 2023. 1. 20. 22:14

    나의풀이

     

    <!DOCTYPE html>
    <html lang="ko">
    <head>
      <meta charset="UTF-8">
      <title>상품 소개 페이지</title>
      <style>
        #container{
          border: solid 1px;
          margin-left:auto; 
          margin-right:auto;
          width:500px;
          padding:5px 20px;   
        }   
      </style>
    </head>
    <body>
      <div id="container">
        <h1>레드향</h1>
        <p>껍질에 붉은 빛이 돌아 레드향이라 불린다.</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>
        #container{
          width: 500px;  
          border: solid 1px #000; 
          padding:10px;
          margin: 10px auto;
        /* margin 속성값을 auto로 설정하면, 웹 브라우저가 수평 방향 마진(margin) 값을 자동으로 설정 */
        /* HTML 요소의 왼쪽과 오른쪽 마진을 자동으로 설정 */
        } 
      
      </style>
    </head>
    <body>
      <div id="container">
        <h1>레드향</h1>
        <p>껍질에 붉은 빛이 돌아 레드향이라 불린다.</p>
        <p>레드향은 한라봉과 귤을 교배한 것으로 일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
        <p>비타민 C와 비타민 P가 풍부해 혈액순환, 감기예방 등에 좋은 것으로 알려져 있다.</p>
      </div>
    </body>
    </html>

    댓글

Designed by Tistory.