웹디자인 기본(3) CSS 주의사항

(3) CSS 주의사항

css레이아웃에서 중요하게 생각해야 할 점은 '줄 바꿈'이다. 그 중에서 가장 많이 헷갈리는 속성은 block과 inline이다. block과 inline은 '줄 바꿈'이란 특징으로 간단하게 생각하자. 

1) block : 줄이 바뀜

2) inline : 줄이 바뀌지 않음

태그 중에는 태생적으로 줄이 바뀌는 태그와 줄이 바뀌지 않는 inline태그가 있다. 그리고 '줄 바뀜'과 관련한 속성을 변경하기 위해서 display속성이 있다. 태생이 inline인 속성과 block인 속성은 크게 아래와 같다.

Block	<h1> ~ <h6>, <p>, <header>, <section>, <main>, <aside>, <footer>, <div>
inline	<span>, <a>, <input>

Block인 태그들은 줄바꿈이 자동으로 적용되고, inline인 태그들은 줄이 바뀌지 않는다. 단, display속성을 적용하면 inline을 block속성으로 변경하며 줄을 변경할 수 있다. 아래 세 가지 속성에 따라 줄 바꿈 현상을 다르게 할 수 있다.

---

"display : block"

"display : inline"

"display : inline-block"

---

float속성을 사용할 때는 마지막에 자동으로 붙는 div요소는 clear:both를 적용한다. float과 clear는 바늘과 실의 관계처럼 알아두자. 

그리고 UI제작에 시간이 촉박하다면, 그리드 생성을 돕는 웹 사이트를 활용한다.

-> http://1200px.com

-> http://grid.guide/

위의 사이트에서 그리드 가이드 기능을 활용하면, 폭과 열의 수만 입력하면 자동으로 그리드 수치를 계산해서 보여준다. 해당 부분은 flex레이아웃 포스팅에서 자세하게 다루도록 하자.