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

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

💡 content 영역

• 요소의 내용이 작성되어지는 영역
  (시작 태그와 종료 태그 사이에 작성되는 내용을 생각하면 됨)

💡 padding 영역

• content 영역과 border 영역 사이

💡 border 영역

• 요소의 테두리가 지정되는 영역
• content보다 바깥쪽에서 content를 감싸고 있음

💡 margin 영역

• 다른 요소와의 간격을 나타내는 영억

✏️ 예시

• html

    <h3>기준</h3>
    <div class="box">내용입니다.</div>
    <hr>

    <h3>content 영역</h3>
    <div class="box content">내용입니다.</div>
    <hr>

    <h3>border 영역</h3>
    <div class="box border">내용입니다.</div>
    <hr>

    <h3>padding 영역</h3>
    <div class="box content border padding">내용입니다.</div>
    <hr>

    <h3>margin 영역</h3>
    <div class="box content border padding margin">내용입니다.</div>
    <div class="box content border padding margin" id="m1">내용입니다.</div>
    <hr>

• css

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

/* content 영역 */
.content{
    width: 150px;
    height: 150px;

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

/* border 영역 */
.border{
    border: 10px solid red;
    /* 10px 실선 빨간 테두리 */
}

/* padding 영역 */
.padding{
    padding: 30px;
    /* 내용과 테두리 사이 간격을 상하좌우 30px씩 벌림 */
}

/* margin 영역 */
.margin{
    margin: 50px;
    /* 타 요소와의 간격을 상하좌우 50px씩 벌림 */
}

/* 서로 다른 요소의 margin이 겹칠 경우
   더 큰 margin을 가진 요소의 값을 따른다.
*/
#m1{
    margin: 100px;
}

📌 padding, border, margin의 방향성

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

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

✏️ 예시

• html

    <h3>padding 테스트</h3>
    <div class="box padding-test">내용입니다.</div>
    <hr>

    <h3>border 테스트</h3>
    <div class="box border-test">내용입니다.</div>
    <hr>

    <h3>margin 테스트</h3>
    <div class="box margin-test">내용입니다.</div>
    <hr>

    <h3>margin : auto; 테스트</h3>

    <div style="width: 500px; height: 300px; border: 2px solid black;">
        <div class="box margin-auto"></div>
    </div>

• css

/* 방향성 */

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

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

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

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

    /* 값 3개 : 상, 좌우, 하 (위->아래 차례대로)*/
    /* padding: 10px 50px 100px; */

    /* 값 4개 : 상, 우, 하, 좌 (상 기준 시계 방향) */
    padding: 10px 20px 30px 40px;
}

.margin-test{
    /* margin-top: 30px;
    margin-bottom: 50px;
    margin-left: 100px;
    margin-right: 200px; */

    /* margin 속성 사용법은 padding과 동일 */
    margin: 30px 200px 50px 100px;
}

/* border (속성이 조금 다름) */
.border-test{

    /* border 속성은 상하 좌우 방향을 별도 지정할 수 없음 */

    /* border: 1px 2px 3px 4px solid red; (오류!) */
    border: 4px solid red;    

    /* 스타일 */
    /* 너비 | 스타일 */
    /* 스타일 | 색 */
    /* 너비 | 스타일 | 색 */
    
    /* 네 방향을 따로 지정하고 싶으면 border-방향으로 별도 지정 */
    border-top: 1px solid black;
    border-bottom: 5px dashed magenta; /* dashed : 절취선 */
    border-left: 10px dotted blue; /* dotted : 점선 */
    border-right: 7px double orange;

    /* border의 크기(두께)만을 설정하는 경우
        상하좌우를 한번에 처리할 수 있음
    */

    /* 1개 : 상하좌우 */
    /* 2개 : 상하, 좌우 */
    /* 3개 : 상, 좌우, 하 (위 -> 아래) */
    /* 4개 : 상, 우, 하, 좌 (상 기준 시계 방향) */
    border-width: 20px 10px 5px 2px;
}

/* margin : auto 테스트 */

.margin-auto{
    
    /* 부모-자식 관계의 요소라도
       서로 다른 요소이기 때문에
       margin 지정 시 간격을 두게 된다.
    */

    margin-top: 100px;

    margin-left: 200px;

    /* 좌우 간격을 자동으로 지정하여 가운데 정렬 */
    margin: auto;
    /* 갑자기 margin-top이 무시되었다.
    왜? margin 속성 자체가 상하좌우를 동시 지정하는 속성이라
        상(top) 부분에도 auto가 지정되어 이전 100px 내용을 덮어쓰기 함

        해결 방법 : margin-top을 auto 밑에 작성하여 auto를 덮어씌움
    */

    margin-top: 100px;
}

💡 box-sizing 속성

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

- border-box
width/height 속성 지정 시 content + padding + border의 크기를 합산한 결과가
지정한 속성 값과 같게 자동으로 비율 계산하여 적용

- content-box(기본값)
width/height 속성 지정 시 content 영역만 적용

✏️ 예시

• html

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

• css

/* box-sizing */

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

    padding: 20px;
    border: 10px solid black;

    /* padding, border의 크기를 감안하여 계산해야 함... */
    /* width: 240px;
    height: 240px; */

    /* 이 문제를 해결하기 위한 것이 box-sizing이다! */

    width: 300px;
    height: 300px;
    /* width/height는 기본적으로 content 영역에 대한 크기를 지정 */
    /* 이를 변경하는 방법이 box-sizing */

    box-sizing: border-box;

    /*
    
        border-box
        - width/height 속성 지정 시
          content + padding + border의 크기를 합산한 결과가
          지정한 속성 값과 같게 자동으로 비율 계산하여 적용
    
        content-box(기본값)
        - width/height 속성 지정 시 content 영역만 적용

    */

}