기초 (1) - 인라인박스와 블록박스

블록 박스

• 사용 가능한 공간을 양 옆으로 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 등 모든 값을 지정할 수 있다.