HTML | CSS (TIL 3. KEY POINT)

display 속성(inline, inline-block, block)

display 속성을 이해하기 전에 먼저 display의 사전적의미를 살펴보면, "보이다", "드러내다" 입니다. 즉, 웹페이지에 우리가 만든 컨텐츠를 어떻게 보일지를 고민한다면 가장 먼저 고민해야 할 부분이라고 할 수 있습니다.

display를 잘 사용하기 위해서는 먼져 inline과 block의 차이점에 대해서 충분한 이해가 필요합니다. HTML을 시작할 때 가장 먼져 배우는 태그, div와 span은 display의 핵심입니다.

div태그는 block요소이고, span태그는 inline 요소 입니다. 일반적으로 block이라는 용어를 가장 많이 사용할 때는 "블락 지정해!", "나 블락 되었어..." 입니다. 어떤 부분을 구획 지정할 때도 쓰고, 차단되거나 어떤걸 못하게 되었을 때 block이라는 용어를 사용합니다. 이 두가지의 의미가 HTML에서도 똑같이 사용된다고 생각하면 됩니다. div 태그를 사용하면 하나의 구역이 생성이 됩니다. 이 구역은 그 누구도 침범할 수 없는 구역입니다. 그래서 div태그 뒤에 똑같은 div태그를 만들면 자동으로 줄바꿈이 됩니다. 블락 됬으니깐요...

<div>pink</div>
<div>blue</div>
<div>green</div>

반면에 inline은 아래의 그림에서 볼 수 있듯이, 한줄에 쭉 ~ 나열 할 수 있습니다. 쉽게 생각해서, 하나(a)의 라인(line) 안(in)에 다 있다 라고 생각하면 편할 것 같습니다. 즉 block과 inline의 첫 번째 차이점은 줄바꿈 입니다.

<span>pink</span> <span>blue</span> <span>green</span>

두 번째 차이점은 크기 조절입니다. block은 조절이 가능하고, inline은 불가능 합니다. 아래 그림을 보면, 둘다 박스처럼 보이는데, block은 크기 조절이 가능하고, inline은 조절이 안된다고 하면, 왜 안되는지 의구심이 생길 수 있습니다. 워드나 한글을 사용 할 때, 중요한 부분을 표시할 때 밑줄 기능을 사용할 경우가 있습니다. 이 기능을 잘 살펴보면, 글자를 지우거나 추가를 하면 밑줄이 늘어나거나 줄어드는 것을 볼 수 있습니다. 밑줄 스스로 크기를 조절할 수 없죠. HTML에서도 마차간지 라고 생각하면 됩니다. inline안에 있는 컨텐츠의 크기에 따라서 사이즈가 조절이 됩니다.

그러면, inline 요소의 크기를 조절하기 위해서는 어떻게 해야할까요? display 속성을 변경 해야 합니다.

span { display: block; }

그러면, inline의 특성을 살리면서 block처럼 크기를 조절 하고 싶을 때는 어떻게 하면 될까요? 왜 이런 질문이 생겼는지, 먼져 이해해 보는 과정을 생각해보겠습니다. span 태그를 사용해서 어떠한 글자에 노란색 배경을 지정했다고 가정해 보겠습니다. span의 가장 큰 특이점은 글자수가 늘어나면, 거기 맞게 노란색 배경도 늘어나게 됩니다. 근데, 세로의 폭을 조금 더 넓히고 싶다는 생각을 할 수도 있습니다. 이럴 때, inline-block을 사용하면 됩니다. inline의 특성을 사용하면서, block의 특성까지도 사용을 하게는거지요.

position 속성 -relative, absolute, fixed

position 속성은 컨텐츠를 원하는 위치에 배치하고 싶을 때, 반드시 알아야 할 개념입니다.
가장 먼져 알아야 할 개념은 static입니다. 어려울 것 없습니다. static은 고정값입니다. 기본적으로 컨텐츠가 아무 속성을 지정하지 않았을 때, 위치하는 장소를 의미합니다. 그러면 relative는 뭘까요? relative의 뜻이 "상대적인" 이죠? 즉, static에 비해서~라고 생각하면 됩니다. static을 기준으로 해서 위치를 이동하겠다는 의미입니다. absolute는 좀 더 스토리를 넣어야 합니다. "절대적인" 뜻을 잘~생각해보면, 절대적이니깐, 고집이 셀 것 같기도 하고, 충성스러울 것 같기도 하고, 뭐 어찌되었든 그런 늬앙스를 느꼈다면, 다 끝났습니다. absolute는 static의 값이 기준이 되지 않습니다. 하지만 상위요소, 일반적으로 부모요소라고 합니다. 부모요소에게는 절대적으로 충성하는 요소입니다. 부모요소의 값이 기준이 되죠. 부모요소가 없으면, HTML 기준으로 위치가 정해집니다. 마지막으로 fixed는 그냥 못이 박혀있다고 생각하면 됩니다. 움직이지 않죠. fixed도 브라우저 화면의 위치를 기준으로 정해집니다.

z-index

position 속성을 통해서 위치를 옮겼는데, 기존에 있던 컨텐츠랑 겹쳐졌다고 가정을 해보겠습니다. 즉, 2개의 box가 중첩이 되어 있죠. 파워포인트를 하다보면, 이미지를 삽입한 순서에 따라서 먼저 삽입한 이미지가 보이지 않을 때가 있습니다. 이 때, "맨 뒤로 보내기", "맨 앞으로 보이기" 의 기능을 사용해서 레이어드를 꾸미곤 하는데, 이러한 기능이 CSS에서는 z-index 입니다. 숫자가 클 수록 맨 앞단에 나타납니다. 그래서 다른 개발자분들이 작성하신 코드를 유심히 살펴보면, z-index: 10000; 인 경우를 많이 살펴볼 수 있을겁니다. "얘는 절대적으로 이 위치를 고수하겠어"의 강력한 의지라고 보면 됩니다.

float

float은 뭘까요?? 뜨는거??
이럴 때 보면, 영어권에 사는 사람들이 부럽습니다. 영어를 잘하니깐요. ㅎㅎㅎ;;;
float의 개념을 이해하려면 뜬다라는 개념을 머리에 먼져 입력하고 시작하는게 이해하기 쉬울거에요. block으로 된 박스 A, B가 있다고 가정을 해보죠. 그러면 어떻게 배치가 될까요?
A박스가 맨처음에 위치해 있을 거고, 그다음 B박스가 바로 밑에 있겠죠. 그러면, B박스를 A박스 옆으로 옮기고 싶을 때는 어떻게 하면 될까요? display 속성을 inline으로 변경하면 되지 않을까, 생각할 수 있습니다. inline 박스의 특성대로 박스크기가 글자크기에 맞춰지게 될거에요. inline-block을 쓰면, inline과 block의 특성을 모두 갖게 되면서, 옆으로 오게 될거에요. 하지만 margin값 때문에 A박스와 B박스 사이에 공간이 생기게 될거에요. 그러면 두개를 딱 붙이고 싶으면 어떻게 하면 될까요? float 속성을 쓰면 됩니다. 같은 질량과 부피를 갖고 있는 2개의 풍선이 있는데, 놓인 위치가 달르다고 가정을 해보겠습니다. 근데, 막힌 같은 공간에서 두개의 풍선을 띄우게 된다면, 아마 같은 선상에 있게 될거에요... (설명하기 힘든데...그냥 그렇다고 생각하세요 ㅎㅎㅎ;;;)
즉, A박스 옆에 B박스를 바로 붙일 수 있답니다.