2. HTML/CSS(div를 이용한 레이아웃 만들기)

■ div를 이용한 박스 디자인

박스 디자인 스타일링

.box {
  margin : 20px; // 바깥 여백
  padding : 30px; // 안쪽 여백
  border : 1px solid black; // 테두리(두께, 선의 종류, 색상)
  border-radius : 5px; // 테두리 둥글게
}

 

 

margin과 padding

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

위와 같은 방식으로 원하는 곳에만 효과를 줄 수 있음

top, left, botton, right로 방향 선택

margin은 음수도 가능

margin : 5px 6px 7px 8px과 같이 띄어쓰기로 상우좌하 마진을 한번에 줄 수도 있음

 

 

div박스의 내장 속성

.box {
  display : block;
}

div나 p태그 h1, li 등의 일부 태그들은 display: block 속성이 기본적으로 내장되어 있어 한 행을 전부 차지함

display: inline, inline-block, flex 등 속성을 변경하는 것도 가능

 

 

 

■ float 속성

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

.left-box {
  width : 100px; 
  height : 100px;
  float : left;
}
.right-box {
  width : 100px; 
  height : 100px;
  float : left;
}
.footer {
  clear : both
}

float은 요소를 띄워 정렬을 시키는 속성입니다.

모바일을 고려하여 float 으로 정렬시킬 경우 float위에 큰 div 박스를 만들고 폭을 지정하는 것이 좋습니다. 

float을 쓴 후에는 clear 속성을 사용하여 float 다음에 오는 박스들이 자리를 찾을 수 있게 만들어줘야 합니다.

 

 

■ display: inline-block

사용 예시

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

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

flaot 이외에도 정렬시키는 방법으로 display:inline-block이 있습니다.

html의 div 블록의 배치와 같이 보여주는 방법입니다.

다만, 태그 사이에 공백이 있을 경우 공백도 그대로 보여주기 때문에 불편함이 있습니다.

 

 

공백 제거 방법

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

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

공백을 그대로 보여주는 게 싫을 때 사용할 수 있는 방법도 있습니다.

공백 대신에 주석을 넣으면 공백 처리가 보이지 않습니다만 코드도 깔끔하지는 않습니다.

부모의 폰트 사이즈를 0으로 만드는 방법도 있지만 css를 따로 설정해야 할 수도 있는 번거로움이 있습니다.