🎲레이아웃 스타일 2

요소의 영역(여백) 관련 속성

• HTML 요소는 총 4가지 영역으로 구성되어 있다.

  1. content 영역
     • 요소의 내용이 작성되는 영역
       (시작태그와 종료태그 사이에 작성되는 내용을 생각하면 됨)
  2. padding 영역
     • content영역과 border 영역 사이
  3. border 영역
     • 요소의 테두리가 지정되는 영역
     • content 보다 바깥쪽에서 content를 감싸고 있음
  4. margin 영역
     • 다른 요소와의 간격을 나타내는 영역

예시 준비 코드)

<div class="box">내용입니다</div>

.box {
    width: 100px;
    height: 100px;
    background-color: lightblue;
}

content 영역

<div class="box content">내용입니다</div>

.content {
    width: 150px;
    height: 150px;
  
}

• width/height 속성은 기본적으로 content영역의 크기를 지정하는 속성

border 영역

<div class="box border">내용입니다</div>

.border {
    border: 10px solid red;
}

• width 크기 총 120px
  width와 height는 content 영역만.
  추가로 border에 10씩 양 옆에 들어갔으니 width는 총 120px
  

padding 영역

<div class="box border padding">내용입니다</div>

.padding {
    padding: 30px ;
  
}

• 총 180px = content + padding+ border

margin 영역

<div class="box border padding margin">내용입니다</div>
    <div class="box border padding margin" id="m1">내용입니다</div>

.margin { margin:50px; }

#m1 { margin: 100px;}

• 서로 다른 요소의 margin이 겹칠 경우
  더 큰 margin을 가진 요소의 값을 따른다.

padding, border, margin의 방향성

• padding, border, margin은 방향에 따라 크기를 지정할 수 있다.

ooo-top
ooo-bottom
ooo-left
ooo-right
(ooo에는 padding, border, margin 선택해서 작성)

padding 테스트

<div class="box padding-test">내용입니다</div>

.padding-test {
    padding-top: 20px;
    padding-bottom: 50px;
    padding-left: 30px;
    padding-right: 100px;

padding 속성 :
작성법에 따라서 padding 특정 방향에 크기를 지정할 수 있다.

/* 값 1개 : 상하좌우 
    padding: 30px; */

/* 값 2개 : 상하   좌우
    padding :50px 100px ; */


/* 값 3개 : 상, 좌우, 하 
    padding : 10px 50px 100px ; */

/* 값 4개 : 상 우 하 좌  
    padding : 10px 20px 30px 40px ; */

border 속성 : border 속성은 padding처럼 상하좌우 방향을 별도로 지정하는 작성법이 없다.
➡️ ooo-top ...등을 사용해야 한다.

.border-test {
    border: 1px solid red;

    border-top: 3px solid black;
    border-bottom: 5px dashed magenta;
    border-left: 10px dotted blue;
    border-right: 10px double orange;
 }

margin 속성 : padding같은 방식 사용 가능

margin : auto; 테스트

    <div class="box-container">
        <div class="box margin-auto"></div>
    </div>

.box-container {
    border: 2px solid black;
    width: 500px;
    height: 300px;
}

.margin-auto {
    margin:auto; 
   /* margin-top: 100px; */
    margin-top: 100px;
}

⭐자주 사용⭐

• 좌우 요소간의 간격을 자동으로 지정하여 가운데 정렬
• 갑자기 margin-top을 무시
• 왜? margin속성 자체가 상하좌우를 동시에 지정하는 속성이라
• 상(top) 부분에도 auto가 지정되어 이전 100px 덮어쓰기함
  

해결방법 : margin-top을 auto 보다 아래에서 작성하여
auto를 100px덮어쓴다.

• 상하좌우 값을 넣는데 기능은 좌우밖에 못 함

• 위 아래도 고치고 싶으면 margin : auto ;보다 아래에 쓰면 된다
  

box-sizing 속성

• 요소의 영역 중 실제로 화면상에 보여지는 부분인 content, padding, border는 각각 크기를 지정할 수 있다.
  ➡️ 이때 각각 크기를 따로 지정하다 보니 전체적인 크기를 한 눈에 파악하고 설명하기 힘들다.

테두리 10px, 패딩 20px, 내용 나머지
전체 요소 크기가 가로/세로/300px인 정사각형 만들기

<div class="box" id="box-sizing">내용입니다</div>

#box-sizing {
    border : 10px solid black;
    padding: 20px;
    
    width: 300px;
    height: 300px;

    box-sizing: border-box;
}

box-sizing : border-box;

. {box-sizing : border-box}

보통 와 같이 쓰고 시작