레이아웃 스타일2

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

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

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

<h3>기준</h3>
<div class="box">내용</div>

<h3>border 영역</h3>
<div class="box border">내용</div>

<hr>
<h3>content 영역</h3>
<div class="box border content">내용</div>

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

<hr>
<h3>margin 영역</h3>
<div class="box border content padding margin">내용</div>
<div class="box border content padding margin" id="mg1">내용</div>

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

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

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

/* border 영역 */
.border{
    border: 5px solid red;
}

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

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

---

• padding, border, margin 방향성
  - padding, border, margin은 방향에 따라 크기 지정 가능
  : OOO-top / OOO-bottom / OOO-right / OOO-left
  ※ OOO에 padding, border, margin 선택해서 작성

<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 id="container">
<div class="box margin-auto"></div>
</div>

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

    /* padding 속성 
       : 작성법에 따라서 padding 특정 방향에 크기 지정 가능*/

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

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

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

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

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

    /* margin 속성 사용법은 padding과 동일 */
    margin: 10px 20px 30px 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 red; /* dashed : 절취선 */
    border-left : 10px dotted blue; /* dotted : 점선 */
    border-right : 15px double gray;

    /* border의 크기(두께)만을 설정하는 경우
       상하좌우를 한 번에 처리할 수 있음 */
    
    /* 1개 : 상하좌우 */
    /* 2개: 상하, 좌우 */
    /* 3개: 상, 좌우, 하 */
    /* 4개: 상, 우, 하, 좌 */
    border-width: 20px 15px 30px 20px;
}

.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는 각각 크기를 지정할 수 있음
     → 이 때, 각각의 크기를 따로 지정하다보니 전체적인 크기를 한 눈에 파악하고 설정하기 힘듦

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

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

    /* padding, border의 크기를 감안하여 계산해야함.. 
       번거로움.. -> 해결방법: box-sizing 사용! */
    /* width: 300px;
    height: 300px; */

    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 영역에만 적용
    */
}