CSS | 레이아웃의 모든 것!!

 

1. position 속성 - relative, absolute, fixed

 

2. inline, inline-block, block 에 대해서

레이아웃 :

클론 코딩 등을 할 때, position과 display를 사실 무지성으로 썼다. 왜 여기선 position을 쓰고, 저기서는 display를 쓰는지 생각해본 적이 없다. 그냥 태그에 따라 쓰는 것이 다르다고 생각했고(물론 어느 태그에 무슨 속성을 쓰는 지 외운 적은 없다^.^ 상황에 따라 외웠던 것 같음..) “내가 하고 싶은 표현을 어떻게 표현했었지..”만을 생각해본 것 같다.

그런데 이번 블로그 포스팅을 공부하며 큰 의문이 들었다. 태그에 따라 display 값들이 inline, block 인지 grid, flex, absolute 인지 결정된다고 생각했었는데, 사실상 모든 요소에들에는 position 속성도, display 속성도 있으며, 위에 나열한 display 값들이 모두 존재했기 때문에!! 어떤 기준으로 사용되는 것인지 궁금했다.

Position과 Display의 경우, 내가 전체에서 어떤 위치를 점유할 것인지, 나의 경계를 어디까지 설정할 것인지의 차이이다.

즉 Position의 경우, 내가 전체에서 어떤 위치에 고정적으로, 상대적으로, 자유롭게~ 위치할지를 지정한다. 반면 Display는 ‘내’가 어떤 모습으로 있을지 지정해주는 속성이다.

아까 말한 대로, Display에 대해 뜯어보자면, 외부 디스플레이 유형과 내부 디스플레이 유형으로 나뉘고, 전자는 외형을 결정한다면, 후자는 내부의 요소들이 어떻게 존재할지를 결정하는 것이다.

오늘은 이 중 Position 속성 중, relative, absolute, 그리고 fixed 와 display 중 외부 디스플레이 유형에 대해 정리해볼 것이다.

Position
default 값 : static

relative

타 구성요소들에 대해 영향을 받거나 주지 않고, (CSS 요소가 가미되지 않은)원 위치에서 상대적으로 어떤 위치에 있을지를 설정한다.

→top, botto, left, right 속성들과 함께 사용되어 기준인 원 위치에서 어떤 방향으로 얼마나 떨어져서 위치할지 결정한다.

absolute

부모 태그 내에서 어떤 고정된 위치를 줄 수 있다.

다른 요소가 먼저 위치를 점유하고 있어도 뒤로 밀리지 않고 덮어쓰게 된다. (이런 특성을 부유 또는 부유 객체라고 한다.)

하지만, 만약 부모태그가 static인 경우, 아니면 부모의 부모태그가, 아니면 부모의 부모의 부모태그가… 모두 static이라면 body를 기준으로 위치가 지정된다. 그를 피하기 위해 관용적으로 relative를 사용해준다.

→top, botto, left, right 속성들과 함께 사용되어 기준인 부모태그 에서(0,0 즉 맨 왼쪽 위 꼭지점!) 어떤 방향으로 얼마나 떨어져서 위치할지 결정한다.

fixed

(개인적으로 가장 좋아하는 속성이다.) display : fixed 속성을 이 글 작성 하루 전에 이해했는데, 그냥 사용하는 것이 아니라 이해가 동반되고 나니 어떤 홈페이지를 볼 때마다 정말 반갑더라.

각설하고, 브라우저에서 어떤 고정된 위치를 설정할 수 있다. 문서와 헷갈리면 안된다! absolute는 문서 상에서 고정된 위치, fixed는 브라우저에서 고정된 위치를 설정할 수 있는 속성들이다.

→top, botto, left, right 속성들과 함께 사용되어 기준인 브라우저 상에서(0,0 즉 맨 왼쪽 위 꼭지점!) 어떤 방향으로 얼마나 떨어져서 위치할지 결정한다. 문서가 엄청 길어서 스크롤을 하는 경우에도, display : fixed 요소를 가지고 있는 엘레멘트의 경우, 브라우저 상에서 고정되어 있다.

