오봉이와 함께하는 개발 블로그

CSS 선택자 본문

FE/CSS

CSS 선택자

오봉봉이 2021. 12. 3. 17:31
728x90

FrontEnd_day2 정리 (2021.12.03 금요일)

CSS 선택자 유형

태그 선택자

  • 태그명 사용
  • 요소(element) 선택자라고도 함
  • HTML문서에 있는 모든 같은 태그에 동일하게 적용
  • 태그명 {속성명:값;}
h3 {
    background-color:#000;
    color:#fff;
    width:50%;
    margin-left:20px;
}
<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>태그 선택자</title>
        <style type="text/css">
            /* h3 태그에 스타일 적용 css 주석은 이렇게 사용 */
            h3 {
            background-color:#000;
            color:#fff;
            width:50%;
            margin-left:20px;
        }
        </style>


    </head>

    <body>
        <h1>태그 선택자 사용하기</h1>
        <hr>
        <h2>두부감자조림</h2> 
        <h3>재료</h3>
        <ul>
            <li>감자 1개</li>
            <li>두부 1/2모</li>
            <li>꽈리고추 10개</li>
            <li>홍고추 1개</li>
        </ul>
        <h3>조리법</h3>
        <ol>
            <li>감자는 껍질을 벗기고 돌려가면서 어슷하게 썰어 찬물에 담가놓고 두부는 도톰하게 한입크기로 썰며 꽈리고추, 홍고추는 어슷썬다.</li>
            <li>첫번째 썰은 재료에 두부를 팬에 기름을 두르고 노릇노릇하게 앞뒤로 지져 기름은 뺀다.</li>
            <li>냄비에 감자와 홍고추를 담고 조림장을 반분량만 넣는다.</li>
            <li>3번째를 끓이다가 감자가 반정도 익으면, 두부와 남은 양념장을 넣는다.</li>
            <li>윤기나게 졸여지면 꽈리고추를 마지막에 넣어 다시한번 살짝 졸여 조린다.</li>
        </ol>
    </body>
</html>

아이디 선택자

  • #을 사용
  • 문서에서 트정 부분에만 필요한 스타일 적용할 때 사용
  • 필요한 부분에 유일한 아이디를 지정하고 CSS 적용
  • 식별 선택자라고도 함
  • 사용법
    • #idName{속성명:값;}
    • 태그에 반드시 id로 지정되어 있어야 함.
    • <태그명 id="idName"> </태그명>
<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>아이디 선택자 사용하기</title>
        <style type="text/css">
        #cookBox {
            border: 3px solid #000; /*테두리 굵기 유형 색상(순서는 상관 없지만 저긴 저런 폼으로 작성됨)*/
            width: 500px;
            padding: 10px; /*안쪽 여백*/
            margin-left: 70px; /*바깥쪽 여백*/
            font-size: 12pt;
            color:#777;
            background-color:gold;
        }
        #sourceBox {
            background-color: #ffc;
            line-height: 150%; /*행 높이*/
            list-style: none; /*목록(리스트) 글머리 기호 안 보이게*/
            width: 200px;
            color: red;
            padding: 5px;
            border: 1px solid #000;
            margin-left: 30px;

        }
        </style>
    </head>

    <body>
        <h1>아이디 선택자 사용하기</h1>
        <hr>
        <div id="cookBox">
            <h2>도가니탕</h2> 
            <h3>재료-4인분 기준</h3>
            <ul id="sourceBox">
                <li>도가니 1개</li>
                <li>양지머리 300g</li>
                <li>무 200g</li>
                <li>마늘 5쪽</li>
                <li>대파 3뿌리</li>
                <li>생강 1쪽</li>
            </ul>
            <h3>조리법</h3>
            <ol>
                <li>도가니(무릎뼈)는 뼈 부분을 4∼5 등분으로 잘라 깨끗이 씻어 놓는다. </li>
                <li>양지머리는 물에 한번 씻어 놓는다.</li>
                <li>무는 3cm 두께로 둥글게 썰어 놓는다. </li>
                <li>솥에 물을 붓고 도가니와 마늘, 양지머리, 파, 저민 생강을 넣고불에 올려놓아 끓기 시작하면 중간 불에서 2∼3시간 정도 서서히 고면서 중간에 무 토막을 넣어 함께 끊인다. </li>
                <li>양지머리와 무가 푹 익었으면 건져서 먹기 좋게 썰어 다시 솥에 넣고 소금으로 간을 한다. </li>
                <li>도가니를 끊인 국물이 뽀얗게 우러나면 뚝배기나 탕그릇에 고기와 무를 담아 국물을 붓고 대파를 송송 썰어 얹어 낸다.</li>
            </ol>
        </div>
    </body>
