<TIL> CSS - Layout

이민재·2021년 8월 19일

html/css

목록 보기

3/3

LAYOUT

CSS 페이지 레이아웃 기술은 웹페이지에 포함될 요소들을 취합할 수 있게 해주며, 그들 요소가 일반 레이아웃 대열 상에 기본값 위치 기준과 부모 컨테이너, 또는 메인 뷰포인트 및 메인창과 비례해 어느 위치에 놓일 것인지를 제어한다. (Display, Grid, Floats, Positioning, Table..)

[CSS property 순서]

Layout Properties (position, float, clear, display)
Box Model Properties (width, height, margin, padding)
Visual Properties (color, background, border, box-shadow)
Typography Properties (font-size, font-family, text-align, text-transform)
Misc Properties (cursor, overflow, z-index)

즉, 요점은 우리는 CSS작성을 하기 위한 순서를 그리자면 가장 먼저 선행되어야 할 것은 바로 레이아웃이라는 것이다.

제대로된 레이아웃에 대한 속성을 이해하지 못하면 많은 시간허비와 불품 없는 결과가 나올 수 있다. 예를 들어, 내가 position에 대한 이해도 못했는데 단순하게 계속 전전긍긍하면서 위치만 꾸역꾸역 변경하면 나중에는 뒤죽박죽 되버린다.
따라서 오늘은 레이아웃에 대해서 공부해보자.
about float and position property!

"Float Property"

Float 속성은 컨텐츠의 위치를 조정하는데 사용됩니다.

예를 들어,

https://www.w3schools.com/css/css_float.asp

사진처럼 float 속성을 주니까 컨텐츠를 '동동' 띄운 것 처럼 위치하게 됩니다. 그래서, block 상태의 객체를 정렬할 때 많이 사용하게 됩니다.

float은 치명적인 단점을 몇 개 가지고 있습니다. 이에 대한 설명과 해결을 알아봅시다.

만약, 두 개의 <div> 박스를 좌측에 float 시키고 이어서 글을 작성한다고 그려봅시다. float은 동동 떠있는 상태라 우리가 만든 두 개의 <div> 박스 뒤로 글을 시작할 것입니다.

그래서 첫 번째, float으로 대응한다?
우리가 글을 쓸 <div>를 float을 한다면 다음 <div>를 작성시할 때 또 문제가 됩니다.

두 번째, overflow:hidden 사용?
자식요소가 float인 부모에게 overflow:hidden을 주면 부모가 자식을 담아냅니다. 다만, 이 방법은 내용이 넘치면 안보이기 때문에 한계가 있습니다.

세 번째, 빈요소에 clear:both 넣기?
float된 요소 밑에 빈 임의의 요소를 만들어 clear:both를 줍니다. clear는 취소하다는 뜻으로 float를 취소시킵니다. 이건 마크업의 흐름을 깨기 때문에 권장하는 방법이 아닙니다.
가상요소 ::after 사용하기

네 번째, 부모요소에게 ::after 넣기
가상요소에게 display:block 요소를 적용해 한 줄 가득차게 합니다. 그리고 빈 콘텐츠를 넣어주고, clear를 적용시켜줍니다. 부모 뒤에 보이지 않는 가상요소를 만들어 뒤에 요소가 위로 따라 올라가지 않게 해줍니다. 가장 많이 사용하는 방법입니다.

"Position Property"

position 속성은 어떤 요소로 사용될 지에 따라 타입을 지정하는데
다섯 가지의 위치 값이 있다.

position: static

HTML 요소는 기본적으로 ‘static’로 지정이 되어 있어서 정적 요소들은 top, bottom, left aand right 속성에 영향을 받지 않는다.

요소에 top:20px; left:20px; 이 적용되었는데도 움직이지 않는다.
기본적으로 position:static이 적용되었기 때문이다.
근데 위 사진에는 적용을 안 하지 않았냐고?
기본적으로 static이 적용이 되어 있다고 했잖아.

position: relative

원래 있던 자리에서 top, left, bottom, right 속성을 설정하면 상대적으로 이동한다.

position:relative를 적용하니까 원래 있던 자리에서 top 20px left 20px 만큼 움직였지?

position: absolute

자신의 ‘부모 요소’의 가장 가까운 요소를 기준으로 하여 움직이는데 이 때, position은 static이 아닌 relative, absolute, fixed, sticky 일 때만 적용된다.
일반적으로 absolute를 사용할 경우 기준이 될 부모 요소에게 relative를 적용한다.

position: fixed

뷰포트(viewport)를 기준으로 배치된다.
뷰포트를 기준으로 top, bottom, left, right로 지정된 위치에 고정되어, 스크롤을 내려도 여전히 그 위치에 있다. 부모 요소와 상관없이 뷰포트를 기준으로 자리가 고정되어 있는 것을 확인할 수 있다.

우리가 지정한 박스 내에서 움직이는게 아니라 지 멋대로 움직인다. 그죠.

position: sticky

원래 본인의 위치에 있다가 스크롤링을 하게 되면 고정된 위치로 바뀜.
top, bottom, left, right 중 하나 이상은 값을 지정해야 sticky 역할을 제대로 한다.

inline / block / inline-block

block

block은 한 영역을 차지 하는 박스형태을 가지는 성질이다. 그렇기 때문에 기본적으로 block은 width값이 100%가 된다. 그리고 라인이 새로 추가된다는 것을 알 수 있습니다.

block은 height와 width 값을 지정 할 수 있다.
block은 margin과 padding을 지정 할 수 있다.

inline

inline은 주로 텍스트를 주입 할 때 사용 되는 형태입니다.
그렇기 때문에 기본적으로 block처럼 width값이 100%가 아닌 컨텐츠 영역 만큼 자동으로 잡히게 되며 라인이 새로 추가 되지 않습니다.
높이 또한 폰트의 크기만큼 잡힙니다.(line-height로 설정이 가능 하긴 합니다.)

*중요!!
width와 height를 명시 할 수 없다.
margin은 위아래엔 적용 되지 않는다.
padding은 좌우는 공간과 시각적인 부분이 모두 적용 되지만,
위아래는 시각적으로는 추가되지만 공간을 차지 하지는 않는다.
(적용이 안되어서 보인다.) -> 이럴 때는 inline-block을 활용해서 해결가능