[css] 나란하게 배열

안녕하세요. 플입니다.

오늘은 float을 이용해 요소를 나란하게 만들어보겠습니다.

 

---

 1.  float 

float을 이용해 연도 부분과 내용 부분을 한 줄에 넣을 것입니다.

 

p{ float:left; }

float은 띄우다 라는 뜻으로 이것을 사용했을 때 '띄웠다'라고 표현하기도 합니다.

left 즉, 왼쪽으로 띄웠으니 오른쪽 공간이 빕니다. 비는 공간으로 내용 부분이 올라오는 것입니다.

 

아니면 왼쪽으로 붙었다고도 표현할 수 있습니다.

 

---

 2.  팁

사실 오른쪽에 있는 요소가 inline이었기 때문에 오른쪽에 있는 것이지 block요소였다면 여기에도 float을 줘야 합니다.

float이 안 먹었을 때는 이렇게 뒤쪽까지 자리를 차지하게 됩니다.

 

띄웠다는 것은 레이어 층이 나눠졌다는 말과 같아서 두 요소는 다른 레이어에 있는 효과가 나타납니다.

 

span{ float:left; }

그래서 여기도 float을 같이 줘야 합니다.

right값을 주면 화면의 오른쪽에 붙으니 주의해주세요.

 

---

 

 

 3.  여백

p{ margin:16px 48px 16px 0; }
span{ margin-top:54px; }

마진을 이용해 너무 붙어있지 않게 조정해줍니다.

표시된 부분이 마진 영역입니다. 마진 값은 위, 오른쪽, 아래, 왼쪽 순서대로 적어줍니다.

 

여백까지 주면 완성입니다.

 

---

그럼 이만.

총총.