</html>

클래스 선택자

  • . 사용(도트 선택자)
  • 문서에서 특정 그룹에 필요한 스타일 적용할 때 사용
  • .className{속성명:값;}
  • HTML 태그의 class속성이 지정되어 있어야 함
    • <태그명 class="className"></태그명>
<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>클래스 선택자 사용하기</title>
        <style type="text/css">
            .cookTitle {
                background-color: #f03;
                color:#fff;
                padding: 5px;
                border: 1px solid #000;
                margin-left: 20px;
            }
            .cookTitle2 {
                background-color: #ffcc33;
                padding: 5px;
                border: 1px solid #f00;
                margin-left: 20px;
            }
            .redDotLine {
                color:#f00;
                font-weight: bold;
                border-bottom: 1px dashed #f00;
            }
        </style>    
    </head>

    <body>
        <h1>클래스 선택자 사용하기</h1>
        <hr>
        <h2>닭칼국수</h2> 
        <h3 class="cookTitle">재료-4인분 기준</h3>
        <ul>
            <li>밀가루 3컵</li>
            <li>닭 1/2마리 </li>
            <li>호박 1/2개 </li>
            <li>부추 50g</li>
            <li>생강,소금, 후추, 참기름</li>
        </ul>
        <h3 class="cookTitle2">조리법</h3>
        <ol>
            <li><span class="redDotLine">밀가루</span>에 <span class="redDotLine">소금과 달걀</span>을 넣고 반죽하여 밀대로 밀어 0.5cm 두께로 썬다.쟁반에 펼쳐 굳지 않게 가제로 덮어놓는다 </li>
            <li>첫번째 썰은 재료에 두부를 팬에 기름을 두르고 노릇노릇하게 앞뒤로 지져 기름은 뺀다. </li>
            <li>닭은 내장과 필요없는 지방을 제거하고 깨끗이 씻는다.생강을 저며 넣고 찬물을 부어 푹 삶아 닭고기는 살을 곱게 찢어 소금, 후추, 참기름에 양념하여 무쳐 놓고 국물은 가제로 걸러 육수로 사용한다. </li>
            <li>호박은 채 썰고 부추도 다듬어 씻어 4cm 길이로 썰고, 홍고추, 파, 마늘은 곱게 다진다.간장, 깨소금, 참기름을 섞어 양념장을 만든다. </li>
            <li>닭국물이 끓으면 썰어 놓은 칼국수를 넣어 서로 붙지 않게 한소끔 끓인 다음 호박과 부추, <span class="redDotLine">양념한 닭고기</span>를 넣고 다시 한소끔 끓여서 양념장과 김치를 곁들여 먹는다.</li>
        </ol>
    </body>
</html>

속성 선택자

  • HTML 태그의 속성 값에 따라 선택자로 정의
  • <a title="산업기사">산업기사</title>
  • 예: <a> 속성 값으로 선택해서 스타일 지정
  • 문법
    • 태그명[속성명=”값”]
    • 태그명[속성명^=”값”]
    • 태그명[속성명$=”값”]
    • 태그명[속성명*=”값”]
<!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>속성 선택자</title>
    <style>
        a[href="http://www.naver.com"] {
            color:green;
            /*a 태그의 href 속성에 스타일 적용*/
        }
        /* a 태그의 href속성 값 중에 #으로 시작하는 속성 값에 스타일 적용 */
        a[href^="#"] {
            background-color: gold;
        }

    </style>
</head>
<body>
    <h3>사이트로 이동</h3>
    <a href="http://www.naver.com">네이버로 이동</a>
    <h3>다른 문서로 이동</h3>
    <a href="first.html">index로 이동</a>
    <h3>문서 내 다른 영역으로 이동</h3>
    <a href="#javascript">id가 javascript인 곳으로 이동</a><br> <br>
    <a href="#jquery">id가 jquery인 곳으로 이동</a><br> <br>
    <a href="#css">id가 css인 곳으로 이동</a><br> <br>
    <br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br>
    <h3 id="javascript">javascript</h3>
    <br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br>
    <h3 id="jquery">jquery</h3>
    <br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br>
    <h3 id="css">css</h3>
