css 레이어 사용방법

CSS에서 "레이어"라는 용어는 일반적으로 다양한 요소들을 겹쳐서 화면을 구성할 때 사용됩니다. 레이어는 주로 웹 페이지 레이아웃이나 디자인에서 요소들을 조직화하고 겹치게 하는데 활용됩니다.

다음은 CSS에서 레이어를 만들거나 다룰 때 사용되는 몇 가지 주요 속성 및 개념입니다.

1. position: 레이어를 위치시키는 데 사용되는 속성 중 하나입니다. position 속성은 static, relative, absolute, fixed, sticky 등의 값을 가질 수 있습니다.
2. z-index: 레이어의 쌓임 순서를 결정하는 속성입니다. z-index 값이 큰 요소일수록 위에 쌓이게 됩니다. 음수 값도 사용할 수 있습니다.
3. display: 요소의 레이아웃 형태를 설정하는 속성 중 하나입니다. display: block;, display: inline;, display: none; 등으로 레이아웃을 지정할 수 있습니다.
4. float: 요소를 좌우 방향으로 띄우는 데 사용되며, 일반적으로 텍스트 주위에 이미지를 감싸거나 여러 요소를 나란히 배치하는 데 활용됩니다.
5. Flexbox 및 Grid Layout: 최근에는 Flexbox와 Grid Layout이라는 CSS 레이아웃 기술이 도입되어 복잡한 레이아웃을 구성하는 데 높은 유연성을 제공합니다.

반응형

아래는 간단한 CSS 코드에서 레이어를 다루는 예제입니다

.container {
  position: relative;
}

.box1 {
  position: absolute;
  top: 0;
  left: 0;
  background-color: red;
  z-index: 2;
}

.box2 {
  position: absolute;
  top: 20px;
  left: 20px;
  background-color: blue;
  z-index: 1;
}

반응형

 

이 코드에서 .container는 position: relative;로 설정되어 있고, .box1과 .box2는 position: absolute;로 설정되어 있습니다. 이렇게 함으로써 .box1과 .box2는 .container에 상대적으로 위치하게 되며, z-index 속성을 통해 쌓임 순서를 지정할 수 있습니다.