본문 바로가기
HTML

[CSS] CSS3 기초 : 선택자와 단위

횲 2021. 10. 10. 20:12
728x90

01 선택자의 용도와 사용법

  • CSS 개요

- 선택자 : CSS3에서 특정 HTML 태그를 선택할 때 사용

- 스타일시트 : CSS로 작성된 코드

 - <style> .. </style>

 

  • 기본 선택자
전체 선택자 * HTML 페이지 내부의 태그를 모두 선택
태그 선택자 태그 HTML 페이지 내부의 특정 태그를 모두 선택
아이디 선택자 #아이디 특정 id 속성이 있는 태그 선택, 웹 표준에 id 속성은 웹 페이지 내부에서 중복되면 안 된다는 규정이 있으므로 아이디 선택자는 특정 태그 하나를 선택할 때 사용
클래스 선택자 .클래스 특정 클래스가 있는 태그 선택

 

  • 전체 선택자와 태그 선택자

1. 전체 선택자 사용하기

<head>
    <title>전체 선택자</title>
    <style>
        *{
            color: green;
        }
    </style>
</head>
<body>
    <h1>제목 글자 태그</h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium dolore non saepe quod ipsum rem explicabo ipsam corrupti, quae optio sed esse fugiat beatae. Amet minus provident iste error repudiandae.</p>
</body>
</html>

{} 안의 내용을 전체에 적용

 

2. 태그 선택자 적용하기

<head>
    <title>전체 선택자</title>
    <style>
        h1 {
            color: red;
        }
        p{
            color: yellow;
        }
    </style>
</head>
<body>
    <h1>제목 글자 태그</h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium dolore non saepe quod ipsum rem explicabo ipsam corrupti, quae optio sed esse fugiat beatae. Amet minus provident iste error repudiandae.</p>

    <h1>태그 선택자</h1>
    <p>태그 선택자는 해당 태그에 적용하는 css이다.</p>
</body>

 

- 선택자 여러 개에 속성 적용하기 : 쉼표 적용

margin, padding은 여백과 관련된 것

 

  • 아이디 선택자
<head>
    <title>아이디 선택자</title>
    <style>
        #header {
            width: 800px; margin: 0 auto;
            background: hotpink;
        }
        #wrap{
            width: 800px; margin: 0 auto;
            overflow: hidden;
        }
        #aside{
            width: 200px; float: left;
            background: purple;
        }
        #content{
            width: 600px; float: left;
            background: royalblue;
        }
    </style>
</head>
<body>
    <div id="header">
        <h1>#header 태그</h1>
    </div>
    <div id="wrap">
        <div id="aside">
            <h1>#aside 태그</h1>
        </div>
        <div id="content">
            <h1>#content 태그</h1>
        </div>
    </div>
</body>
</html>

margin은 가운데 정렬해준다.

overflow = hidden으로 두어서 div태그이지만 옆에 붙게 됨

 

  • 클래스 선택자

1. 클래스 선택자를 1개 사용하기

<head>
    <title>클래스 선택자</title>
    <style>
        .c{color: salmon;}
        .bg{background: khaki;}
        h1.c{color: lawngreen;}
    </style>
</head>
<body>
    <!--아이디는 중복 X, 클래스는 중복 가능-->
    
    <h1 class="c">제목 글자</h1>
    
    <ul>
        <li class="c bg">사과</li>
        <li>바나나</li>
        <li class="c">자몽</li>
        <li>골드키위</li>
    </ul>
</body>
</html>

.c{}를 하면 h1태그인 '제목글자'도 같은 색으로 바뀐다

특정 태그의 클래스만 스타일을 바꾸고 싶으면 h1.c{}라고 지정해주면 된다

 

03 속성 선택자

선택자[속성] 특정한 속성이 있는 태그 선택
선택자[속성=값] 특정한 속성 내부 값이 특정 값과 같은 태그 선택 
<head>
    <title>속성 선택자</title>
    <style>
        input[type="text"] {background: brown;}
        input[type="password"] {background: cadetblue;}
    </style>
</head>
<body>
    <form action="">
        <input type="text">
        <input type="password">
    </form>
</body>

 

 

04 후손 선택자와 자손 선택자

 

  • 후손 선택자
선택자A 선택자B 선택자A의 후손인 선택자B 선택

 

<head
    <title>후손 선택자</title>
    <style>
        #header h1{
            color: chocolate;
        }

        #section h1{
            color: cornflowerblue;
        }
    </style>
</head>
<body>
    <div id="header">
        <h1 class="title">Lorem ipsum</h1>
        <div id="nav">
            <h1>Navigation</h1>
        </div>
    </div>

    <div id="section">
        <h1 class="title">Lorem ipusum</h1>
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Atque placeat, quibusdam eius repellat natus ratione dolore numquam cupiditate corporis facilis. Ex non commodi inventore sunt ea nemo expedita delectus magni.</p>
        <h1>article</h1>
    </div>
    </body>

 

 

  • 후손 선택자 여러 개를 함께 사용할 경우 주의 사항

1. <header> 태그의 후손인 <h1>태그와 일반적인 <h2> 태그 선택

<style>
	#header h1, h2{ color:  red;}
</style>

 

2. <header> 태그의 후손인 <h1> 태그와 header 태그의 후손인 <h2> 태그 선택

<style>
	#header h1, #header h2{ color:  red;}
</style>

 

  • 자손 선택자
선택자A > 선택자B 선택자A의 자손인 선택자B 선택

 

<head>
    <title>자손 선택자</title>
    <style>
        #header > h1{
            color: chocolate;
        }

        #section > h1{
            color: cornflowerblue;
        }
    </style>
