Chillax in dev

[WEB] CSS3으로 웹 꾸미기: 다양한 선택자(Selector) 본문

WEB

[WEB] CSS3으로 웹 꾸미기: 다양한 선택자(Selector)

Seong Story 2020. 8. 8. 23:26
728x90

[WEB] CSS3으로 웹 꾸미기: 선택자(Selector) 활용 하기

- HTML이 웹의 내용을 표연하는 마크업 언어라면 CSS(cascading style sheets)는 웹의 디자인을 담당합니다.

- CSS 태그는 <style> 태그 안에 작성합니다. width height 등과 같은 크기를 표시할 때는 (:)과 함께 반드시 px 단위를 붙여야 합니다. 즉 = 이 아니라 : 사용한다. px픽셀 단위를 꼭 붙여야 한다!

- 꾸미는 방법은 선택자를 이용하여 원하는 요소를 선택하고 { } 안에 작성해줍니다. 먼저 선택자(Selector)를 정확히 이해하고 자손, 형재, 아이디(id "#"), 클래스(class ".") 등등 을 잘 활용할 수 있어야 합니다. 다양한 방식이 있지만 자주 사용하고 신기한 방법들을 위주로 정리하고자 합니다.

 

* CSS 선택자(selector) 기본

- 특정한 HTML 태그 또는 ID 또는 CLASS를 선택할 때 사용하는 기능.
- 선택된 해당 태그에 우리가 원하는 스타일 또는 기능을 적용할 수 있습니다.

 

- 전체 선택자(*)

<style type="text/css">
     * { color: blue; }
</style>

- 속성 선택자

: 이런 식도 가능하구나 정도로 넘어가자. css 속성을 선택해 css를 적용한다. type이 지정되지 않은 input 태그는 기본값으로 적용된 "text"로 적용이 되지만 스타일 시트 적용 및 선택자 적용은 되지 않습니다.

<input type="password"/><br/>
<style type="text/css">
input[type=password]{
    background:blue;
    }
</style>

- 후손 선택자

: 특정한 태그 아래에 있는 후손을 선택할 때 사용하는 선택자.

 아래 예시들을 보며 확인합니다.

<style type="text/css">
	#header h1,#header h3{
	color:red;
	}
	#section h1{color:blue;}
	/*
    빈칸(공백)으로 선택자가 이어지면,
    바로 아래 포함되어 있는 child 선택자만 지목하게 됩니다.
    */
 #header h1, #header h3 {color:red;}
 /* ',' 로 구분하면 두개의 후손선택자를 동시 선택 가능합니다. */



</style>
<style type="text/css">
#header>h1 { background:blue;color: white; }
/* 
후손선택자 사용시
' '공백을 사용하면 지목된 선택자 안의 모든 후손선택자가 선택 되지만
'>' 를 사용하면 바로 아래 후손 선택자만 선택 됩니다 */
#header>h2 { background:orange; color:white; }
#header>#nav>h1 { background:red; color:white;}
</style>
<!DOCTYPE html>
<html lang="en">
<head>
 <!--  /*tbody는 항상 table 사이에 있어야해 html5새로생긴규칙~ tr*/-->
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        table>tbody>tr>th{color:red;}
    </style>
</head>
<body>
    <table border="1">
        <tr>
            <th>이름</th>
            <th>주소</th>
        </tr>
        <tr>
            <td>권성민</td>
            <td>서울시</td>
        </tr>
        <tr>
            <td>이순신</td>
            <td>강원도 </td>
        </tr>
    </table>    
</body>
</html>

- 인접 선택자(+), 형제 선택자(~)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    /*  인접(adjacent) 선택자 - h1 태그의 바로 뒤에 위치하는 h2 태그의 color 속성에 red 키워드를 적용한다.  */
    h1 + h2 {color:red;}
    /* 형제(sibling) 선택자 - h1 태그의 뒤에 위치하는 h3 태그의 color 속성에 green 키워드를 적용한다. */
    h1 ~ h3 { color:green; }
       
    </style>
</head>
<body>
<h1>Header - 1</h1>
<h2>Header - 2</h2>
<h2>Header - 2</h2>
<h3>Header - 3</h3>
<h2>Header - 2</h2>
<h3>Header - 3</h3>          
</body>
</html>

- 클래스 선택자 , 아이디 선택자.


:특정한 클래스를 가지고 있는 태그를 선택할 때 사용하는 선택자.
-> 웹페이지를 개발할 때 많이 사용되는 선택자.
-> 특히 주로 여러 개의 클래스 선택자 사용하여 같은 css 줄 때 사용
->class속성은 공백으로 구분해서 여러 클래스를 사용할 수 있다.
-> id속성(유일하게 사용하는 것이 관례)은 웹페이지 내부에서 중복되지 않으므로 상관없지만 class 속성은 중복될 수 있습니다.
->class속성은 서로 다른 태그에 적용된다면 태그 선택자와 클래스 선택자를 함께 사용해 더 정확하게 태그를 선택할 수 있습니다.
-> id: # , class:.으로 접근한다.

 

- 상태 선택자


: 입력 양식의 상태를 선택할 때 사용하는 선택자.

 

- 종류
    . : enabled
    . : disabled
    . : focus
    . : checked

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        input:enabled{background: yellow;}
        input:disabled{background: red;}
        input:focus{background: white;}
        
    </style>
</head>
<body>
    <h2>Enabled</h2>
    <input type="text"/>
<!--    클릭후 입력가능-->
   
    <h2>Disabled</h2>
    <input type="text" disabled/>
<!--    아이에 클릭도 안됨..-->
   
   
    
</body>
</html>
728x90
LIST
저작자표시 동일조건

'WEB' 카테고리의 다른 글

[WEB]CSS: 페이지 꾸미는 팁 shadow - 음영 효과 주는 방법  (0) 2020.08.10
[WEB]CSS: 페이지 꾸미는 팁 (colorzilla), gradient(그라데이션) 사용법  (0) 2020.08.10
[WEB]CSS: 기초 font, position, display 속성 등등  (0) 2020.08.09
[WEB]CSS: Hover 반응선택자 사용방법  (0) 2020.08.08
[WEB] HTML5 태그들 정리  (0) 2020.08.08
'WEB' Related Articles more
Comments