[HTML/CSS] display와 positon의 이해

안녕하세요 인포돈 입니다.

 기업에는 CSS에서 가장 기초지만, 많이 사용하고 모르면 CSS를 다루기 힘들어지는 display와 position에 대해 이해해 보자

---

Display

 css를 활용하기 위해서 display의 개념을 확실히 이해하는 게 좋다. display에 넣을 수 있는 값들이 굉장히 많지만, 전문적인 frontend를 꿈꾸고 있지 않는 이상, 많은 개념을 알 필요가 없다. 크게 2가지만 알고 있으면 된다.

 

 1) display : block

해당 block의 기능은 아래 특성만 기억하면, 완벽하다.

 - 설정되어 있지 않으면, 너비는 최대한으로 넓어진다.

 - 설정되어 있지 않으면, 높이는 최소한으로 줄어든다.

 - 세로 배열로 정렬된다.

 - 이를 블록화라고 부른다.

 

 정말 별로 어렵지 않다. 너비가 최대가 되면, 다음에 오는 Tag나 Text는 당연히 다음 줄로 가게 된다. 즉, 한 줄을 모두 차지하게 된다. 이러한 특성 때문에 세로 배열 정렬이 된다고 하는 것이다.

 

 2) display : inline-block

해당 inline-block의 기능은 아래 특성만 기억하면, 완벽하다.

 - 설정되어 있지 않으면, 너비는 최소한으로 넓어진다.

 - 설정되어 있지 않으면, 높이는 최소한으로 줄어든다.

 - 가로 배열로 정렬된다.

 - 이를 글자화라고 부른다.

 

 여기는 더 어렵지 않다. 너비가 최소한으로 되기 때문에, 다음에 오는 Tag나 Text는 당연히 옆 칸에 오게 된다. 따라서 가로 배열로 정렬된다고 한다.

 

 * Tip

 - hidden은 해당 태그가 보이지 않게 하는 속성이다.

 - inline은 inline-block과 동일하지만, width, height, margin, padding과 같은 속성이 적용되지 않는다.

 - a, span 태그는 기본적으로 inline이다.

 - img 태그는 기본적으로 inline-block이다.

---

Position

 css를 활용하기 위해서 position의 개념을 확실히 이해하는 게 좋다. position에 넣을 수 있는 값들이 굉장히 많지만, 전문적인 frontend를 꿈꾸고 있지 않는 이상, 많은 개념을 알 필요가 없다. 크게 4가지만 알고 있으면 된다.

 

 1) position : static

 모든 태그들의 기본 값으로 설정되어 있는 속성이다. 해당 속성의 특징은 겹치기가 불가능하다는 것이고, 일반적으로 사용하는 우리의 태그들의 특징이 바로 그 특징이라고 생각하면 된다.

 

 2) position : relative

 뒤에서 확인해볼 absolute, fix 속성을 묶어 놓는 역할을 한다. (겹치기 불가능)

 

 3) position : absolute, fix

 부모와 관계없이 자유롭게 화면을 움직일 수 있는 속성이다. 쉽게 유령화라고 부른다. (겹치기 가능)

 

 그러면 이러한 absolute와 fix의 차이는 아주 간단하다. fix의 경우 스크롤을 내려도 계속 해당 위치에 고정이 되고, absolute의 경우 따라오지 않는다는 차이점이 전부이다.

 

Position 활용 (relative, absolute)

<section>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</section>

section>div {
  position:absolute;
  width:50%;
  height:50%;
}

section>div:first-child {
  top:0;
  left:0;
  background-color:black;
}

section>div:nth-child(2) {
  top:0;
  left:50%;
  background-color:green;
}

section>div:nth-last-child(2) {
  top:50%;
  left:0%;
  background-color:red;
}

section>div:last-child {
  top:50%;
  left:50%;
  background-color:gold;
}

 

이런 식으로 하면 아래와 같이 출력이 된다.

 

이때 relative와 해당 코드를 접목시키면 이렇게 유령화 된, 태그들을 묶어 둘 수 있다. 이때 absolute와 fix의 경우 지정된 위치는 relative를 가지고 있는 부모 태그를 기준으로 포지셔닝된다.

section {
  width:200px;
  height:200px;
  border:10px solid red;
  position:relative;
}

section > div {
  position:absolute;
  width:50%;
  height:50%;
}

section > div:nth-child(1) {
  top:0;
  left:0;
  background-color:black;
}

section > div:nth-child(2) {
  top:0;
  right:0;
  background-color:gold;
}

section > div:nth-child(3) {
  bottom:0;
  left:0;
  background-color:blue;
}

section > div:nth-child(4) {
  bottom:0;
  right:0;
  background-color:green;
}

 

앞서 살펴본 display와 position만 이해한다면, 웬만한 웹 페이지 구현은 쉽게 만들 수 있다.

 

 * Tip

absolute의 위치를 조정할 때는 top, right, bottom, left를 활용해서 위치를 조정한다.

 

 - inline-block, block 가로 정렬

inline-block을 가운데 정렬하기 위해서 부모 Tag에서 text-align : center; 속성을 넣어주면 된다.

block을 가운데 정렬하기 위해서 margin : 0 auto; 속성을 넣어주면 된다.