블록 박스
-
사용 가능한 공간을 양 옆으로 100% 사용한다.
-
사용하지 못하는 공간은 마진 영역으로 채운다.
위 그림을 참고해보자면, 위에 첫번째 블록박스는 넓이를 지정해주지 않은 블록박스입니다. 보이는것처럼 페이지 끝까지 영역이 채워져있는 것을 볼 수 있습니다.
두번째 블록박스는 넓이 500값을 가진 블록박스입니다.
색상은 넓이만큼만 채워져있고, 나머지 영역은 주황색의 마진영역으로 채워져 있는 것을 확인 할 수 있습니다.
그렇기 때문에 블록박스를 사용하면 옆에 나란히 다른 요소가 올 수 없는것이죠. -
width와 height속성을 사용해 스타일을 컨트롤 할 수 있다.
스타일에 width값과 height값을 지정해준 상태입니다. 사이즈가 잘 조절되었죠? -
패딩과 마진, 보더 속성을 사용하여 스타일링 가능하다
이때 해당 속성들은 다른 요소들을 밀어낸다
.div1{
background-color: aqua;
width: 300px;
height: 200px;
border: 5px solid rgb(87, 87, 250);
padding: 30px;
margin: 50px;
}위 박스 사이즈를 보면, 박스의 넓이는 300으로 지정해주었지만 양쪽 테두리와, 양쪽 패딩 사이즈가 더해져 넓이는 총 370이 된 것을 볼 수 있습니다. 또한 마진은 상하좌우 전부 적용되었으며 이 속성들은 다른 요소들을 밀어냅니다.
인라인 박스
- 인라인 박스는 컨텐츠 박스만큼의 크기만 가진다. (블록박스처럼 다음행으로 넘어가지 않는다.)
인라인박스는 컨텐츠 크기만큼만 선택되어 블록박스처럼 주황색의 마진이 생기지않은 것을 확인 할 수 있습니다.
- width와 height 속성을 사용할 수 없다.
.span{
background-color: aqua;
width: 300px;
height: 200px;
}다음과 같은 코드를 작성하여 width와 height 값을 입력했는데도 적용이 안돼있는 것을 볼 수 있습니다.
- 인라인 박스는 패딩과 보더 속성을 사용할 수 있지만 마진은 좌우만 가능하다.
사진에서 확인하다시피 마진은 양 옆으로만 들어가있으며 패딩과 보더속성은 정상적으로 작동했습니다.
display를 이용한 속성변경
이렇게 각 각 성질이 분명한 인라인요소와 블록요소는 유형을 변경할 수 있다.
- display : inline
- display : block
- display : inline-block
이 세가지를 이용하면 인라인요소를 블록요소로 바꿀수도있고, 블록요소를 인라인 요소로 바꿀수도 있다.
inline-block요소는 inline속성과 block속성을 함께 가지고 있어 inline 처럼 한 줄에 여러 요소가 존재할수 있으며 block 처럼 width, height, margin, padding 등 모든 값을 지정할 수 있다.
