[Day48] 화면 구조/CSS

절주온 : 관공서 사이트

1. html의 구조는 컨텐츠의 중요도 순으로 구조화: h1 → h2 → h3 (시멘틱 구조)
2. h1은 보통 로고 자리
   • 시멘틱 유지 위해 h1은 크기 조절 X, 자식인 a에 display: block과 width를 적용
3. ul과 li는 함께 사용하지만, React에서는 컴포넌트 분리로 인해 ul의 존재가 보장되지 않음 → 그래서 div를 사용하기도 함

✅ 레이아웃 제어

/* 사이즈가 유동적일 때는 자식 요소를 늘리는 것이 좋음 */

/* .hd h1 {
  width: 100px;
} */

.hd h1 > a {
  display: block;
  width: 100px;
}

1. 시맨틱 구조(HTML의 의미)를 깨고 싶지 않다면, h1은 제목 역할만 담당
2. 크기 조절은 자식인 a 태그에 맡기기
3. a는 인라인 요소이므로 width, height를 주려면 display: block으로 바꿔야 적용됨

💡 레이아웃 조정은 자식 요소에서!
→ 부모 요소는 의미만 담고, 스타일 조정은 자식에게

✅ 이미지

• .jpg: 압축률이 좋음
• .png: 투명 배경 가능 + 퀄리티 좋음
• .svg: 코드 기반 벡터 이미지로 해상도 무관

<a href="/"><img src="./img/logo.svg" alt="로고"></a>

⭐️ 접근성 + SEO를 위해 alt는 필수!

✅ 시맨틱 태그

HTML의 구조적 의미를 나타내는 태그 (읽는 사람, 기계 모두 이해 쉽게)

<header>상단</header>
<main>컨텐츠</main>
<footer>하단</footer>

✅ CSS 선택자 (하위, 자식 선택자)

class를 너무 많이 만들면 지저분 -> 공통된 스타일은 상속시키고, 변경되는 부분만 개별 코드 작성하기

.parents p   /* 모든 하위 요소(p 포함 자식, 손주 등) */
.parents > p /* 바로 아래 자식만 */

✅ REM, EM

단위	기준
rem	HTML 루트(root) 기준
em	부모 요소 기준

• 반응형 디자인에서는 rem이 더 예측 가능
• 이미지 비율 유지됨 → width 또는 height 중 하나만 지정해도 OK

✅ 공통 스타일 클래스 설계

필요한 곳에 class로 넣어주면 됨.

.mw {
  max-width: 1200px;          
  width: calc(100% - 4rem); /* 좌우 마진 확보 (calc로 반응형 대응) */
  margin: auto;
}

✅ 텍스트 넘침 처리

text-overflow: ellipsis;  /* ... 말줄임 효과*/
word-break: break-all; /* 단어가 끊기면서 줄바꿈 */

✅ 가상 요소

main h2::before{
	content: "";
	display: block;
	border: 1px solid red;
	position: absolute;
	bottom: -5%;
	width: 60%;
	padding-top: 30%;
	background-image: url("../img/campaign_character.png");
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
}

• ::before, ::after는 실제 HTML에는 없지만 CSS로 추가하는 방법
• content는 반드시 써야 가상 요소가 만들어짐 (content: “”; 처럼 빈 문자열이라도 필요)
• ::before: 요소 내용(content) 앞에 가상 요소 추가
• ::after: 요소 내용(content) 뒤에 가상 요소 추가

✅ 반응형 미디어 쿼리

@media (max-width: 1100px) {
  main {
    grid-template-columns: repeat(2, calc(50% - 0.5rem)); // 2열로 전환
  }
  main h2 {
    grid-column: 1 / 3;
    height: 300px;
  }
}

---

👉 Grid vs Flex

| Grid는 2차원(행+열) 배치가 필요할 때! | Flex는 1차원(가로 or 세로) 줄세우기가 필요할 때!

Grid

3단에 2개의 행

display: grid;
grid-template-columns: repeat(3, 1fr);  /* 3등분한 3단 */
grid-template-rows: repeat(2, auto);    /* 2행, 콘텐츠 높이 자동 */

• grid-template-columns: repeat(3, 1fr); → 3단인데 1대1대1로
• grid-template-rows: repeat(2, auto); → 콘텐츠 크기에 맞게 2행
• grid-column: 2/3; 열의 2번~3번 사이 위치
• grid-row: 1/3; 행의 1번~3번 사이, 즉 2칸 차지

grid-template-columns: repeat(3, calc(100% / 3 - 0.5rem));

• 열(Column)을 3개 생성
• 각 열은 전체 너비의 ⅓에서 0.5rem을 뺀 크기로 설정

항목	Flex (플렉스)	Grid (그리드)
방향	1D (한 방향: 가로 또는 세로)	2D (2차원 배치)
주 용도	아이템 정렬, 줄 세우기	전체 페이지 구성, 영역 배치
레이아웃 구조	흐름 기반 (flex-flow)	틀 기반 (명확한 row/column 구조)
코드 작성	가볍고 직관적	조금 더 구조적이고 복잡할 수 있음

언제 Flex? Grid?

• 가로 or 세로 한 줄에 정렬할 때 -> Flex
• 정렬 순서를 바꿔야할 때 -> Flex(order)
• 정사각형/카드형 반복 배치 -> Grid
• 행, 열을 명확하게 나누고 싶을 때 -> Grid
• 전체 페이지 or 대형 레이아웃 -> grid

flex

화면이 작아지면 Flex로 정렬하고, 순서도 바꿀 수 있음

@media (max-width: 600px) {
	main {
		display: flex;
		flex-direction: column;
		gap: 0.5rem;
	}
	.notice {
		order: 4;
	}
	.icon {
		order: 5;
	}
}

---

👉 transform vs position

브라우저의 렌더링 과정은?

1. Layout (Reflow)
   → 요소들의 위치와 크기를 계산함
2. Paint
   → 계산된 위치에 색상, 텍스트, 이미지 등 실제로 그리기
3. Composite (합성)
   → 레이어를 합쳐서 최종 화면에 보여줌
   —

✅ position: relative

• 요소를 기준 위치에서 이동시킴
  • 부모 기준으로 top, left…등등 z-index등을 사용
• 위치 이동 시, 브라우저는 layout → paint → composite 전 과정을 다시 함
• 즉, 주변 요소들도 재배치할 수 있어 성능에 부담이 감

✅ transform: translateY()

• 요소의 형태, 위치만 변경
• 기존 layout에는 영향을 주지 않음
• 브라우저는 composition 단계만 다시 함

🔧 사용 예시 비교

상대 위치 지정만 할 때 (기준 잡기)

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 0;
  left: 0;
}

→ 레이아웃 기준이 필요할 땐 position 사용이 맞음

애니메이션이나 단순 이동만 할 때

.box {
  transform: translateX(100px);
  transition: transform 0.3s ease-in-out;
}

→ 레이아웃 유지하면서 부드럽게 움직이고 싶을 때 transform 추천

💡 반복해서 자주 변경되는 동작 (예: 슬라이드, 드롭다운 메뉴)은 transform이 성능상 훨씬 유리!

---

END