CSS, BOX 구성을 알아보자.

box Model

개별 컨텐츠 요소를 감싸고 있는 사각 박스 형태.

브라우저 화면에 영역을 차지하면서 , 표시되는 컨텐트 호함하는 전체 영역을 의미한다.

컨텐트(content) - 패딩(padding) - 보더(border) - 마진 (margin) 으로 구성된다.

또한 보더(border)의 바깥에 표시되는 아웃라인 (outline) 을 추가로 구성이 가능하다.

 

content : 실제 내용이 표시 되는 영역.

유일하게 영역에 대한 너비와 높이 지정이 가능하다.(width / height )

 

padding : 테두리와 컨텐츠 사이의 안쪽 여백.

 

border : 테두리.

외각 테두리 라인을 표시하는 영역으로 마진과 패딩사이에 표시된다.

 

margin : 바깥쪽 여백.

다른 요소와 공간적으로 분리 되며 , 빈 공간인 최 외곽을 의미한다.

 

margin : 0; 의 의미는 요소간의 비어있는 경계가 없음을 의미한다.

동일 부모요소 내 형제 관계를 갖는 요소간의 경계는 서로를 마주하는 경계가 되겠지만,

부모요소와 자식요소와의 관계를 갖는 마진이란 ,

부모요소의 컨텐트가 시작되는 경계영역으로 부터 안쪽 자식 요소의 박스 영역중 (보더 , 마진 , 컨텐트 )

가장 바깥쪽을 구성하는 영역과의 비어있는 경계를 의미한다.

마진은 유일하게 박스 모델 요소중 음수값이 적용이 가능한데 ,

이는 다른 요소들과의 거리가 가까워져 서로 중첩이 될 수 있음을 의미한다.

 

outline : 테두리 라인의 바로 외곽에 표시 가능한선.

다른 박스 요소와 달리 영역을 차지하진 않음.

즉 , 마진 영역이 지정된 경우, 아웃라인 두께값을 높일수록 마진 영역을 덮어가며 표시된다.

outline-offset 속성을 추가로 설정하면 , 

아웃라인이 표시되는 시작지점을 설정 가능한데,

음수값일 경우 원래 디폴트 값부터 안쪽으로 당겨져 보더라인 안쪽에 아웃라인이 표시가 가능하다.

 

 

 

---

 

        < 모든 박스 구성 요소에 동일한 형태로 적용 >

        value 1개 : 상하좌우

        value 2개 : 상하  좌우

        value 3개 : 상    좌우  하

        value 4개 : 시계방향(상우하좌)

 

---

Box Model 의 지정.

border-width :

테두리 두께를 의미. 필수 지정요소.

border-style :

테두리 모양을 의미. 필수 지정요소.

border-color:

테두리 색을 의미.

border :

width ,  style , color 를 한꺼번에 지정이 가능한 속성.

 

border-radius :

테두리 모서리 끝부분부터 , 기울기가 형성될 거리를 말함.

border-radius: 10px 20px 30px 50px;

 

원을 만들기 위해서는 px 보다는 % 로 좀 더 정확하고 세밀한 원 표현이 가능하다.

border-radius: 50%;

 

각 모서리에 대한 x , y 축의 기울기 설정도 가능하다.

 

 

 

border-top-right-radius: 50% 30%;

 

모서리 위 오른쪽 설정 : x 축은 50% 만큼 , y 축은 30% 만큼 ;

 

 

 

 

전체 모서리에 대한 지정은 

 

border-radius : x 축 / y 축 ;  으로 할 수 있다.

 

 

 

 

 

 

 

 

 

border-radius: 50%/20%;

 

 

 

 

 

 

 

 

---

 

 

box-sizing

box-sizing : content-box;

width 와 height 의 영역을 컨텐트 영역까지로 지정. (디폴트 값 )

box-sizing : border-box;

width 와 height의 영역을 보더 영역 까지로 지정.

 

 

.parentBox {

    background-color: antiquewhite;

    width: 400px;

    border: solid 5px red;

    text-align: justify;

    word-break: break-all;

    margin: auto;

}

높이는 내부 컨텐트에 의해 자동으로 설정.

부모요소의 너비는 보더를 합친 410을 만들자

.p2box {

padding: 20px;

}

부모 요소에 패딩을 지정함으로서 부모 요소에 할당하려는 너비를 초과.

.p3box {

    width: 360px;

    padding: 20px;

}

패딩을 뺀 너비를 부모요소에 재 할당하여 너비 유지.

 

.p4box p {

    padding: 20px;

}

부모요소의 패딩이 아닌 자식 요소의 패딩을 조절.

이는 부모요소가 아닌 자식 요소에 패딩을 지점함으로써 원하는 레이아웃이 아닌 결과를 초래 할 수 있음.

자식 요소가 하나인 경우엔 문제가 되지 않으나,

자식이 여러개일 경우 모든 자식 요소에게 패딩을 별도로 지정해야하는 문제점 발생 가능.

 

 

.p5box:hover {

    box-sizing: border-box;

    width: 410px;

}

 

box-sizing :border-box; 으로 변경함으로서 ,

지정된 부모요소의 width 를 컨텐트 영역이 아닌 보더 영역까지를 포함하여 산출.