CSS Layout은
웹 페이지의 구조와 배치를 설정하는 방법을 설명해주며, 이를 통해 다양한 기법들을 사용하여 웹 페이지의 요소들을 원하는 위치에 배치할 수 있다.
Layout을 위한 주요 기법들 알아보기
1. display
이 속성을 사용하면, 요소가 가지고 있는
block,inline등을 변경할 수 있다.
📒 기본적인 방법
(1) block
- 요소가 화면 전체 너비를 차지하며, 이에 따라 위아래로 줄 바꿈이 일어난다.
- 이로 인해 이전/다음 요소에 영향을 준다.
width를 지정하지 않으면 전체 너비를 차지한다.
.example {
display: block;
} /* `.example` 클래스의 요소를 `block`으로 변경한다. */(2) inline
- 요소가 텍스트처럼 한 줄에 나타나며, 콘텐츠의 너비만큼만 공간을 차지한다.
- 이로 인해 위아래로 줄 바꿈이 일어나지 않고, 가로 배치가 된다.
margin,padding의top과bottom만 설정할 수 있다.
.example {
display: inline;
} /* `.example` 클래스의 요소를 `inline`으로 변경한다. */(3) inline-block
block과inline의 특성을 모두 가진다.block의 특성으로height를 지정할 수 있다.inline의 특성으로 가로로 배치된다.
.example {
display: inline;
} /* `.example` 클래스의 요소를 `inline-block`으로 변경한다. */📒 요소를 안 보이게 하는 방법
요소를 안 보이게 하는 방법으로는
display속성의none과visibility속성의hidden이 있다.
(4) display: none;
- 요소를 화면에서 보이지 않게 한다.
- 레이아웃을 변경하여 숨기기 때문에, 해당 공간에 다른 요소가 들어온다.
.example {
display: none;
} /* `.example` 클래스의 요소를 `none`으로 변경하여 안 보이게 해준다. */(참고) visibility: hidden;
- 요소를 화면에서 보이지 않게 한다.
- 레이아웃을 변경하지 않기 때문에, 공간은 그대로 유지된다.
.example {
visibility: hidden;
} /* `.example` 클래스의 요소를 `hidden`으로 변경하여 안 보이게 해준다. */2. float
요소를 좌우 방향으로 띄우는 역할을 담당한다.
- 이 속성을 사용하면 요소가 일반 흐름(normal flow)에서 벗어난 형태로 페이지의 왼쪽 혹은 오른쪽으로 띄어진다.
- 모든 요소는 기본적으로
float: none;이라는 값을 가지고 있다.
그렇다면 일반 흐름(normal flow)은 무엇인가?
요소의 레이아웃을 변경하지 않았을 때의 배치하는 방법에 관해 설명한 것이다. float와 매우 밀접한 개념!
Q & A
🩵 모든 요소가 필수적으로 가지는 속성이라면, 별도로 정렬 속성을 사용하지 않아도 될 것 같은데요?!
🩶 과거에는 float 속성을 이용해 요소들을 정렬하는 방식이 일반적이었지만, 현재는 권장되지 않는 방식입니다.
float 속성의 주요 역할은 요소의 흐름을 지정하는 것인데요. 만약 모든 요소의 float 속성을 none이 아닌 다른 값으로 지정하면, 요소의 흐름이 계속 바뀌면서 주변 요소의 배치를 방해할 수 있습니다. 결과적으로 레이아웃이 복잡해지고 예상치 못한 결과를 초래할 수 있습니다.
또한 float 속성을 사용하면 클리어링이라는 추가 작업이 필요한데, 이를 위해 추가적인 HTML/CSS 코드를 작성해야 하므로 불필요한 코드 생성을 유발할 수 있습니다.
🩵 그렇다면 대체 어느 속성을 사용해야 하나요..?
🩶 Grid나 Flexbox 같은 더욱 유연한 레이아웃 도구들을 활용하면 효과적으로 레이아웃을 제어할 수 있습니다. 특히 반응형 웹 디자인을 구현하려 할 때는 float 속성이 레이아웃의 유연성을 제한하므로 사용을 피하는 것이 좋습니다.
🩵 그래도 사용해보고 싶어요!
📒 float 속성의 사용 방법
속성: 값 | 설명 |
|---|---|
float: left; | 요소를 왼쪽으로 띄웁니다. 왼쪽에 공간이 없다면 다음 줄로 내려갑니다. |
float: right; | 요소를 오른쪽으로 띄웁니다. 오른쪽에 공간이 없다면 다음 줄로 내려갑니다. |
float: none; | float 속성을 적용하지 않습니다. 이는 기본값입니다. |
float: inherit; | 부모 요소의 float 속성 값을 상속받습니다. |
<html>
<head>
<style>
img {
float: right;
}
</style>
</head>
<body>
<p>여기에 긴 텍스트가 있습니다. 여기에 긴 텍스트가 있습니다.
여기에 긴 텍스트가 있습니다. 여기에 긴 텍스트가 있습니다.
여기에 긴 텍스트가 있습니다. 여기에 긴 텍스트가 있습니다.</p>
<img src="google.png" alt="예시 이미지">
</body>
</html>
3. position
요소의 위치를 설정할 수 있으며,
float와 비슷하게 요소의 흐름을 이용하는 속성이다.
일반적인 문서 흐름에 따라 배치한다.
📒 사용 방법
(1) static
static은 일반적인 문서 흐름에 따라 배치해준다.top,left,rigth,bottom,z-index가 적용되지 않는다.
<div style="position: static;">position은 relative이며 왼쪽에서 10px 떨어지고, 위에서 20px 내려간다.</div>
(2) relative
relative는 일반적인 문서 흐름에 따라 배치해주며, 상대를 지정하여 이를 기준으로 자신을 움직여서 배치할 수 있다.top,left,rigth,bottom을 사용하여 움직일 수 있다.- 이 속성은 양수/음수의 값을 다 사용한다.
<div style="position: relative; left: 10px; top: 20px;">position은 relative이며 왼쪽에서 10px 떨어지고, 위에서 20px 내려간다.</div>
➡️ `static`에서 위치가 달라진 것을 확인할 수 있다.
➡️ 왼쪽에서는 `10px` 만큼 오른쪽으로 이동. (음수인 경우에는 왼쪽으로 이동한다.)
➡️ 위에서는 `20px`만큼 아래로 이동. (음수인 경우에는 위로 이동한다.)(3) absolute
absolute는 일반적인 문서 흐름에서 제거하고, 가장 가까운 조상(position속성이static이 아닌 요소)을 기준으로 요소가 배치된다.- < 조건 >
1. 가장 가까운 조상 요소에 대해 상대적으로 위치해야 한다.
2. 조상 요소에 위치 지정 요소가 있어야 한다.(position속성이static이 아닌 요소) - 만약 조건에 해당하는 조상 요소가 없다면, 초기 컨테이닝 블록(
body)을 기준으로 위치를 잡는다
<div style="position: absolute; top: 50px; left: 100px;">position은 absolute 왼쪽에서 100px 떨어지고, 위에서 200px 내려간다.</div>
➡️ `body`를 기준으로 위치를 잡아서 배치됨.
➡️ 왼쪽에서는 `100px` 만큼 오른쪽으로 이동. (음수인 경우에는 왼쪽으로 이동한다.)
➡️ 위에서는 `200px`만큼 아래로 이동. (음수인 경우에는 위로 이동한다.)<!-- 부모가 있음 -->
<div style="position:relative">
<div style="position: absolute; top: 50px; left: 100px; color:red;">position은 absolute 왼쪽에서 100px 떨어지고, 위에서 200px 내려간다.</div>
</div>
<!-- 부모가 Body -->
<div style="position: absolute; top: 50px; left: 100px;">position은 absolute 왼쪽에서 100px 떨어지고, 위에서 200px 내려간다.</div>
➡️ 부모 요소에 따라 배치된 위치가 다르다는 걸 확인할 수 있다.(4) fixed
- 뷰포트에 상대적으로 위치를 지정하여 배치한다.
- 초기 컨테이닝 블록을 기준으로 상대적인 위치를 잡는다.
💫 간단 정리
relative자기 기준으로 /absoult는 부모 기준으로 /fixed는 뷰포트를 기준으로
(5) sticky
- 스크롤 위치에 따라
relative와fixed특성을 모두 가진다. - 자기 위치를 기준으로 스크롤이 내려가는 순간 특정 위치에 고정되게 해준다.
-relative특성으로 자기 위치를 기준으로 지정할 수 있다.
-fixed특성으로 특정 위치를 지정할 수 있다. - 바로 위의 부모를 기준으로 위치를 계산하기 때문에, 스크롤 하는 대상의 바로 자식이어야 한다.
4. z-index
요소의 스택 순서를 지정할 때 사용하여, 요소의 '쌓임' 순서를 지정한다.
position속성이static이 아닌 요소에만 적용된다.
스택 순서란?
여러 개의 요소가 겹치는 경우 어떤 요소가 다른 요소의 앞이나 뒤에 표시될지를 결정하는 순서를 의미한다.
(3차원 공간에서의 Z축과 동일하다.)
<div style="position: relative; z-index: 1;">This element is beneath the other one.</div>
<div style="position: relative; z-index: 2;">➡️ z-index가 2인 요소가 z-index가 1인 요소 위에 나타난다.
5. overflow
요소의 콘텐츠가 지정한 박스의 너비와 높이를 벗어났을 때 어떻게 처리할 지 결정한다.
overflow-y와overflow-x를 사용하여 높이(y), 너비(x)를 각각 설정할 수 있다.
📒 사용 방법
(1) visible
- 기본 속성으로, 콘텐츠가 박스를 벗어나도 그대로 보여준다.
<div style="width: 200px; height: 50px; overflow: visible; background: skyblue">
overflow:visible 테스트중인뎅ㅇㄹ미뢰ㅏㅇ너리;마ㅓㄴㅇ리ㅓㅇ민러ㅣㅁ어니러ㅣㅇㄴ머리;ㅓㅇㄴ미ㅓㄹ
</div>
(2) hidden
- 콘텐츠가 박스를 벗어나면, 넘치는 부분을 숨겨주어서 잘린것처럼 보이게 해준다.
<div style="width: 200px; height: 50px; overflow: hidden; background: skyblue">
overflow:hidden 테스트중인뎅ㅇㄹ미뢰ㅏㅇ너리;마ㅓㄴㅇ리ㅓㅇ민러ㅣㅁ어니러ㅣㅇㄴ머리;ㅓㅇㄴ미ㅓㄹ
</div>
(3) scroll
- 콘텐츠가 박스를 벗어나면, 넘치는 부분을 스크롤 바를 통해 볼 수 있게 해준다.
<div style="width: 200px; height: 50px; overflow: scroll; background: skyblue">
overflow:scroll 테스트중인뎅ㅇㄹ미뢰ㅏㅇ너리;마ㅓㄴㅇ리ㅓㅇ민러ㅣㅁ어니러ㅣㅇㄴ머리;ㅓㅇㄴ미ㅓㄹ
</div>
(4) auto
- 콘텐츠가 박스를 벗어날 때만 스크롤 바를 활성화 해준다. 기본적으로는
visible이 적용되어 있다.