</head>
<body>
    <div id="header">
        <h1 class="title">Lorem ipsum</h1>
        <div id="nav">
            <h1>Navigation</h1>
        </div>
    </div>

    <div id="section">
        <h1 class="title">Lorem ipusum</h1>
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Atque placeat, quibusdam eius repellat natus ratione dolore numquam cupiditate corporis facilis. Ex non commodi inventore sunt ea nemo expedita delectus magni.</p>
        <h1>article</h1>
    </div>
</body>

 

후손인 h1 태그인 Navigation은 section의 자식이 아니기 때문에 style이 적용되지 않았다

 

  • <table> 태그 요소 선택할 때 자손 선택자 주의사항
<head>
    <title>테이블의 자손 선택자</title>
    <style>
        table > tbody > tr > th{color: darkblue;}
    </style>
</head>
<body>
    <table border="1">
        <tr>
            <th>이름</th>
            <th>지역</th>
        </tr>

        <tr>
            <td>윤인성</td>
            <td>서울특별시 강서구</td>
        </tr>
    </table>
</body>
</html>

 

style 태그에 table > tr > th라고 하면 적용이 되지 않는다. 웹 페이지에서 table 다음 tbody라는 태그가 더 추가되기 때문이다.

따라서 table > tbody > tr > th라고 적어야만 style이 적용이 된다.

혹은 th라고만 적어야한다.

 

 

05 반응, 상태, 구조 선택자

  • 반응 선택자
:active 사용자가 마우스를 클릭한 태그 선택
- 클릭했을 때 반응
:hover 사용자가 마우스 커서를 올린 태그 선택
- 마우스를 올렸을 때

 

<head>
    <title>반응 선택자</title>
    <style>
        h1:hover{color: red;}
        h1:active{color: saddlebrown;}
    </style>
</head>
<body>
    <h1>반응 선택자</h1>
</body>

 

원래 상태 / 마우스 커서를 갖다댔을 때 / 클릭했을 때

 

  • 상태 선택자
:checked 체크 상태의 input 태그 선택
:focus 포커스를 맞춘 input 태그 선택
:enabled 사용 가능한 input 태그 선택
:disabled 사용 불가능한 input 태그 선택

- 상태 선택자의 상태

 

<head>
    <title>상태 선택자</title>
    <style>
        /*input 태그가 사용 가능할 때*/
        input:enabled{background-color: whitesmoke;}

        /*input 태그가 사용 불가능할 때*/
        input:disabled{background-color: gold;}

        /*input 태그에 포커스를 맞출 때*/
        input:focus{background-color: slateblue;}
    </style>
</head>
<body>
    <h2>사용 가능</h2>
    <input type="">

    <h2>사용 불가능</h2>
    <input type="text" disabled="disabled">
</body>

 

왼쪽: 평소상태 // 오른쪽: 포커스를 맞췄을 때(네모칸을 클릭하면)

 

  • 구조 선택자
:first-child 형제 관계에서 첫 번째로 등장하는 태그 선택
:last-child 형제 관계에서 마지막으로 등장하는 태그 선택
:nth-child(수열) 형제 관계에서 앞에서 수열 번째로 등장하는 태그 선택
:nth-last-child(수열) 형제 관계에서 뒤에서 수열 번째로 등장하는 태그 선택

 

- nth-child와 nth-lastchild 선택자

1) 2n+1 수열에 0부터 숫자를 넣을 경우 : 1, 3, 5, 7, 9 ...

2) 구조선택자는 수열의 결과 값에 해당하는 위치에 있는 태그에 스타일 적용

 

<head>
    <title>구조 선택자</title>
    <style>
        ul{overflow: hidden;}
        li{
            list-style: none; /*동그라미 기호 없애기*/
            float: left; /*옆으로 붙이기*/
            padding: 15px; /*간격 조정(넓히기)*/
        }
        /*맨 처음 블록(첫 번째)의 모서리를 둥글게*/
        li:first-child{border-radius: 10px 0 0 10px;}
        /*마지막 블록(일곱 번째)의 모서리를 둥글게*/
        li:last-child{border-radius: 0 10px 10px 0;}
        /*짝수 번째 블록의 색 지정*/
        li:nth-child(2n){background: yellowgreen;}
        /*홀수 번째 블록의 색 지정*/
        li:nth-child(2n+1){background-color: green;}
    </style>
</head>
<body>
    <ul>
        <li>첫 번재</li>
        <li>두 번째</li>
        <li>세 번째</li>
        <li>네 번재</li>
        <li>다섯 번째</li>
        <li>여섯 번째</li>
        <li>일곱 번째</li>
    </ul>
</body>

 

  • 구조 선택자 사용시 주의 사항

첫번째로 나오는 주의사항만 style을 적용하고 싶다면 li:first-child > a로 수정한다!!

 

 

06 CSS3 단위

  • 키워드 단위

- W3C에서 미리 정의한 단어

- 키워드를 입력하면 해당하는 스타일이 자동으로 적용

 

  • 크기 단위
% 백분율 단위
em 배수 단위
px 픽셀 단위

 

  • 다양한 크기의 단위 적용

.

 

  • 색상 단위

 

  • 색상 선택 도구

- 색상선택 프로그램(ex. http://www.colorpicker.com/ )

 

  • URL 단위

- 이미지나 글꼴 파일을 불러올 때 사용

- url('경로')

 

728x90

'HTML' 카테고리의 다른 글

[CSS] 레이아웃 구성  (0) 2021.10.28
[CSS] CSS3 속성  (0) 2021.10.11
[HTML] 입력 양식 태그와 구조화 태그  (0) 2021.10.10
[HTML] HTML5 기본 태그  (0) 2021.10.09
[HTML] 기본 개념  (0) 2021.10.09

'HTML' Related Articles

티스토리툴바