레이아웃 만들기 2 : 귀찮은 inline-block

display : inline-block 사용 법 

 

가로로 정렬할 때 float : left 이것만 쓸 수 있는 것은 아닙니다.

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;
}

위의 코드는 박스를 만들어 왼쪽으로 정렬시키는 코드입니다. 

display 속성만 inline-block으로 조정하면 가로로 배치가 가능합니다.

inline- block은 "내 폭과 높이만큼 자리차지하게 해주세요~" 라는 뜻입니다.

간편하지만 <태그> 사이에 스페이스바 공백이 있다면 그대로 보여주기 때문에

가로로 정렬하려면 태그 사이의 공백도 제거해줘야합니다.

이런게 귀찮습니다 float 쓰셈 

 

 

 

 

공백제거 편법1. 주석처리 기호 사용하기

 

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

주석은 실행되지 않는 코드입니다. 

(에디터에선 ctrl + ? 이걸 눌러서 주석처리가 가능합니다. 맥은 command + ?)

HTML 코드는 <!-- --> 이게 주석처리하는 코드이며

이 사이에 코드를 집어넣으면 실행되지 않습니다.

하지만 그래도 더러워보입니다. 

 

 

 

 

 

공백제거 편법2. 부모의 폰트사이즈를 0으로 만들기

 

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

font-size 속성은 inherit 되기 때문에 안에 있는 <div>와 그 사이에 있는 공백도 font-size가 0px이 됩니다.

이러면 해결인데 HTML이 깨끗해질지 모르겠지만 CSS가 더러워질 수 있겠군요.

둘 중에 덜 더러워보이는 방법을 하나만 사용하시면 되겠습니다. 

 

다음 강의 누르기 전에 꼭 숙제를 알아서 해보도록 합시다. 

 

 

오늘의 숙제 : html css 짜서 위와 비슷하게 만들어오십시오

팁은 일단 큰곳 부터 네모네모 블록으로 쪼개면 됩니다. 

네모를 그리고 그걸 전부 <div>로 만들고

그 안에 글이 필요하면 글 넣고 그림이 필요하면 그림넣고 하다보면 쉽게 구현가능합니다.