Display
default 값 : block 또는 inline

 

외부 디스플레이 유형 : 플로우 레이아웃에 요소가 참여 하는 방식으로, block, inline, inline-block이 있다. 내부 디스플레이 유형 : 자식의 레이아웃 방식 결정으로, flex, grid 등이 있다.

⇒ 오늘 정리할 내용 : 외부 디스플레이 유형(block, inline, inline-block)

block inline

모든 엘리먼트에는 엘리먼트의 유형에 따라 기본 표시값이 있다. 대부분의 엘리먼트의 기본값은 보통 block이나 inline이다.

만약 block Element를 사용하더라도, 이 요소의 레이아웃을 inline으로 변경해주고 싶다면 display 속성을 inline으로 바꿈으로써 이를 수정하여 사용할 수 있다.

inline :

기본값으로 display : inline; 속성을 적용하는 요소들로, <span>, <em>, <a> 태그들이 있다.

🔴주의할 점

• 항상 태그 내 컨턴츠의 크기 만큼만 공간을 갖도록 되어 있다. 그렇기 때문에 너비와 높이 설정을 아무리 큰 값으로 설정해도 무시된다는 점을 주의해야 한다.
• padding, margin 사용 시, margin는 설정한 상하 값은 무시되고 좌우 값만 적용된다. padding의 경우가 매우 특이한데, inline에서의 padding은 부모태그의 속성에 따라 영향을 끼치고 끼치지 않고가 결정된다. (static의 경우, 부모 태그의 부피와 상관 없이 inline 요소의 부피만 변화한다.)

block :

블록 element 의 width를 설정하면 컨테이너 좌우 가장자리로 늘어나지 않게 할 수 있다. 그런 다음 좌우 마진을 auto로 설정해 해당 엘리먼트를 컨테이너 내에서 가로 중앙에 오도록 할 수 있다.

옐리먼트는 지정 가로 너비를 차지하고, 나머지 공간은 양측에 동일하게 나누어진다.

 

inline-block :

인라인 블럭은 말 그대로 인라인과 블락의 속성을 다 갖고 있다. 
부모 요소 내에서 블락의 속성을 갖지만, 자신과 동등한 계층에 있는 요소들과 라인 내 함께 위치한다.

 

margin, padding 등의 조정이 무시되지 않는다. 

부모 요소의 가로 세로가 고정되어 있지 않다는 전제 하, 부모요소의 부피에도 영향을 끼친다.
만약 부모요소의 가로 세로가 고정되어 있다면, 아래와 같은 현상이 발생한다.

 

---

부모 요소의 가로 세로 고정되어 있을 때, 

main {
    background: tomato;
    width: 50px;
    height: 50px;
  }
  
 span{
  background-color: cyan;
  width: 100px;
  height: 100px;
  display: inline-block;
  padding: 120px;
 }

 

 

---

부모 요소의 가로 세로가 고정되어 있지 않을 때,

main {
    background: tomato;
  }
  
 span{
  background-color: cyan;
  width: 100px;
  height: 100px;
  display: inline-block;
  padding: 120px;
 }

 

 

 

 

 

---

레이아웃에 대한 개념을 파악한 것은 아주 좋은 일이지만, 부모 태그의 display 나 position의 속성에 따라 또 바뀐다는 것을 구역을 나누어 생각할 시간이 필요한 것 같다.

 

어제 공부할 때는 다 끝내고 싶은 마음과 안 풀리는 한 지점에 골몰하는 나 자신으로 멘탈이 나갈 뻔 한 경험을 했다.
그런 타이밍을 조우했을 때, 조금 리프레시 하고 구조를 다시 생각해보는 것이 필요하다.

 

결과를 도출하는 것에 골몰하여 제대로 생각할 시간도 없게 개념보다는 문제 풀이만 지속한 나 자신 반성해!
멘탈을 다 잡고, 어차피 모르면서 막무가내로 하는 거나 개념 정리하고 다시 풀어보는 과정이나 시간 쓰는 건 똑같으니 제대로 알고 풀자.