개인적으로 저에게 CSS에서 가장 중요한 것을 꼽아보라고 하면, 한 치의 고민도 없이 레이아웃을 고를 것 같습니다. 그만큼, HTML과 CSS에 있어서 화면에 구현된 여러가지 요소의 배치라고 할 수 있습니다.
원래부터 알고 있던 개념인 CSS의 속성인 position
, display
를 제외하고 float
에 대해서 새롭게 알게 되었기 때문에 세 가지에 대해 정리해보려 합니다.
개인적으로 float
보다는 발전된 flex-box
에 대해서 더욱 잘 구현할 수 있는 것이 좋다고 생각하지만, 개발 환경은 회사마다 다르며 아직 많이 사용되는 속성이므로 float
에 대해 익숙해지는 것도 중요할 것이라 생각합니다.
그럼 시작해보겠습니다.
position
이라는 속성은 요소의 위치 지정 기준을 의미합니다. 문서 상에 요소를 배치하는 방법을 지정한다고 할 수 있습니다.
그리고 이 위치 지정 요소란 기본값인 static
을 제외한 relative
, absolute
, fixed
, sticky
중 하나인 속성 값을 의미합니다.
static | relative | absolute | fixed | sticky |
---|---|---|---|---|
기준 없음 | 요소 자신을 기준 | 위치 상 부모 요소를 기준 | 뷰포트(브라우저) 기준 | 스크롤 영역 기준 |
여기서 가장 자주 사용하게 될 속성은 relative
와 absolute
입니다. relative
는 static
과 같이 표현되지만, 위치 지정 요소인 값이므로 특히 absolute
와 주로 함께 사용됩니다.
왜냐하면, absolute
는 위치 상 부모 요소를 기준으로 하고 있기 때문입니다. 위치 상 부모 요소가 static
이 아닌 위치 지정 요소라면 absolute
는 부모 요소에 대해 상대적으로 배치합니다. MDN에서 설명하는 것처럼 요소를 일반적인 문서 흐름에서 제거하고, 페이지 레이아웃에 공간도 배정하지 않습니다.
추가적으로 중요한 것은 position
속성의 값으로 absolute
, fixed
가 지정된 요소는, display
속성이 block
으로 변경된다는 점입니다.
그리고 position
속성과 같이 사용하는 속성들이 있습니다. 위에 나와있는 속성인 top
, bottom
, left
, right
값은 요소의 각 방향별 거리를 지정할 수 있습니다. 이 속성들은 static
이 아닌 속성에서만 값을 지정할 수 있다는 점 유의하셔야 하며, 모든 값들은 음수를 사용할 수 있습니다.
그리고 px, em, rem 등을 단위로 지정할 수 있습니다.
마지막으로 이와 함께 사용되는 속성인 z-index
가 있습니다. 요소의 쌓임 정도를 지정하게 됩니다. 기본값은 auto
로써 부모 요소와 동일한 쌓임 정도를 가집니다.
z-index
값은 숫자로 1, 100, 1000 등을 지정할 수 있습니다. 그러나 요소 쌓임 순서(Stack order)도 static
을 제외한 위치 지정 요소에만 지정이 가능합니다.
요소 쌓임 순서는 매우 중요한 개념이지만 이번 글에서는 자세히 다루지 않도록 하겠습니다. 그리고 positon에 대해 더욱 자세한 사항은 MDN position을 참고 바랍니다.
display
속성은 요소의 화면 출력(보여짐) 특성을 의미합니다. display
속성은 매우 간단하지만 매우 중요한 것들을 포함하고 있습니다. 그렇다면, 하나씩 차근차근히 알아봅시다.
block | inline | inline-block |
---|---|---|
상자(레이아웃) 요소 | 글자 요소 | 글자 + 상자 요소 |
위의 세 가지는 각 요소에 이미 지정되어 있는 값이며, 이를 물론 임의적으로 다른 값을 주어 변경할 수 있습니다.
dt, dd, ul, li, ol, dl, div, p, form, h1, h2, h3, h4, h5, h6
block
요소는 위에서 말한 것처럼 상자, 레이아웃 요소이며 사용 시에는 블록 요소라 주로 불립니다. 그리고 블록 요소의 종류에는 위와 같은 것들이 있습니다. 이외에도 여러 종류가 있습니다.
블록 요소의 width
는 옆으로 늘어날 수 있는 만큼 최대한으로 늘어나 부모의 요소까지 늘어나지만, height
는 값을 주어도 값이 늘어나지 않습니다.
span, a, img, button, br, input, script, textarea, select
inline
요소는 위와 같은 종류들을 의미하며, 글자 요소라고 할 수 있습니다. 참고로 해당 요소만큼의 크기만을 갖기 때문에 별도의 width, height값을 설정해도 무시합니다.
인라인-블록 요소는 글자와 상자 요소를 합친 것을 의미합니다. inline
이면서 block
요소를 지니게 하고 싶다면 해당 속성값을 지정해주시면 됩니다. inline
처럼 텍스트 흐름대로 쭉 나열되고, block
처럼 상자 요소로써 width
, height
로 크기 설정이 가능합니다.
float
속성에는 left
, right
, none
를 값으로 줄 수 있습니다. 그러나 float
은 부모의 높이를 인지할 수 없으므로 해당 속성을 가진 요소는 말그대로 자유롭게 떠다니게 됩니다.
left : 왼쪽으로 붙는 float 정렬을 취소 한다.
right: 오른쪽으로 붙는 float 정렬을 취소 한다.
both : 왼쪽, 오른쪽 모두 붙는 float 정렬을 취소한다.
이를 해결하기 위해 clear
라는 속성이 있으며, left
, right
, both
라는 3가지 값을 가질 수 있습니다.
<div class="box">...</div>
<section>...</section>
.box {
float: left;
width: 200px;
height: 100px;
margin: 1em;
}
float
를 사용하여 간단하게 코드로 정리해보았습니다. 아래에서 확인하시는 것처럼 box
가 그대로 떠서 레이아웃이 엉망인 모습을 볼 수 있습니다. 이를 해결해려면 어떻게 해야할까요?
바로 방금 말했던 clear
속성입니다.
.box {
float: left;
width: 200px;
height: 100px;
margin: 1em;
}
.after-box {
clear: left;
}
위에서 확인하실 수 있는 것처럼 box
태그에 속성 값을 주는 것이 아닌 그 다음의 요소 아무거나에 clear
속성에 값을 주시면 됩니다. 왼쪽, 오른쪽, 양쪽을 비울지에 대해 값이 정해지게 되겠네요.
이렇게 완성이 되었습니다. 다만, 이 방법은 HTML 코드를 하나 더 작성해야 하는 번거로움이 있기 때문에 아래의 코드를 통해 더욱 간결하게 짤 수 있습니다.
<div class="wecode-box last-box">
<img class="float-right" src="https://s3.ap-northeast-2.amazonaws.com/cdn.wecode.co.kr/logo/wecode_logo_bk.png">
<p>오버플로우 히든</p>
</div>
.float-right {
float: right;
}
.last-box {
overflow: hidden;
}
위와 같이 주로 많이 사용하는 방법인데 바깥 div(.wecode-box)
에 overflow: hidden
을 주는 것입니다.
이렇게 float
를 마지막으로 레이아웃의 완벽 정리는 아닌 간단한 정리를 해보았습니다. 간단하게 보이지만 프론트엔드 개발자로서는 절대 간단하다고 생각해서 넘어가서는 안되는 매우 중요한 개념들이기에 여러 번 반복해서 보고 학습하는 것을 추천드리겠습니다.
CSS는 재밌다!
를 속으로 여러 번 외치고 있지만 아직까지는 힘든 건 사실이네요😹😹 다음 글에서 또 뵙도록 하겠습니다.
출처1 - 1분 코딩 블로그
출처2 - calm dawn studio
출처3 - heropy tech
출처4 - Learn CSS Layout