CSS 박스 만들기, float, inline-block

 

1. 박스 만들기

.box {
  margin : 20px; 
  padding : 30px;
  border : 1px solid black;
  border-radius : 5px;
}

• margin은 바깥 여백
• padding은 안쪽 여백
• border는 테두리 (차례로 두께, 선의 종류, 색상)
• border-radius는 테두리 라운드 처리

 

 

- margin과 padding을 원하는 방향

.box {
  margin-top : 20px;
  padding-left : 30px; 
}

• top, left, bottom, right 중 원하는 곳에만 여백이 가능하다.
• margin은 음수도 가능합니다.
• margin : 5px 6px 7px 8px; 이렇게 띄어쓰기를 이용하면, 차례대로 상 우 하 좌 마진을 5,6,7,8px 이 가능합니다.

 

 

- display : block이 내장되어있는 div박스

.box {
  display : block;
}

• 모든 div, p, h1, li 등은 display : block 속성을 주지 않아도 기본적으로 내장
• p태그나 div태그를 그냥 사용하면 한 행을 전부 차지
•  display 속성을 다른 것으로 부여
  • display : inline, inline-block, flex 등

 

1-1 margin 속성으로 상하좌우 마진을 한꺼번에 줄 수 있다!

.box {
  margin : 10px auto 30px auto;
}

 

1-2 PC 레이아웃을 만드실 때 항상 container 또는 wrap 박스를 만들어놓는게 좋다.

• container 박스엔 항상 width를 지정해놓는게 좋다.
• 브라우저화면이 축소되어도 내부 div 박스가 유지된다.

<div class="container">
  <div class="left"></div>
  <div class="right"></div>
</div>

 

 

2. float 

• 사이트 레이아웃 디자인의 제 1원칙 : 만들고 싶은 레이아웃 디자인을 네모박스로 쪼개보고 그대로 <div> 써서 구현

 

- 요소를 공중에 띄워 정렬하는 float 속성

<div>
  <div class="left-box"></div>
  <div class="right-box"></div>
</div>

.left-box {
  width : 100px; 
  height : 100px;
  float : left;
  background: coral;
}
.right-box {
  width : 100px; 
  height : 100px;
  float : left;
  background: grey;
}

• 박스 두개를 만들어 각각 왼쪽으로 정렬
  •  float를 쓰면 요소를 붕 띄우다보니 그 다음에 오는 HTML 요소들이 제자리를 찾지 못합니다.
• float 속성으로 가로정렬의 경우, float 박스들을 싸매는 하나의 큰 div 박스를 만들고 폭을 지정해주는게 좋습니다.

- float를 쓰고 나면 항상 clear 속성이 필요합니다.

<div>
  <div class="left-box"></div>
  <div class="right-box"></div>
  <div class="footer"></div>
</div>

.footer{
  width : 100px; 
  height : 100px;
  background: cornflowerblue;
}

.footer{
  width : 100px; 
  height : 100px;
  background: cornflowerblue;
  clear : both
}

 

• clear 속성을 사용하면 float 다음에 오는 박스들이 제자리를 찾게 됩니다.
• float썼으면 까먹지 말고 항상 넣으시면 됩니다.
• float : none 이것도 추가해주는게 나중에 생길 버그예방차원에서도 좋습니다.

 

 

3. inline-block

• 가로로 정렬할 때 float : left 이것만 쓸 수 있는 것은 아닙니다.
• display : inline-block의 방법도 있습니다.

<div class="box">
  <div class="left-box"></div>
  <div class="right-box"></div>
</div>

.box{
  width: 200px;
}
.left-box {
  width : 100px; 
  height : 100px;
  display : inline-block;
  background: coral;
}

.right-box {
  width : 100px; 
  height : 100px;
  background: grey;
  display : inline-block;
}

• display 속성만 inline-block으로 조정하면 가로로 배치가 가능합니다.
• inline- block은 자신의 폭 만큼 범위를 가지고 있습니다.
• 그러나 <태그> 사이에 스페이스바와 공백이 있다면 그대로 보여주기 때문에
  • 가로로 정렬하려면 태그 사이의 공백도 제거해줘야합니다.

 

 

- 공백 제거 방법 첫번째

• 주석은 실행되지 않는 코드
• 이 사이에 코드를 집어넣으면 실행하지 않는 방법
• HTML이 더려워집니다.

<div>
   <div class="left-box"></div><!--
--><div class="right-box"></div>
</div>

 

 

- 공백 제거 방법 두번째

• 부모의 폰트사이즈를 0으로 만드는 방법
• font-size 속성은 inherit 되기 때문에 안에 있는 <div>와 그 사이에 있는 공백도 font-size가 0px이 됩니다.
• HTML이 간결해지는 대신, CSS가 더려워집니다.

<div style="font-size : 0px;">
    <div class="left-box"></div>
    <div class="right-box"></div>
</div>

 

 

 

- 박스의 폭을 border까지 설정해주고 싶을 때 쓰는 속성 

.box {
  box-sizing : border-box; /*박스의 폭은 border까지 포함입니다*/
  box-sizing : content-box; /*박스의 폭은 padding 안쪽입니다*/
}