3. Box Model

/*Margin : 테두리(Border) 바깥에 위치하는 요소의 외부 여백 영역이다.
margin 프로퍼티 값은 마진 영역의 두께를 의미한다.
기본적으로 투명(transparent)하며 배경색을 지정할 수 없다.*/

    /*Border : 테두리 영역으로 border 프로퍼티 값은 테두리의 두께를 의미한다.*/

        /*Padding : 테두리(Border)
        안쪽에 위치하는 요소의 내부 여백 영역이다.
        padding 프로퍼티 값은 패딩 영역의 두께를 의미하며
        기본색은 투명(transparent)이다. 요소에 적용된 배경의 컬러, 이미지는 패딩 영역까지 적용된다.*/

            /*Content : 요소의 텍스트나 이미지 등의 실제 내용이 위치하는 영역이다.
            width, height 프로퍼티를 갖는다.*/
div {
    /* 배경색의 지정: 콘텐츠 영역과 패딩 영역에 적용된다. */
    background-color: lightgrey;
    /* 콘텐츠 영역의 너비 */
    /*width 와 height 프로퍼티는 요소의 너비와 높이를 지정하기 위해 사용된다.
    이때 지정되는 요소의 너비와 높이는 콘텐츠 영역을 대상으로 한다.*/
    /*이는 box-sizing 프로퍼티에 기본값인 content-box 가 적용되었기 때문이다.
    box-sizing 프로퍼티에 border-box 를 적용하면 콘텐츠 영역, padding, border 가 포함된 영역을
    width / height 프로퍼티의 대상으로 지정할 수 있다.*/
    /* width 와 height 로 지정한 콘텐츠 영역보다 실제 콘텐츠가 크면 콘텐츠 영역을 넘치므로
    overflow:hidden 을 지정하여 넘친 콘첸를 감출 수 있다.*/
    /*width 와 height 프로퍼티를 비롯한 모든 박스모델 관련
    프로퍼티(margin, padding, border, box-sizing 등)는 상속되지 않는다.*/
    width: 300px;
    /* 패딩 영역의 두께 */
    padding: 25px;
    /* 테두리: 두께 형태 색상 */
    border: 25px solid navy;
    /* 마진 영역의 두께 */
    margin: 25px;
}

.content-box {
    width: 600px;
    border: 10px solid;
    padding: 50px;
    margin: 50px;
    background-color: red;
}
.border-box {
    /*코드 18 ~ 22*/
    box-sizing: border-box;
    width: 600px;
    border: 10px solid;
    padding: 50px;
    margin: 50px;
    background-color: red;
}

div {
    border: 5px solid red;

    /*margin-top: 40px;*/
    /*margin-right: 30px;*/
    /*margin-bottom: 20px;*/
    /*margin-left: 10px;*/
    margin: 40px 30px 20px 10px;

    /*padding-top: 10px;*/
    /*padding-right: 20px;*/
    /*padding-bottom: 30px;*/
    /*padding-left: 40px;*/
    padding: 10px 20px 30px 40px;

    /*margin-top: 25px;*/
    /*margin-right: 50px; margin-left: 50px;*/
    /*margin-bottom: 75px*/
    margin: 25px 50px 75px;

    /*margin-top: 25px; margin-bottom: 25px;*/
    /*margin-right: 50px; margin-left: 50px;*/
    margin: 25px 50px;

    /*margin-top: 25px; margin-right: 25px; margin-bottom: 25px; margin-left: 25px;*/
    margin: 25px;

    /*margin 프로퍼티에 auto 키워드를 설정하면 해당 요소를 브라우저 중앙에 위치 시킬 수 있다.*/
    margin: 0 auto;

    /*요소 너비가 브라우저 너비보다 크면 가로 스크롤바가 만들어지기 때문에 max-width 를 통해 해결*/
    max-width: 600px;
    /*max-width 프로퍼티는 요소 너비의 최대값을, min-width 프로퍼티는 요소 너비의 최소값을 지정한다.
    max-width: 300px;의 경우, 브라우저의 너비가 300px 보다 작아지면
    요소 너비는 브라우저의 너비에 따라서 작아진다.
    min-width: 300px;의 경우 브라우저의 너비가 300px 보다 작아져도
    요소 너비는 지정 너비(300px)을 유지한다.*/
}

p {
    background: palegreen;
    padding: 10px;
}
/*border-style 프로퍼티는 테두리 선의 스타일을 지정한다.*/
p.dotted { border-style: dotted; }
p.dashed { border-style: dashed; }
p.solid  { border-style: solid; }
p.double { border-style: double; }
p.groove { border-style: groove; }
p.ridge  { border-style: ridge; }
p.inset  { border-style: inset; }
p.outset { border-style: outset; }
p.none   { border-style: none; }
p.hidden { border-style: hidden; }
p.mix    { border-style: dotted dashed solid double; }
p {
    background: palegreen;
    padding: 10px;
}
/*프로퍼티 값의 갯수에 따라 4개 방향(top, right, left, bottom)에 대하여 지정이 가능하다.*/
p.d1 {
    /* four sides */
    border-style: dashed;
}
p.d2 {
    /* horizontal | vertical */
    border-style: dotted solid;
}
p.d3 {
    /* top | horizontal | bottom */
    border-style: hidden double dashed;
}
p.d4 {
    /* top | right | bottom | left */
    border-style: none solid dotted dashed;
}

/*border-width 프로퍼티는 테두리의 두께를 지정한다. 프로퍼티 값의 갯수에 따라 */
/*4개 방향(top, right, left, bottom)에 대하여 지정이 가능하다.*/
/*border-width 프로퍼티는 border-style 과 함께 사용하지 않으면 적용되지 않는다.*/
p {
    background: palegreen;
    padding: 10px;
    border-style: solid
}
p.one {
    border-width: thin; /* 1px */
}
p.two {
    border-width: medium; /* 3px */
}
p.three {
    border-width: thick; /* 5px */
}
p.four {
    border-width: 15px;
}
p.five {
    border-width: 2px 10px 4px 20px;
}

p {
    background: palegreen;
    padding: 10px;
    border-style: solid;
}
p.one {
    border-color: red;
}
p.two {
    border-color: green;
}
p.three {
    border-color: red green blue yellow;
}

.border-rounded {
    /* 4 꼭지점에 대해 Radius 지정 */
    /*원의 반지름이 20px*/
    border-radius: 20px;
    /* 위 코드는 아래의 shorthand 이다.
    border-top-left-radius:     20px;
    border-top-right-radius:    20px;
    border-bottom-right-radius: 20px;
    border-bottom-left-radius:  20px; */

    /*각각의 모서리를 개별적으로 설정*/
    /*border-radius: 10px 40px 40px 10px;*/
}
.border-circle {
    border-radius: 50%;
}
.border-football {
    /* top-left & bottom-right | top-right & bottom-left */
    border-radius: 15px 75px;

    /*두개의 반지름을 지정하여 타원형 둥근 모서리*/
    /*border-top-left-radius: 50px 25px;*/
    /*x 반지름 y 반지름*/
}
.border-rounded {
    border-radius: 10px 20px 30px 40px / 5px 10px 15px 20px;
    /*border-top-left-radius: 10px 5px;*/
    /*border-top-right-radius: 20px 10px;*/
    /*border-bottom-right-radius: 30px 15px;*/
    /*border-bottom-left-radius: 40px 20px;*/
    /*x 반지름 4개 / y 반지름 4개*/
}

p {
    /*border-width, border-style, border-color 를 한번에 설정하는 shorthand 프로퍼티.*/
     border: 5px solid red;
 }