[ex15~17] CSS(box)

ex15

CSS 박스 모델, Box Model
- 모든 태그는 사각형으로 랜더링(출력) 된다.
- 태그가 화면에 출력될 때 공통된 성질에 관련된 정책(모델)

1. border
2. width, height
3. padding
4. margin

 

1. 테두리, border
    - 모든 태그는 자신의 영역을 가진다.
    - 영역이 항상 사각형이다. > 테두리
    - 테두리 > 표현O, 표현X

    #box1 {
        background-color: yellow;
    }

	#box2 {
        border-color: black; /* 선의 색상 */
        border-width: 1px;  /* 선의 두께 */
        border-style: solid; /* 선의 종료(solid, dashed, dotted) */
    }
    
    /* 아래처럼 줄여서 작성 가능 */
    #box3 {
        border: 1px solid blue;
    }
    
    /* 상하좌우 따로 지정 가능 */
    #box4 {
        border-top: 1px solid blue;
        border-right: 5px solid red;
        border-bottom: 10px solid yellow;
        border-left: 20px solid green;
    }
    
    /* border-left: 20px solid green;를 풀어쓰면 */
    border-left-color: green;
    border-left-width: 20px;
    border-left-style: solid;
    
    /* 열거하면 시계방향(상우하좌) */
    #box5 {
        border-width: 10px;
        border-style: solid;
        border-color: red yellow blue orange;
    }
    
    /* 세개만 쓰면 상우하 > 좌우 같은색 */
    #box5 {
        border-width: 10px;
        border-style: solid;
        border-color: red yellow blue;
    }

    /* 두개만 쓰면 상하/좌우 */
    #box5 {
        border-width: 10px;
        border-style: solid;
        border-color: red yellow;
    }

 

텍스트박스에 포커스 가있을때 생기는 테두리 수정

    .txt {
        outline: none;
        border: 1px solid #999;
    }

    .txt:focus {
        background-color: yellow;
    }

---

ex16

2. width, height

-블럭태그에만 적용 가능

 

블럭태그
- 너비: 100%
- 높이: 내용물

인라인태그
- 너비: 내용물
- 높이: 내용물

- width/height 적용 불가능

#div1 {
    background-color: yellow;
    width: 200px;
    height: 200px;
}


#span1 {
    background: yellow;
    width: 200px;
    height: 200px;
}

화면

블럭태그

블럭 태그

인라인태그

인라인 태그

 

** 주의점

블럭태그에 width, height 고정으로 줄 때, 상자 크기보다 내용물이 많으면 내용 넘침

> auto로 하면 크기 자동 조절(내용물 없으면 상자 작아짐)

> min-height: 최소 크기 & 내용물에 크기에 따라 상자 커짐

max-height: 내용물 크기 & 크기보다 넘치면 넘침

 

 

*인라인태그에 width height 적용하려면

    p > span {
        /* background-color: yellow; */
        width: 200px;
        height: 300px;
        display: inline-block;
    }

---

ex17

3. padding, margin

    padding
    - 테두리> 안쪽 여백

         .box {
            border: 1px solid black;
            width: 200px;
            height: 150px;
         }

         #box2 {
            /* padding: 20px; */
            padding-top: 20px;
            padding-right: 0px;
            padding-bottom: 0px;
            padding-left: 0px;
         }

         /* 상하좌우 한번에 */
         .txt {
            padding: 10px 20px 0px 20px;
         }

화면

박스 모델

상자1

상자2상자2상자2상자2상자2상자2상자2상자2상자2상자2상자2상자2상자2상자2상자2상자2

상자3

---

    margin
    - 테두리 > 바깥쪽 여백

     #box2 {
        /* margin: 10px; */
        margin-top: 10px;
        margin-bottom: 10px;
     }
     
      .txt {
        padding: 10px 20px 0px 20px;
     }

 

    블럭태그의 간격을 조절할 때 : <br> 사용 금지
    인라인태그의 간격을 조절할 때 : <br> 사용

    블럭태그의 간격을 조절할 때 : margin 사용

 

화면

상자1

상자2상자2상자2상자2상자2상자2상자2상자2상자2상자2상자2상자2상자2상자2상자2상자2

상자3

---

 

* width + height : 콘텐츠 영역의 크기(O), 상자의 크기(X)

테두리, 패딩, 마진은 w,h의 크기와 별개

상자크기 똑같이 하고싶으면 border,padding까지 포함해서 빼줘야함