[TIL] HTML/CSS_200324

이민석·2020년 3월 24일

TIL

목록 보기

2/14

HTML/CSS

Block or Inline?

요소들을 구분하는 기준 중 하나는 그 요소들이 차지하는 영역이라고 할 수 있는데, block 요소는 좌우측에 다른 요소를 넣을 수 없는, 즉 브라우저의 가로를 모두 차지하는 요소이다. p, div, li, h1등의 태그가 대표적인 block 요소이다.

이와는 반대로 내용 크기만큼만 영역을 차지하는, 즉 옆에 다른 요소가 위치할 수 있는 요소를 inline 요소라고 한다. span, a, img등의 태그가 대표적인 inline element이다.

예시를 한번 보도록 하자.

위의 경우 네번째 줄까지는 p태글 이용한 결과인데 텍스트의 크기와 상관없이 그 줄 모두를 사용함을 알 수 있다. 마지막의 경우는 span 태그를 사용하였는데 딱 텍스트 크기 만큼만 영역을 차지하는 것을 볼 수 있다.

그렇다면 이렇게 미리 정해진 성질을 바꿀 수는 없을까? 다행히도 우리는 CSS를 통해 얼마든지 고유한 성질을 바꿀 수 있다. 예컨대 block element인 p태그를 inline으로, inline element인 span 태그를 block으로 바꿀 수 있다.

이를 가능케 하는 property로는 display와 float가 있다. 두 property에 대해서는 후에 자세히 다루도록 하고 우선 사용법을 먼저 살펴보면 아래와 같다.

/* block to inline */
.inline-p {
  display: inline-block;
}

.float-left {
  float: left;
}

/* inline to block */
.block-span {
  display: block;
}
p.inline-p와 p.float-left의 경우 p 태그임에도 inline element의 성질을 갖게 되며, span.block-span의 경우 span 태그임에도 block element의 성질을 갖게 된다.

#참고

display: none의 경우 html로만 존재하고 화면에는 마치 없는 것처럼 나타나게 된다. 이는 주로 interactive한 웹을 구현하기 위해 사용되며 단순히 코드를 지우는 것과는 큰 차이가 있다. 주의해야 할 점은 visibility: hidden과는 큰 차이가 있다는 것이다. 언뜻 보기에는 두 property 모두 화면에서 보이지 않게 하는 역할을 하는 것 같지만 전자는 그 요소 자체가 없는 것처럼 브라우저를 보여주고 후자는 쉽게 생각하면 투명하게 보이게 하여 그 요소가 차지하는 영역을 빈 공간처럼 보이게 한다.

Position

Position property는 말그대로 요소의 위치를 지정해주는 역할을 한다.
Position에서 사용하는 네가지 값은 다음과 같다.

static
relative
absolute
fixed

이 중에서 static을 제외한 나머지 세가지에 대해서 알아보자.

relative

relative는 그 자체로는 의미가 없으며 position property가 존재해야만 이동한다.
position property에는 top, right, bottom, left가 있으며 예시는 아래와 같다.

.relative {
  position: relative;
}

.top-20 {
  top: -20px;
  left: 30px;
}
div.relative는 일반 div와 똑같으며 div.relative.top-20은 위로 20px 올라가고, 왼쪽에서 30px만큼 떨어진다.

양의 값을 주었을 때 지정한 방향에서 그만큼 떨어지고 음의 값을 주면 지정한 방향 쪽으로 더 간다고 이해하면 되겠다.

absolute

absolute는 영어 뜻 그대로 절대적인 위치라는 의미인데 이는 viewport의 기준에서 절대적인 위치가 아닌 부모의 기준에서 절대적인 위치라는 의미이다. 그 부모는 postion이 "정해져" 있어야 하는데 이는 relative, fixed, absolute로 정해져 있다는 의미이다. 보통 absolute을 쓸 경우 그 부모는 relative를 부여한다.

.absolute {
  position: absolute;
}
.right-0 {
  right: 0;
  bottom: 0;
}

위의 예시의 경우 p.absolute.right-0인 요소는 부모 안에서 우측 하단에 딱 붙어서 위치하게 된다. 여기서 하나 더 짚고 넘어갈 점은 p 태그 이므로 block element임에도 absolute를 부여받게 되면 마치 inline element와 같이 너비가 내용의 크기만큼으로 정해진다.

fixed

마지막으로 fixed는 고정되어 있다는 것인데, absolute와는 다르게 부모가 필요없이 viewport를 기준으로 절대적인 위치를 갖게 된다.

.coupon {
  position: fixed;
  right: 0;
  bottom: 0;
  background-color: red;
  color: white;
  font-size: 20px;
}

위의 예시의 경우 브라우저의 크기, 혹은 모바일의 크기에 상관없이 우측 하단에 고정되어 스크롤하여도 위치가 변하지 않게 된다.

float

앞서 간단하게 언급한적이 있는 float property에 대해 알아보자. float는 흔히 텍스트 에디터에서 사용되는 사진 주위로 텍스트를 감싸는 기능을 CSS에서 구현하기 위해 만들어진 property이다. 하지만 레이아웃을 잡을 때에도 매우 유용하게 사용된다.

예를들어 위와 같은 레이아웃을 만들고 싶을 때 배너에는 header 태그를, 사이드바에는 aside 태그와 함께 float-left를 주고 main contents는 section 태그를 주어 구성할 수 있다. 각각의 태그에 높이와 너비를 지정해줄 수 있는데 예를들어 사이드바의 너비를 고정해주고 메인 콘텐츠의 너비는 정해주지 않으면 브라우저의 크기에 따라 메인 콘텐츠 부분의 너비만 바뀌게 된다.