📝 CSS 정렬: text-align

오늘 학습한 내용은 웹 페이지의 레이아웃을 결정짓는 정렬(Alignment)과 특정 요소를 조준하는 선택자(Selector)의 상관관계입니다.

---

1. 정렬의 핵심: text-align은 누구에게 주는가?

가장 중요한 규칙입니다. text-align은 나 자신을 정렬하는 것이 아니라, 내 안에 있는 내용물(자식들)을 정렬하는 속성입니다.

정렬의 조건

• 부모 엘리먼트에 속성을 부여합니다.
• 텍스트 또는 inline-block 요소들이 정렬 대상이 됩니다.

---

2. 실습 코드 분석 (HTML & CSS)

📝 HTML 구조

서로 다른 부모(div, section, nav) 안에 링크(<a>)를 배치했습니다.

<div>
    <a href="http://www.naver.com" target="_blank">네이버</a>
</div>

<section>
    <a href="http://www.google.com" target="_blank">구글1</a>
    <a href="http://www.google.com" target="_blank">구글2</a>
</section>

<nav>
    <a href="https://www.youtube.com/">유튜브</a>
</nav>

🎨 CSS 스타일링

부모에게는 정렬을 명령하고, 후손 선택자를 통해 자식들에게는 개별 스타일을 부여했습니다.

/* 1. div: 오른쪽 정렬 & 내부 링크 스타일 */
div {
  text-align: right; /* 자식인 '네이버'가 오른쪽으로! */
}
div a {
  font-size: 1rem;
  color: green;
}

/* 2. nav: 가운데 정렬 & 내부 링크 스타일 */
section {
  text-align: center; /* 자식인 '구글1','구글2'가 중앙으로! */
}
section a {
  font-size: 3rem;
  color: blue;
}

/* 3. section: 개별 링크 스타일 (정렬은 기본값인 왼쪽) */
nav a {
  font-size: 5rem;
  color: red;
}

---

3. 학습 포인트 요약

📌 후손 선택자 활용

div a, nav a 처럼 작성하면 페이지 내의 모든 <a> 태그가 아닌, 특정 부모 안에 있는 링크만 골라서 스타일을 바꿀 수 있습니다.

📌 text-align의 작동 원리

• div { text-align: right; }를 하면 div라는 박스 자체가 오른쪽으로 가는 것이 아닙니다.
• div라는 바구니는 그대로 있고, 그 안에 담긴 사과(자식 요소)들만 오른쪽으로 굴러가는 것과 같습니다.

---