html 부모자식관계

HTML 요소들의 관계는 나란히 놓이는 형제 관계, 그리고 감싸고 감싸이는 부모-자식 관계가 있습니다.
모든 웹페이지 레이아웃은 이 두 관계의 조합으로 만들어지고, CSS 선택자도 이 관계를 기준으로 동작합니다. 예제로 하나씩 확인해 봅니다.

형제 관계 - 나란히 쌓이는 구조

요소 밑에 다른 요소가 있는 구조입니다.
같은 라인에 작성된 병렬 형태로, 요소 간에 독립적입니다.
블록 요소의 경우 위에서 아래로 쌓입니다.

<article></article>
<div></div>

article {
    width: 200px;
    height: 200px;
    background: linen;
}
div {
    width: 100px;
    height: 100px;
    background: coral;
}

브라우저에서 확인하면 article 아래에 div가 배치됩니다. 위에서 아래로 쌓이는 구조입니다. 서로 형제이기 때문에 한쪽의 크기나 스타일이 다른 쪽에 영향을 주지 않습니다.

연습해 보세요. section, div, article, figure, p를 형제로 나열하고 각각 다른 크기와 배경색(indianred, orange, gold, green, navy)을 주면, 블록 요소가 계단처럼 차곡차곡 쌓이는 모습을 눈으로 확인할 수 있습니다.

부모-자식 관계 - 감싸는 구조

열림태그와 닫음태그 사이에 다른 요소가 존재하는 구조입니다.
부모는 자식을 감싸고, 자식이 부모 안에 포함되는 트리(tree) 형태를 가집니다.
자식 요소는 기본적으로 부모 요소 안에 배치됩니다.

<article>
    <div></div>
</article>

CSS는 형제 관계 예제와 완전히 같지만, 결과는 다릅니다. 이번엔 div가 article 안쪽에 배치됩니다. HTML 구조만 바꿨는데 화면 배치가 달라진 것입니다. 같은 CSS라도 HTML의 관계에 따라 결과가 달라진다는 것, 이게 레이아웃의 출발점입니다.

연습해 보세요. section > div > article > figure > p 순서로 중첩하면, 러시아 인형처럼 상자 안에 상자가 겹쳐 들어간 모습이 됩니다. 형제 관계 연습과 코드는 거의 같고 배치만 바꾼 것이니 두 결과를 나란히 비교해 보세요.

CSS 자손 선택자 - 공백으로 범위 좁히기

앞서 쓴 article {} 은 태그 선택자입니다. 태그 선택자는 특정 HTML 요소를 기준으로 스타일을 적용하는 방식입니다. 그런데 태그 선택자는 페이지의 모든 article을 선택합니다. "article 안에 있는 p만" 선택하고 싶다면 자손 선택자를 씁니다.

자손 선택자는 부모 요소(조상 요소)에 포함된 자식 요소(자손 요소)만을 선택하는 선택자입니다.
자손 선택자는 공백을 사용해서 부모-자식 관계를 나타냅니다.

<article>
    <p>
        이 p는 article 안에 있습니다.
    </p>
</article>

p {
    background: gold;
}
article p {
    color: green;
}

p는 페이지의 모든 p에 금색 배경을 주고, article p는 article의 자손인 p에만 초록 글씨를 줍니다. 결과적으로 이 p는 두 스타일을 모두 받습니다. p 요소는 <p>이면서 <article>의 자손 <p>이기도 하기 때문입니다.

p 위에서 우클릭 → 검사로 개발자도구를 열고 Styles 탭을 보면, 하나의 요소에 두 선택자의 스타일이 동시에 적용된 것을 직접 확인할 수 있습니다. 어떤 선택자가 어떤 속성을 주고 있는지 추적하는 이 습관이 나중에 "스타일이 왜 안 먹지?"를 해결하는 기본기가 됩니다.

참고로 공백 대신 >를 쓰면(article > p) 자손 전체가 아니라 바로 아래 자식만 선택하는 자식 선택자가 됩니다. 지금은 공백을 쓰는 자손 선택자만 확실히 익혀도 충분합니다.

직접 연습하기

영상을 통해 형제 관계와 부모-자식 관계, 두 버전을 직접 만들어 비교해 보세요. 같은 요소, 같은 CSS로 배치 구조만 바꿔보면 개념이 몸에 남습니다. 마지막으로 자손 선택자로 특정 부모 안의 요소만 색을 바꿔보고, 개발자도구 Styles 탭에서 적용된 선택자를 확인해 보세요.

#HTML구조 #부모자식관계 #CSS선택자 #자손선택자 #하위선택자 #태그선택자 #형제요소 #웹퍼블리싱 #HTML기초 #CSS기초 #프론트엔드 #코딩독학