몰랐던 css 속성들 정리

속성명 대상 설명 대표값 예시

속성명	대상	설명	대표값 예시
text-align	텍스트/인라인요소	텍스트 가로 정렬	left, right, center, justify
vertical-align	인라인요소	텍스트/요소 세로 정렬	baseline, middle, top, bottom
justify-content	Flex/Grid 컨테이너	아이템 주축 정렬	flex-start, center, space-between
align-items	Flex/Grid 컨테이너	아이템 교차축 정렬	flex-start, center, stretch
align-self	Flex 아이템	특정 아이템 교차축 정렬	flex-start, center
float	블록/인라인요소	요소 좌우 띄움	left, right
clear	요소	플로팅 해제	left, right, both

 

• item: 부모 안에 들어있는 ‘각각의 요소’
• 그리드(Grid): 행과 열로 나누어 배치하는 2차원 레이아웃 시스템
• flexbox 는 한 방향 정렬, 그리드는 2차원 배치에 좋음

---

 

Header가 Sidebar에 가려져서 안보일때 크기맞춰주는 css

margin-left: 250px;
width: calc(100% - 250px);

margin-left: 250px 
→ 왼쪽에 있는 고정된 사이드바의 너비만큼 공간을 비워줌
→ 겹치지 않도록 여백을 확보

 

width: calc(100% - 250px)
→ 전체 화면 너비(100%)에서 사이드바 너비만큼 뺀 너비만큼 콘텐츠가 채워지게 함

 

|<-- 250px -->|<----------- 나머지 공간 (100% - 250px) ------------>|
|  Sidebar    |                    Header / Main Content           |

 

즉 넓이 100% 에서 사이드바 넓이만큼 빼주기