[HTML5 & CSS3] 여백을 조절하는 속성들

HTML5 & CSS3

[HTML5 & CSS3] 여백을 조절하는 속성들

코딩하는 붕어 2021. 2. 12. 15:04

*margin 속성 - 요소 주변 여백 설정하기

기본형)

margin-top : <크기> | <백분율> | auto

margin-right : <크기> | <백분율> | auto

margin-bottom : <크기> | <백분율> | auto

margin-left : <크기> | <백분율> | auto

margin : <크기> | <백분율> | auto

속성 값	설명
<크기>	너비나 높이 값을 px(픽셀)이나 cm(센티미터) 같은 단위와 함께 수치로 지정한다.
<백분율>	박스 모델을 포함하고 있는 부모 요소를 기준으로 너비나 높이 값을 %로 지정한다.
auto	display 속성에서 지정한 값에 맞게 적절한 값을 자동으로 지정한다.

*마진 중첩(margin overlap) 현상

요소를 세로로 배치할 경우, 마진과 마진이 만날 때 마진 값이 큰 쪽으로 겹쳐진다. 이런 현상을 마진 중첩 또는 마진 상쇄 라고 한다.

*padding 속성 - 콘텐츠 영역과 테두리 사이 여백 설정하기

패딩이란 콘텐츠 영역과 테두리 사이의 여백을 말한다. 다시 말해 테두리 안쪽의 여백이라고 생각하면 된다.

기본형)

padding-top : <크기> | <백분율> | auto

padding-right : <크기> | <백분율> | auto

padding-bottom : <크기> | <백분율> | auto

padding-left : <크기> | <백분율> | auto

padding : <크기> | <백분율> | auto

직접 해보세요! ) 박스 모델로 콘텐츠 정리하기

<!DOCTYPE html>
<html lang="ko">
<head>
         <meta charset="utf-8">
         <title>애완견 돌보기</title>
         <link href="layout.css" rel="stylesheet" type="text/css">
         <style>
                article {
                      width:90%;
                      height:auto;
                      margin:20px 10px;
                      padding:20px;
                }
                #pet1{
                      border:1px solid black;
                      border-radius:10px; 
                }
                #pet2 {
                      border:1px dotted blue;
                      border-radius:20px;
                }
                #pet3 {
                      border:2px double green;
                      border-top-left-radius:30px;
                      border-bottom-right-radius:30px;
                }
         </style> 
</head>
<body>
         <header>
                  <h1>애완견 종류</h1>
                  <nav>
                           <ul>
                               <li><a href="#">애완견 종류</a></li>
                               <li><a href="#">입양하기</a></li>
                               <li><a href="#">건강돌보기</a></li>
                               <li><a href="#">더불어살기</a></li>
                           </ul>
                  </nav>
