elex/css-examples

Fork 0

Files

Elex e7ee682f16 2025-01-30T01:41:18

2025-01-30 01:41:18 +09:00

3.9 KiB

Raw Blame History

레이아웃

display

요소가 어떻게 배치되는지를 결정

block : 블록 요소 (새 줄에서 시작)
inline : 인라인 요소 (한 줄 안에 배치)
inline-block : 인라인처럼 배치되지만 크기 조절 가능
none : 요소를 숨김
flex : 플렉스 박스 활성화
grid : 그리드 시스템 활성화

.box {
  display: flex;
}

position

요소를 정확한 위치에 배치할 때 사용

static : 기본값 (HTML 흐름을 따름)
relative : 원래 위치 기준으로 이동
absolute : 부모 요소 기준으로 절대 위치
fixed : 뷰포트 기준으로 고정
sticky : 스크롤 시 특정 위치에서 고정

absolute는 가까운 position: relative 부모 요소 기준으로 배치됨

.box {
  position: absolute;
  top: 50px;
  left: 100px;
}

top, right, bottom, left

top : 요소를 위에서 아래로 이동
right : 요소를 오른쪽에서 왼쪽으로 이동
bottom : 요소를 아래에서 위로 이동
left : 요소를 왼쪽에서 오른쪽으로 이동

이 속성들은 요소의 position 값이 relative, absolute, fixed, sticky일 때만 동작해!
static일 때는 적용되지 않음!

relative에서의 사용

요소가 원래 위치를 기준으로 이동

.box {
    position: relative;
    top: 20px;   /* 원래 위치보다 20px 아래로 이동 */
    left: 10px;  /* 원래 위치보다 10px 오른쪽으로 이동 */
}

absolute에서의 사용

가장 가까운 position: relative를 가진 부모 요소를 기준으로 이동
부모가 없으면 **뷰포트(브라우저 화면)**를 기준으로 배치됨

.parent {
  position: relative;
}

.box {
  position: absolute;
  top: 50px;
  right: 20px;
}
/* .box는 .parent 기준으로 위에서 50px, 오른쪽에서 20px 떨어진 위치에 배치됨 */

fixed에서의 사용

**브라우저 화면(뷰포트)**을 기준으로 고정

.box {
  position: fixed;
  bottom: 10px;
  right: 10px;
}
/* 화면의 오른쪽 하단에 고정됨 (스크롤해도 움직이지 않음) */

sticky에서의 사용

스크롤에 따라 움직이다가 특정 위치에 고정됨

.box {
  position: sticky;
  top: 0;
}
/* .box는 스크롤되다가 top: 0 위치에 도달하면 고정됨 */

z-index

요소의 쌓이는 순서를 결정 (값이 클수록 위에 위치)

.box {
  position: absolute;
  z-index: 10;
}

float

요소를 왼쪽 또는 오른쪽으로 띄움. 주로 이미지나 텍스트 레이아웃에서 사용.

img {
  float: right;
  margin: 10px;
}

float을 사용하면 요소가 부모 요소를 빠져나올 수 있기 때문에, clear: both;를 이용해 레이아웃을 정리해야 함

clear

clear 속성은 float된 요소 옆에 다른 요소가 배치되는 것을 막아줌. float 속성을 사용할 때, 레이아웃이 깨지는 걸 방지하는 용도로 사용됨.

none : 기본값 (제거 없음)
left : 왼쪽의 float을 해제
right : 오른쪽의 float을 해제
both : 양쪽 모두 해제

overflow

콘텐츠가 부모 요소보다 커질 때 어떻게 처리할지 결정하는 속성!

visible : (기본값) 넘치는 콘텐츠를 그대로 표시
hidden : 넘치는 부분을 숨김
scroll : 스크롤바 생성 (항상 표시됨)
auto : 넘칠 때만 스크롤바 생성

.box {
  width: 100px;
  height: 50px;
  overflow: hidden;
} /* 넘치는 부분이 잘려서 보이지 않음 */

visibility

visibility 속성은 요소를 보이거나 숨길 때 사용되며, display: none;과의 차이가 있음!

visible : 기본값 (요소가 보임)
hidden : 요소가 보이지 않지만 공간은 유지
collapse : table-row, table-column을 숨길 때 사용

visibility: hidden; : 요소가 보이지 않지만 공간은 그대로 유지

display: none; : 요소가 완전히 제거됨 (공간도 사라짐)

3.9 KiB Raw Blame History