Javascript & JQuery & CSS

하드코딩으로 레이아웃을 잡을 때 가장 큰 문제는 대체 이 애들을 어떻게 배치하냐입니다.
 
일단 당장 지금 당장 알아볼 속성에 대한 결말부터 말씀드리자면 display: block과 inline;입니다.

display는 말 그대로 각 태그들이 눈에 보이는 속성이 무엇인지 가리키는 겁니다.

이 display 속성에 대해서 이해만 하고 있더라도 사실 대부분의 레이아웃은 쉬운 죽 먹기가 되는 겁니다.

모든 태그들은 각자 display 속성을 지니고 있습니다. 레이아웃을 짜는데 있어 가장 중요한 태그는 div와 span입니다.

두 태그는 아무런 '의미가 없는' 태그입니다. 단지 레이아웃을 만드는 태그일 뿐이죠.


div의 display 속성은 block입니다. span의 display 속성은 inline입니다.


두 속성의 차이에 대해 알기 전에 가장 자주 사용하는 display에 대해 알아볼까요? 사실 display의 속성은 굉장히 많습니다.

열 몇 가지인가 스물 몇 가지인가 있는데 대부분은 거의 잘 쓰지 않고요. 가장 많이 사용하는 것은,

block, inline, none, table, table-cell 그리고 inline-block입니다.




1. none

 일단 none은 말 그대로 없애버리는 겁니다.
 
 주로 탭 메뉴나 드롭다운 메뉴처럼 없어졌다 나타나는 기능을 구현할 때 숨겨놓는 용도로 자주 사용하는 속성입니다.
 
 어떤 식으로 디자인을 했든 해당 태그에 none을 주면 그냥 모니터 상에서 사라져 버립니다.

2. block , inline-block

 일단 div와 span의 차이를 알아보기 위해 하나씩 만들어 봅시다.
 

	.div_test {
		background: green;
		width: 200px;
		height:50px;
	}

	.span_test {
		background: yellow;
		width: 200px;
		height:50px;
	}

 위 CSS 소스를 보면 똑같은 속성을 주었습니다.

div는 정확하게 사이즈대로 만들어진 반면 span은 아무런 모양 변화가 없습니다. 에러인가요? 아닙니다.

여기서 혹시 차이점을 발견하신 분 계신가요? 정말??

일단 또 다른 비교를 한 번만 더 해보죠. 똑같은 태그를 연속으로 세 개씩 만들겠습니다.
 
이것은 SPAN 입니다. 이것은 SPAN 입니다. 이것은 SPAN 입니다.

div는 한 줄에 하나씩 생겼고, span은 한 줄에 세 개가 되었죠. 뭔지 감이 오십니까?

다시 한 번 강조하지만 이 두 태그의 기본 속성은 div는 block이고 span은 inline 이라는 겁니다.

그래서 그게 뭐냐니까? block은 말 그대로 블록입니다. 하나의 큰 사각형 틀이란 거죠. inline이라는 소리는 직렬, 횡렬이란 뜻입니다.

쉽게 정리를 하자면 div라는 블록은 하나의 큰 사각형 박스이므로 한 줄에 하나씩만 생깁니다.

span은 직렬, 횡렬이므로 한 줄에 여러 개가 다닥다닥 붙어있게 되는 겁니다.

div는 가로세로 사이즈가 적용이 되는데 span은 안 됩니까? 스판이니까 쭉쭉 늘어나야 되는 거 아닙니까?

inline의 사전적 의미 외에 한 가지를 더 붙여보죠. inline 속성은 그 안에 들어가는 내용의 크기만큼만 커진다는 거죠.

span 태그 안에 크기가 큰 이미지가 들어가면 더 커지고, 작은 게 들어오면 작아진다는 소립니다. 그러니까 정말로 스판(=span) 쫄쫄이랑 똑같죠?

제가 만약 span의 사이즈를 정해주고 싶다면 어찌해야 하나요??

그럴땐 display 속성을 변경해주어야 합니다. 크기 제어가 가능한 display 속성이 무엇인가요? div의 기본 속성인 block 입니다.

block인 애들은 크기 조정이 가능한 애들이죠. 그럼 여기서 또 하나의 특징이 구분됩니다.

block은 CSS로 크기조절이 가능하고 inline은 안 된다.

