HTML + CSS 주요 개념 정리(6) - 레이아웃에 영향을 미치는 요소 Ⅱ

저번 글에 display 속성과 positon속성을 알아보겠다고 했느네, 바로 가보자!

---

1. display 속성으로 HTML 태그의 혈앨형 바꾸기

display 속성은 HTML 태그가 가진 두 가지 혈액형인 Block 요소와 InLINE 요소를 사용한다.

여기서 혈액은 요소의 고유특징이라고 생각하시면 됩니다.

 

Block 요소와 Inline 요소에는 다음 세 가지 특징이 있다.

 

• 줄 바꿈 현상 유무
• width 와 height 속성 적용 유무
• margin-top, margin-bottom, padding-top, padding-bottom 속성 적용 유무

Inline 요소의 혈액형을 가진 <span> 태그의 특징을 살펴보자!

<span> 태그는 inline 요소의 특징을 가지므로 줄 바꿈 현상이 안 나타남. 또한 width, height, margin-top, margin-bottom 속성에 작동되지 않는다. 

 

예제를 통해 살펴봅시다.

그림과 같이 inline속성인 span태그에 여러 속성을 부여했습니다.

그림 1 - inline 예제

실행 결과를 보면 background를 제외하고, 전혀 적용되지 않는 모습을 보입니다. 앞서 설명한것과 같습니다.

그림 2 - inline 실행 결과

그럼 이제 display 속성을 사용하여 <span> 태그의 혈액형을 Block 요소로 바꿔 보겠다.

태그 안에 display: block; 만 추가하면 된다!!

그림을 보면 block 속성으로 바꾸니 span에 적용한 다른 적용 값을 정상적을 작동됨을 보입니다.

그림 3 - diplay: block 실행 결과

반대로 block 요소의 특징을 가지는 <h>태그에 display: inline 속성 값을 주면 어떻게 될 거 같나요?

이전에 본 그림에 반대로 나타나게 될겁니다. 이 부분은 스스로 해보시길..

 

마지막으로, inline 요소와 block 요소를 섞은 상태 줄 바꿈 현상이 일어나지 않고 width, height, margin-botton 속성이 적용되도록 할 수도 있다.

적용은 display: inline-block; 형식으로 적용하면 된다.

 

---

2. position 속성으로 HTML 태그에 차원 부여하기

차원은 우리가 알고있는 1,2,3차원을 이야기하며 태그에 차원을 부여함으로써 좀 더 입체적인 웹페이지 구성을 도모할 수 있다.

 

position 속성은 선택된 태그의 상태를 2차원 또는 3차원으로 지정한다. 여기에 맞춰 레이어가 생기고 좌표 기준점이 달라진다. position 속성의 속성 값에는 static, fixed, relative, absolute가 있다. 각 속성 값에는 다음 세 가지 조건으로 확인할 수 있다.

 

• 부모 자식 간에 발생하는 마진 병합 현상 유무
• top, right, bottom, left 속성 적용 유무
• 부모가 높이를 갖고 있지 않을 때 자식의 높이가 부모에 높이에 영향을 주는지 유무

2차원 특징을 갖는 position 속성값은 부모 자식 간에 발생하는 마진 병합 현상이 일어나고, top, right, bottom, left 속성을 사용할 수 없으며, 자식의 높이가 부모의 높이에 영향을 미친다. 반면 3차원 특징을 갖는 속성 값은 부모 자식 간에 발생하는 마진 병합 현상이 일어나지 않으며, top, right, bottom, left 속성을 사용할 수 있으며, 자식의 높이가 부모에 높이에 영항을 주지 않는다.

 

2-1. 2차원 세계, static 속성값

# static 속성 값 특징

1. 부모 자식 간에 발생하는 마진 병합 현상이 일어난다
2. top, right, bottom, left 속성이 적용되지 않는다.
3. 부모가 높이를 갖고 있지 않을 경우에 자식의 높이가 부모에게 영향을 준다.

이 부분은 곰곰이 생각해보시면 쉽습니다. 2차원이라고 갑자기 새로운 용어가 나온 거 같지만 이전에 보여준 마진 병합 협상의 모든 예시는 2차원이라 생각하시면 앗!! 그렇구나!! 하게 될 것입니다.

2-2. 3차원 세계, fixed 속성 값

# fixed 속성 값 특징

1. 부모 자식 간에 발생하는 마진 병합 현상이 일어나지 않는다.
2. top, right, bottom, left 속성이 적용된다.
3. 부모가 높이를 가지고 있지 않더라도 자식의 높이가 부모에게 영향을 주지 않는다.

그림은 여러 개의 네모 박스들을 여 러크기로 만들어 논 후, 파란색의 사각형만 fixed 설정을 하였습니다.

그림 4 - fixed 고정값 예제

그림을 보면 노란색 사각형 위로 fixed 설정된 파랑색 박스가 위로 올라간 것을 볼 수 있습니다. 그림으로 보면 같은 면에 있는 것처럼 보이지만, 실제로는 3차원으로 파란색이 좀 더 위에 있기 때문에 겹친 것처럼 보이는 거죠. 어렸을 적 위에서 본 모양을 문제로 푼 적 있다면, 쉽게 이해하실 수 있을 것입니다.

그리고 실행 결과 웹 페이 제어서 마우스 휠을 돌려며 보면 휠에 따라 이동하는 것을 알 수 있습니다. fixed의 고유 특성이고 이건 인터넷 웹 뉴스를 보면 웹 광고가 휠에따라 이동한 것을 보신 적이 있을 겁니다. 네 바로 그렇습니다 그 광고는 바로 fixed 속성을 값이 적용된 광고인 것 이죠.

그림 5 - fixed 고정값 실행 결과

2-3. 2차원과 3차원의 세계, relative 속성 값

1. 부모 자식 간에 발생하는 마진 병합 현상이 일어난다.
2. top, right, left, bottom 속성이 적용된다.
3. 부모가 높이를 갖고 있지 않으면 자식의 높이가 부모에게 영향을 준다.

앞서 본 두 속성의 짬뽕인 셈입니다. 예시를 들여 설명하면 좋겠지만, 실제로 해보시면 더 좋을 것입니다.

 

이제 전체적으로 요약하면 아래와 같다.

position 주요 속성값	차원	부모 자식 간에 발생하는 마진 병합 현상	top, right, left, bottom 적용	자식의 높이 값이 부모에게 미치는 영향
static	2차원	o	x	o
fixed	3차원	x	o	x
relative	2차원, 3차원	o	o	o
absolute	3차원	x	o	x

---

후기

 

지금까지 주요 position 속성 값의 주요 특징을 알아봤다. 2차원 3차원에 따라 레이아웃에 영향을 준다.

또한 2차원을 3차원으로 3차원을 2차원으로 변경이 가능하며, 3차원 사용 시 top을 사용할 때는 좌표 기준점 등이 레이아웃 작업에 중요한 요소이므로 꼭 숙지가 필요하다.

이제 레이아웃에 영향을 미치는 요소중 z 축에 대해 다음 글로 알아보겠습니다.