CSS 관련 핵심 개념

여백 개념

속성설명

 

속성	설명
margin	요소 외부 여백 (다른 요소와 거리 조정)
padding	요소 내부 여백 (콘텐츠와 테두리 사이 공간)

• margin: auto; → 좌우 중앙 정렬
• 상하 margin은 겹칠 수 있음 (margin collapse)

 

요소 유형

구분	대표 태그	특징
블록 요소	div, p, h1 등	가로 전체 차지, 줄바꿈 발생
인라인 요소	span, a, img 등	내용만큼만 공간 차지

 

 CSS 선택자 우선순위

• inline style > id > class > 태그 > * (전체)
• 다양한 선택자:
  • #id, .class, tag
  • 자식 선택자: div > p
  • 후손 선택자: div p
  • 그룹 선택자: h1, h2, h3
  • 속성 선택자: [type="text"]

 

위치 지정 (Position)

속성	설명
static	기본 위치 (기준 없음)
relative	본래 위치 기준 이동
absolute	가장 가까운 relative 부모 기준 위치 결정
fixed	브라우저 화면 고정 위치
sticky	스크롤 시 특정 위치에 고정

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 10px;
  left: 20px;
}

 

 

 

float & clear

• float: 요소를 좌/우 정렬
• clear: float 해제

 

.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

 

 

CSS 스타일 우선 적용 순서

 

적용 방식	우선 순위
Inline 스타일 (style="")	가장 높음
Internal 스타일 (<style> 태그 내)	중간
External 스타일 (.css 파일)	가장 낮음