[CSS Study #01] CSS, 레이아웃은 관계에서 시작된다.

CSS

뼈대를 만들었으면 예쁘게 옷을 입혀주어야 합니다. 그 역할을 CSS가 합니다.

CSS를 정리하려는 큰 이유는 부모, 자식 구별의 혼동입니다.

스타일을 입힐때 width:100%를 자주 사용하는데 그렇다면 이 width는 어떤 것을 기준으로 하는가? 라는 혼동이 생깁니다.

왜냐하면 단순 부모, 자식 두어가지 밖에 없는 컴포넌트, 페이지라면 헷갈리지 않지만 리액트에서 사용할 때, stack이 여러개가 쌓이기 때문에 이에 대한 이해가 필요한 상황입니다.

최근 발생한 stacking context 관련 문제를 겪고나니까 이에대해서 더 확실히 할 필요성을 느꼈습니다.

🤔 CSS란 무엇인가?

CSS(Cascading Style Sheets)는 HTML로 만든 구조에 색깔, 크기, 위치, 애니메이션 등 시각적인 표현을 입히는 언어라고 볼 수 있습니다.

적용 방법

1. 인라인 스타일

   <p style="color: red;">Hello</p>
   

2. 내부 스타일 시트

   <style>
     p { color: red; }
   </style>
   

3. 외부 스타일 시트

   <link rel="stylesheet" href="styles.css" />
   

🧑‍🍼부모-자식 관계의 이해

HTML에서 부모-자식 관계는 태그의 중첩이 기준입니다.

📂구조 이해

<div class="parent">
  <div class="child">내용</div>
</div>

• 상속되는 스타일

  color, font-size, line-height등

• 영향을 주는 스타일

  • 부모가 position: relative ➡️ 자식의 absolute 기준이 됨
  • 부모가 display: flex ➡️ 자식은 flex item으로 자동 정렬
  • 부모가 overflow: hidden ➡️ 자식이 넘치는 부분 숨김 처리

position 속성 요약

값	설명	기준
static	기본값, 위치 지정 안 됨	X
relative	자기 자신을 기준으로 이동	자기 자신
absolute	가장 가까운 position: relative or absolute 가진 조상을 기준으로 위치 잡음	조상 요소
fixed	브라우저 창을 기준	창
sticky	스크롤 위치 따라 고정되다가 풀림	스크롤 컨텍스트

만약 그러면 position에서 부모에 position: relative;와 같이 기준이 잡혀있지 않다면?

➡️ body 또는 html이 기준이 되어버립니다.

✅Flexbox

🔎 Flexbox란?

Flexbox(Flexible Box Layout)는 한 방향으로 아이템을 정렬하는 레이아웃 시스템입니다. 기존의 float, inline-block, table 기반 레이아웃의 단점을 극복했습니다.

📌Flex의 핵심 개념

용어	의미
주축 (main axis)	요소들이 배치되는 기본 방향 (기본: 가로)
교차축 (cross axis)	주축과 수직인 축 (기본: 세로)
플렉스 컨테이너	display: flex가 적용된 부모 요소
플렉스 아이템	플렉스 컨테이너의 자식 요소들

기본 사용법

.parent {
    display: flex;
}

이렇게 설정해주면 .parent는 플렉스 컨테이너가 되고 그 안의 자식들은 자동으로 한 줄로 배치가 됩니다.

부모에 쓰이는 속성 - 플렉스 컨테이너 속성

속성	설명	예시
flex-direction	주축 방향 설정 (가로/세로)	row, row-reverse, column, column-reverse
justify-content	주축 방향으로 정렬	flex-start, center, space-between, space-around, space-evenly
align-items	교차축 정렬 방식 (한 줄일 때)	flex-start, center, stretch, baseline
flex-wrap	요소가 넘칠 때 줄 바꿈 여부	nowrap(기본), wrap, wrap-reverse
align-content	교차축 정렬 방식 (여러 줄일 때)	center, space-between 등
gap	아이템 간 간격	gap: 20px (최신 브라우저 완벽 지원)

자식에 쓰이는 속성 - 플렉스 아이템 속성

속성	설명	예시
flex-grow	공간이 남을 때 얼마나 더 커질지	flex-grow: 1
flex-shrink	공간이 부족할 때 얼마나 줄어들지	flex-shrink: 0
flex-basis	기본 크기	flex-basis: 100px
flex	위 세 개를 한 번에 설정	flex: 1 1 auto 또는 flex: 1
align-self	개별 아이템 정렬	flex-start, center