</body>
</html>

상태 선택자

  • 태그의 상태로 선택해서 스타일 적용
  • 상태 : 체크된 상태, 포커스 받은 상태, 사용 가능 또는 불가능한 상태
  • 선택자:checked - 체크된 input 태그 선택
  • 선택자:focus - 포커스를 받은 input 태그 선택
  • 선택자:enabled - 사용 가능한 input 태그 선택
  • 선택자:disabled - 사용 불가능한 input 태그 선택
<!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>상태 선택자</title>
    <style type="text/css">
        input:enabled{background-color: white;}
        input:disabled{background-color: black;}
        input:focus{background-color: orange;}
    </style>
</head>
<body>
    <h2>사용 가능</h2>
    비밀번호 : <input type="password" size="10">
    <h2>사용 불가능</h2>
    아이디 : <input type="text" size="10" value="abcd" disabled>
</body>
</html>

자식 / 자손 선택자(상속 선택자)

  • 자식/자손 개념

  • 자식 선택자 : > 부호 사용
    • 선택자 > 자식 선택자
    • 선택자A > 선택자B
    • #header > h1
  • 자손(후손) 선택자 : 띄어 쓰기(스페이스바)
    • 선택자 자손선택자
    • 선택자A 선택자B
    • #header h1
    • #pageNev ul li a:hover

first-child 선택자

  • 첫 번째 자손 선택
    • .wrap div:first-child
  • 두 번째 자손 선택
    • .wrap div:first-child+div
  • 또는 .wrap div:nth-child(n)
<style type="text/css">
        /* content의 모든 자손 */
        #content div {
            width: 400px;
            height: 50px;
            border: solid 1px black;
        }
        /* 첫 번째 자손 */
        #content div:first-child {
            background-color: yellow;
        }
        /* 두 번째 자손 */
        #content div:first-child + div {
            background-color: green;
        }
        /* 세 번째 자손 */
        #content div:nth-child(3) {
            background-color: gold;
        }
        /* 네 번째 자손 */
        #content div:nth-child(4) {
            background-color: pink;
        }
        /* div :nth-child(4) < 와 같이 콜론 전/후로 띄어쓰기는 하면 안됨.*/
    </style>
nth-child 예제
<!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 type="text/css">
        #stdTable {
            margin: 0 auto;
            border-collapse: collapse;
        }
        #stdTable th {color: white; background-color: blue;}
        #stdTable th.name {width: 100px;}
        #stdTable th.email {width: 200px;}
        #stdTable td {height: 20px;}
        /* 짝수 행 선택 */
        #stdTable tr:nth-child(3n) td {
            background-color: yellow;

        }
    </style>
</head>
<body>
    <table id="stdTable" border="1">
        <tr><th class="name">이름</th><th class="email">이메일</th></tr>
        <tr><td><td></td></td></tr>
        <tr><td><td></td></td></tr>
        <tr><td><td></td></td></tr>
        <tr><td><td></td></td></tr>
        <tr><td><td></td></td></tr>
        <tr><td><td></td></td></tr>
        <tr><td><td></td></td></tr>
        <tr><td><td></td></td></tr>
        <tr><td><td></td></td></tr>
        <tr><td><td></td></td></tr>
    </table>
</body>
</html>

동적 반응 선택자

  • active
    • 마우스를 클릭한 태그 선택
  • hover
    • 마우스를 올린 태그
<!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 type="text/css">
        /* content의 모든 자손 */
        #content div {
            display: inline-block;
            background: blue;
            width: 100px;
            height: 50px;
        }
        /* 마우스 올렸을 때 */
        #content div:hover {
            background: yellow;
        }
        #content div:active {
            background: red;
        }
    </style>
</head>
<body>
    <div id="content">
        <div></div><div></div><div></div><div></div>
    </div>
</body>
</html>
728x90
저작자표시

'FE > CSS' 카테고리의 다른 글

CSS - 반응형 웹  (0) 2021.12.06
CSS 예제  (0) 2021.12.06
외부 CSS 파일 HTML에 적용  (0) 2021.12.03
CSS 속성  (0) 2021.12.03
CSS 개요  (0) 2021.12.03
'FE/CSS' Related Articles more
Comments