🎨 Web_Front end/HTML & CSS3

CSS 스타일 속성 기본

개발진스 2023. 4. 5. 16:07
728x90

1. CSS 선택자

 

1) HTML 선택자

 

특정한 HTML태그를 선택해서 직접 적용한다.

 

<head>
    <title>CSS3 Selector Basic Page</title>
    <style>
        /* h1 태그의 color 속성에 red 키워드를 적용합니다. */
        h1 { color: red; }
        
        /* p 태그의 color 속성에 blue 키워드를 적용합니다. */
        p  { color: blue; }
    </style>
</head>

<body>
    <h1>여기가 레드</h1>
    <p>여기가 블루</p>
</body>
 

2) 전체 선택자

 

HTML 페이지 내부의 모든 태그를 선택한다.

 

<head>
    <title>CSS3 Selector Basic Page</title>
    <style>
        * { color: red; }
    </style>
</head>

<body>
    <h1>h1도 레드</h1>
    <p>p태그도 레드</p>
</body>

 

3) ID 선택자

 

CSS를 적용할 대상으로 특정 요소를 선택할 때 사용한다. 이때 #을 써서 구분해 준다.

 

<head>
    <title>CSS3 Selector Basic Page</title>
    <style>
        /* id 속성으로 rint를 가지는 태그의
            color 속성을 red 키워드로 적용합니다. */
        #rint { color: red; }
    </style>
</head>
<body>
    <h1 id="rint">CSS3 Selector Basic</h1>
    <h2 id="rint">CSS3 Selector Basic</h2>
    <h3 id="rint">CSS3 Selector Basic</h3>
</body>

 

 

4) CLASS 선택자

 

특정한 클래스의 여러 요소를 한 번에 선택할 때 사용한다. 이때 .을 써서 구분해 준다.

 

<head>
    <title>CSS3 Selector Basic</title>
    <style>
        .item { color: red; }
        .header { background-color: blue; }
    </style>
</head>

<body>
    <h1 class="item header">Lorem ipsum</h1>
</body>

 

 

 

2. 속성 선택 문법 기호

 

속성 선택자는 특성한 속성을 가진 태그를 선택할 때 사용한다

 

기본 속성 선택자 : 특정한 속성의 존재 유무와 속성 값을 판별할 때 사용

 

1) 선택자[속성~=값] : 속성을 포함 하며 value를 포함하는 문서객체를 선택

2) 선택자[속성^=VALUE] : 속성을 포함하며 속성 값이 value로 시작하는 요소 선택

3) 선택자[속성$=값] : 속성을 포함하며 속성 값이 value로 끝나는 요소 선택

4) 선택자[속성*=값] : 속성을 포함하여 속성 값이 정확히 value이거나 value를 포함해 가 포함되는 요소 선택

 

 

 

3. 결합 선택자

 

요소간의 계층 관계를 결합하여 특정 요소나 하위 요소를 선택한다.

 

1) 후손 선택자

 

선택자A 선택자B : 선택자A의 후손에 위치하는 선택자B를 선택

id 속성으로 header를 가지는 태그의 후손 위치에 있는 h1태그의 color속성을 red로 적용

#header h1 { color: red; }

 

2) 자손 선택자

 

선택자A > 선택자B : 선택자A의 자손에 위치하는 선택자B를 선택

#header > h1 { color: red; }

 

 

 

4. 동위 선택자

 

동위 선택자는 동위 관계에서 뒤에 위치한 태그를 선택할 때 사용하는 선택자

 

1) 선택자A + 선택자B : 선택자A 바로 뒤에 위치하는 선택자B를 선택

#A+B{
  margin: 0 auto;
  width: 1080px;
}

 

 

2) 선택자A ~ 선택자B : 선택자A 뒤에 위치하는 선택자B를 선택

#A~B{
  margin: 0 auto;
  width: 1080px;
}

 

 

선택자 우선 순위
!important > 인라인 스타일 > 아이디 선택자 > 클래스/속성/가상 선택자 > 태그 선택자 > 전체 선택자

 

 


참고자료 : 모던웹을위한 HTML5 + CSS3 입문 

728x90