HTML&&CSS

CSS-문서구조 관련 선택자

꽃달린감나무 2022. 7. 16. 15:41
728x90
  • 문서 구조 관련 선택자
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <h1><span>HTML</span> : Hyper Text Markup Language</h1><br>
        <span>CSS는 문서를 꾸며줍니다.</span>
    </div>
    <span>JavaScript는 문서를 동적으로 제어할 수 있습니다.</span>
    <p>HTML과 CSS와 JAVASCRIPT를 이용해서 멋진 웹 사이트를 제작할 수 있습니다</p>
</body>
</html>

 

문서 요소 구조

 

  • 부모 - 자식 관계
    • 부모 요소는 그 요소를 포함하는 가장 가까운 상위 요소로, 그 요소의 부모 요소는 하나
    • 자식 요소는 상위 요소에 포함되어 있는 가장 가까운 하위 요소로 여러 개일 수 도 있습니다.
      • <body>의 부모 요소: <html> ↔ <html>의 자식 요소: <body>
      • <div>의 부모 요소: <body> ↔ <body>의 자식 요소: <div>, <p>
      • <h1>의 부모 요소: <div> ↔ <div>의 자식 요소: <h1>
      • <span>의 부모 요소: <h1> ↔ <h1>의 자식 요소: <span> 
      • <p>의 부모 요소: <body> ↔ <body>의 자식 요소: <div>, <p>

 

  • 조상과 자손
    • 부모와 자식의 관계를 포함한 확장관계
    • 조상 요소는 그 요스를 포함하는 모든 요소로, 부모요소를 포함핳여 여러 개일 수도 있다.
    • 자손 요소는 그 반대로, 그 요소가 포함하고 있는 모든 요소가 자손요소
      • <body>의 조상 요소: <html> ↔ <html>의 자손 요소: <body>, <div>, <h1>, <span>, <p>
      • <div>의 조상 요소: <html>, <body> ↔ <body>의 자손 요소: <div>, <h1>, <span>, <p>
      • <h1>의 조상 요소: <html>, <body>, <div> ↔ <div>의 자손 요소: <h1>, <span>
      • <span>의 조상 요소: <html>, <body>, <div>, <h1> ↔ <h1>의 자손 요소: <span>
      • <p>의 조상 요소: <html>, <body> ↔ <body>의 자손 요소: <div>, <h1>, <span>, <p>

 

 

  • 형제
    • 같은 부모를 가지고 있는 요소들로 서로 형제관계가 있다
    • 사진에서 <body> 아래에 있는 <div>, <p>, <span> 서로 형제 요소

 

  • 자손 선택자
div span { color: red; }

선택자 사이를 공백으로 구분합니다.

<div>의 자손 요소인 <span>를 선택하는 선택자 입니다.

 

  • 자식 선택자
div > h1 { color: red; }

선택자 사이에 닫는 꺽쇠 기호(>)로 구분합니다.

꺽쇠 기호와 선택자 기호 사이에는 공백은 있거나 없어도 상관 없습니다.

이 선택자는 <div>의 자식 요소인 <h1>를 선택하는 선택자 입니다.

 

  • 인접 형제 선택자
div + p { color: red; }

선택자 사이에 + 기호로 구분합니다.

자식 선택자와 마찬가지로 공백은 있거나 없어도 상관이 없습니다.

인접 형제 선택자는 형제 관계이면서 바로 뒤에 인접해 있는 요소를 선택하는 선택자입니다.

 

 

 

  • 코드
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body span {color : red;} //자손 선택자
        div > h1 {color : blue;}//자식 선택자
    </style>

</head>
<body>
    <div>
        <h1><span>HTML</span> : Hyper Text Markup Language</h1><br>
        <span>CSS는 문서를 꾸며줍니다.</span>
    </div>
    <span>JavaScript는 문서를 동적으로 제어할 수 있습니다.</span>
    <p>HTML과 CSS와 JAVASCRIPT를 이용해서 멋진 웹 사이트를 제작할 수 있습니다</p>
</body>
</html>

 

 

  • 결과
Document

HTML : Hyper Text Markup Language


CSS는 문서를 꾸며줍니다.
JavaScript는 문서를 동적으로 제어할 수 있습니다.

HTML과 CSS와 JAVASCRIPT를 이용해서 멋진 웹 사이트를 제작할 수 있습니다

728x90