</header>
<section>
         <article id="pet1"> 
                  <h3>활달한 강아지</h3>
                  <dl>
                               <dt>요크셔 테리어 </dt>
                               <dd>생기있고 활달한 성질을 가지고 있으며 자신보다 몸집이 큰 개나 집에 들어온 침입자를 겁                                                              내는 일이 없어 좋은 번견이고 우리나라 최고의의 가정견으로 자리 잡고 있다.</dd>
                               <dt>말티즈 </dt>
                               <dd>애정이 많고, 충실하며 활발한 성격을 소유하고있다. 이 종은 1급 가정견으로 요크셔테리어와 함께 우리나라 최고의 가정견으로 자리잡고 있다.</dd>
                               <dt>포메 라이언</dt>
                               <dd>활기차고 명랑한 개로 유명하고, 걷는 모습이 우아하다.충실하고 우호적인 성격이 가장 먼저 거론된다. </dd>
                               <dt>골든 리트리버</dt>
                               <dd>이 견종은 충성심이 강하고 성격이 활달하여 어린아이나 여성이 상대하기에 적합한 견종이다.참을성 또한 강하여 현재는실내에서도 많이 길러지고 있다.</dd>
                  </dl>
         </article>
         <article id="pet2">
                  <h3>온순한 강아지</h3>
                  <dl>
                               <dt>쉬즈</dt>
                               <dd> 얼굴에서 풍기는 모습처럼 온순, 쉽게 친숙해지고 우호적이며,어린아이나 여성들이 기르기에 적합한 견종이다.</dd> 
                               <dt>퍼그</dt>
                               <dd>매우 사려가 깊고 사랑스러운 견종이며 그다지 손질이 필요하지 않고 식사량에 비해 많은 운동량이 필요하지 않다.</dd>
                               <dt>래브라도 리트리버</dt>
                               <dd>침착하고 영리하여 어린이들을 안심하고 맡길 수 있다. 사람을 즐겁게 해주려는 성질이 있다 공을 가지고 노는 것을 가장 좋아한다. 현재 맹인 안내견과 마약견으로 사용중이다. 온순한 강아지를 좋아하는 분에게는 적합한 견종이다.</dd>
                  </dl>
         </article>
         <article id="pet3">
                  <h3>사납지만 복종적인 강아지</h3>
                  <dl>
                               <dt>미니어쳐핀셔</dt>
                               <dd>경계심이 강하고 영리하며 작은 몸집에 비해 매우 용감하다. 주인에게 매우 복종적이며 작은 몸집에 보디가드 역할을 충실히 수행한다.</dd>
                               <dt>푸들 </dt>
                               <dd>사납진 않으나, 상당히 복종적이며, 지능지수가 애완견종 중 가장 뛰어나다.</dd>
                               <dt>폭스테리어</dt>
                               <dd>가정에서 키우기에 적합한 품종이다. 보호본능이 강하고 정이 많다. 하지만 사냥을 하던 본능이 조금은 남아있어 사나운 면이 있다. 이종을 좋은 품종으로 기르기 위해서는 어릴 때부터 엄한 훈련이 필요하기도 하다.</dd>
                  </dl>
         </article>
         <aside>
                  <h3>건강한 강아지는</h3>
                  <ul>
                               <li>코가 젖어있고 눈꼽이 없어야 합니다.</li>
                               <li>털에 윤기가 있는 것을 골라야 합니다.</li>
                               <li>입에서 고약한 냄새가 나면 병이 있다는 증거입니다.</li>
                               <li>가장 활발하게 움직이는 녀석을 고르는게 좋습니다.</li>
                               <li>강아지들 중에서 적당한 체구를 유지한 강아지가 좋습니다.</li>
                  </ul>
         </aside>
    </section>
    <footer>
         <p>Copyright 2012 funnycom</p>
    </footer>
</body>
</html>

직접 해보세요! ) 2단 레이아웃 만들기 - 구조 마크업, CSS 작성하기

<!DOCTYPE html>
<html lang="ko">
<head>
         <meta charset="utf-8">
         <title>2단 레이아웃</title>
         <style>
                div {
                border : 1px solid #ccc; /* <div> 요소에 테두리 표기 */
                }
                #container {
                         width:960px;
                         padding:20px;
                         margin:0 auto;
                }
                #header {
                         padding:20px;
                         margin-bottom:20px;
                }
                #contents {
                         width:620px;
                         padding:20px;
                         float:left;
                         margin-bottom:20px;
                }
                #sidebar {
                         width:220px;
                         padding:20px;
                         float:right;
                         margin-bottom:20px;
                         background-color:lightgrey;
                }
                #footer {
                         clear:both;
                         padding:20px;
                }
</style>
</head>
<body>
         <div id="container">
               <div id="header">
                     <h1>사이트 제목</h1>
               </div>
               <div id="sidebar">
                     <h2>사이드 바</h2>
                     <ul>
                              <li>모든 국민은 근로의 의무를 진다. 국가는 근로의 의무의 내용과 조건을 민주주의원칙에 따라 법률로 정한다.</li>
                     </ul>
               </div>
               <div id="contents">
                     <h2>본문</h2>
                     <p>재산권의 행사는 공공복리에 적합하도록 하여야 한다. 정부는 회계연도마다 예산안을 편성하여 회계연도 개시 90일전까지 국회에 제출하고, 국회는 회계연도 개시 30일전까지 이를 의결하여야 한다.</p>
                     <p>대통령의 임기가 만료되는 때에는 임기만료 70일 내지 40일전에 후임자를 선거한다. 제2항과 제3항의 처분에 대하여는 법원에 제소할 수 없다. 언론·출판에 대한 허가나 검열과 집회·결사에 대한 허가는 인정되지 아니한다.</p>
               </div>
               <div id="footer">
                     <h2>푸터</h2>
                     <p>이 헌법시행 당시의 법령과 조약은 이 헌법에 위배되지 아니하는 한 그 효력을 지속한다.</p>
               </div>
               </div>
</body>
</html>

저작자표시 (새창열림)