이거 꽤 중요한데 잊어버리기 쉽습니다.

 
이것은 SPAN 입니다. 이것은 SPAN 입니다. 이것은 SPAN 입니다.
span 태그에 display:block; 속성을 주었습니다.

서로의 기본 속성이 달라졌기 때문에 div는 span처럼 변했고 span은 div처럼 바뀌었습니다.

두 기본 속성을 이해하고 있다면 어디서 div를 사용하고 어디서 span을 사용해야 하는지 아실 겁니다.

그럼 이번엔 조금만 더 깊게 들어가보죠. 가령 span 태그로 레이아웃을 만든 뒤, 그 안에 들어가는

내용의 크기만큼만 커지게 하고 싶지만 반드시 height 값을 지정해주고 싶으면 어떻게 해야 될까요?

쉽게 말해 width값은 제멋대로 변하지만 height 값은 고정해주고 싶다면요? 기본 inline은 그게 되지 않죠.

그래서 inline-block 이라는 속성이 있는 겁니다. 두 가지 속성의 장점만을 골라 요소를 제어할 수 있는 display 속성입니다.

말씀드린대로 height값을 고정하고 width값을 지웁니다. 그리고 span 태그 안에 길이가 다른 텍스트를 넣어볼까요?

 
이것은 SPAN 입니다. 이것은 SPAN 입니다. 다른 텍스트를 넣어볼까요? 이것은 SPAN 입니다. 다른 텍스트를 넣어볼까요?


height값은 동일하지만 width값이 서로 다른 span 태그들이 만들어졌습니다.

특히 이 inline-block이라는 속성은 익스플로러에서 발생하는 여백 버그를 잡아줄 때 유용하게 쓰이는 속성입니다.

가령 li 태그로 리스트를 만들고 그 안에 이미지를 넣었는데 하단에 여백이 생성되는 사건이 종종 발생하곤 합니다.

그럴 땐 inline이나 inline-block으로 속성을 변경해주면 됩니다. 그런데 여기서 문제는 IE6/7 에서는 inline-block을 지원하지 못한답니다.

그럼 어떻게 해결해야 할까요? IE6/7에서는 마지못해 핵을 사용하는데요.

*display: inline;
zoom: 1;

여기서 zoom은 IE에서만 사용되는 CSS속성입니다. 이렇게 추가를 해주면 해결됩니다.

또한 inline-block이라는 속성은 브라우저에 따라 하단에 미세한 여백이 생기는 경우도 있습니다.

이때를 위해서 세로정렬 값을 추가해줘야 되는데요. 이땐 vertical-align:top;을 해주면 마찬가지로 해결됩니다.


block은 눈에 보이는 영역이든 안 보이는 영역이든 무조건 100%의 크기를 가지고 있습니다.

그렇기 때문에 width 값을 아무리 작게 지정해줘도 한 줄에 여러 div가 올 수 없는 겁니다. 눈에 보이지 않는 가상의 패딩값이 100%를 꽉 채우고 있기 때문이죠.

이런 녀석들을 가로 정렬하고 싶다면 float:left; 로 정렬을 왼쪽으로 주거나 display:inline-block;으로 변경해주면 가로로 정렬이 된답니다.

3. table, table-row , table-cell

 DIV 태그를 이용하여 table 과 같은 효과를 내고 싶으면 display 속성의 table, table-row , table-cell 속성을 이용할 수 있습니다.

이제 대략 알았으니 과연 어떤 태그 녀석들이 기본 속성이 다를까요?

 
속성 중에 block인 애들은 뭐가 있을까요?

div, p, ul, li, dl, dt, dd, h1~h6, form 등이 있습니다.

그리고 inline인 애들은 누가누가 있을까요?

span, a, img, input, mark, strong, em, abbr 등이 있습니다.

주로 텍스트와 이미지에 관련된 요소라고 보시면 이해가 쉽게 오시죠?


가장 자주 사용하는 요소들의 display속성에 대해서만 알고 있다면 레이아웃이 깨지는 원인 중 몇 가지는 찾아낼 수 있을 겁니다.

그리고 이제 float 속성에 대해서 완전히 이해한다면?

하드코딩으로 레이아웃 짜는 건 식은죽 먹기가 되는 겁니다.