CSS 기본 선택자

유형선택자

* {margin: 50; padding: 50;} /*모든 태그 적용*/
body {width: 1280px;} /*body 태그만 적용*/
a {text-decoration: none; color: black;} /*a 태그만 적용*/

---

class선택자

.comment {font-style: italic;}

comment 클래스의 폰트를 이탤릭체로 설정

---

ID선택자

#base {color: deepskyblue;}

base id의 색상을 deepskyblue로 설정

---

계층선택자(결합자)

css

.ex1 li { list-style: none; } /* 조상 후손으로 나타낸 지정 | .ex1 클래스 내의 li 태그의 스타일을 업앰*/
.ex1 > nav > .lst1 > li { padding-left: 24px;} /* 부모자식으로 나타낸 .ex1 클래스 내의 li 지정 | 왼쪽 패딩의 값 변형*/
.ex1 .item1 ~ li > a { color: red;} /* item1의 형제들의 색상 변경*/

html

<div class="ex1">
        <nav class="gnb">
            <ul class="lst1">
                <li class="item1"><a href="">항목1</a></li>
                <li class="item2"><a href="">항목2</a></li>
                <li class="item3"><a href="">항목3</a></li>
            </ul>
            <ol class="lst2">
                <li class="item4"><a href="">항목4</a></li>
                <li class="item5"><a href="">항목5</a></li>
                <li class="item6"><a href="">항목6</a></li>
                <li class="item7"><a href="">항목7</a></li>
            </ol>
            <ul>
                <li class="item8"><a href="">항목8</a></li>
            </ul>
            <ol>
                <li class="item9"></li>
            </ol>
        </nav>
    </div>

lst2에 들어있는 item 4, 5, 6, 7, 8, 9는 item1의 형제가 아니기에 색상이 변경되지 않는다.

테스트

---

child, of-type

css

.ex2 li:last-child {border-bottom: 2px double black;} /* 마지막 자식에게 밑줄 */
.ex2 li:last-of-type {border-top: 3px dotted deeppink;} /* 마지막 요소들에게 핑크줄을 그림*/
.ex2 li:nth-child(2) {border-left: 3px solid violet;} /* li에서 두 번째 자식 선택 */
.ex2 li:nth-of-type(2) {border-right: 3px solid gold;} /* li에서 2번째 요소들을 선택*/
.ex2 li:nth-child(2n+1) {margin-left: 50px;} /* 3의 배수 li 만 선택*/    /*li:nth-child(2n+1)::after {margin-left: 50px; content: "2n+1";}*/
.ex2 li:nth-child(2n) {text-indent: -20px;} /* 2의 배수 li 만 선택 */    /*li:nth-child(2n)::after {text-indent: -20px; content: "2n";}*/
.ex2 li:only-child { font-size: 24px;} /* li 태그가 하나만 있는 걸 선택*/
.ex2 li:only-of-type {opacity: 0.75; background-color: brown;} /* 배경 투명도 */
.ex2 li:empty::after {content: "여기는 내용이 없어서 추가되었습니다.";} /*내용이 없는 li 태그들을 선택*/

html

<div class="ex2">
        <nav class="gnb">
            <ul class="lst1">
                <li class="item1"><a href="">항목1</a></li>
                <li class="item2"><a href="">항목2</a></li>
                <li class="item3"><a href="">항목3</a></li>
            </ul>
            <ol class="lst2">
                <li class="item4"><a href="">항목4</a></li>
                <li class="item5"><a href="">항목5</a></li>
                <li class="item6"><a href="">항목6</a></li>
                <li class="item7"><a href="">항목7</a></li>
            </ol>
            <ul>
                <li class="item8"><a href="">항목8</a></li>
            </ul>
            <ol>
                <li class="item9"></li>
            </ol>
        </nav>
    </div>

테스트

---

속성선택자(특성선택자)

css

ul {list-style: none;}
a[href] {color:blue;} /*img 중에서 src 속성이 존재하는 요소 선택*/
a[href="naver"] {font-size:40px; color: green;} /* img 중에서 src속성에 값이 없는걸 선택 | 속성 일치 선택자 */

html

<ul>
    <li><a href="naver">네이버</a></li>
    <li><a>구글</a></li>
    <li><a href="daum">다음</a></li>
</ul>

테스트

• 네이버
• 구글
• 다음

---

링크 선택자

css

/*link visited hover active 순으로 해야 제대로 동작 love hate*/
.img_fr a:link { color: gold;} /*링크가 있는 경우*/
.img_fr a:visited {color: chocolate;} /* 방문한 경우 */
.img_fr a:hover { color: deepskyblue; } /* 마우스를 올린 경우*/
.img_fr a:active { color: greenyellow;} /*마우스를 누르고 있는 경우*/

html

<div class="img_fr">
    <a >링크1</a>
    <a href="https://www.naver.com" target="_blank">링크2</a>
    <a href="https://www.goodwebworld.com" target="_blank">링크3</a>
</div>

테스트

---

기타 선택자

css

.fr1 a::before {content: "앞 ";} /*a 태그안의 맨 앞을 선택*/
.fr1 a::after {content: " 뒤";} /*a 태그 안의 맨 뒤를 선택*/

html

<div class="fr1">
  <a>링크1</a>
</div>

테스트

---

문장 선택자

css

.comment::first-letter {font-size: 60px;} /*comment 클래스의 첫번째 글자*/
.comment::first-line {text-decoration: underline;}  /*comment 클래스의 첫번째 줄만 밑줄*/

html

<p class="comment">1동해 물과 백두산이 마르고 닳도록하느님이 보우하사 우리나라 만세. 무궁화 삼천리 화려강산 대한 사람, 대한으로 길이 보전하세 <br> 
  2 남산 위에 저 소나무, 철갑을 두른 듯 바람서리 불변함은 우리 기상일세. 무궁화 삼천리 화려강산 대한 사람, 대한으로 길이 보전하세</p>
<p class="comment">3 가을 하늘 공활한데 높고 구름 없이 밝은 달은 우리 가슴 일편단심일세. 무궁화 삼천리 화려강산 대한 사람, 대한으로 길이 보전하세</p>

테스트

1동해 물과 백두산이 마르고 닳도록하느님이 보우하사 우리나라 만세. 무궁화 삼천리 화려강산 대한 사람, 대한으로 길이 보전하세
2 남산 위에 저 소나무, 철갑을 두른 듯 바람서리 불변함은 우리 기상일세. 무궁화 삼천리 화려강산 대한 사람, 대한으로 길이 보전하세

3 가을 하늘 공활한데 높고 구름 없이 밝은 달은 우리 가슴 일편단심일세. 무궁화 삼천리 화려강산 대한 사람, 대한으로 길이 보전하세

---

드래그 영역 색상 변경

css

.area::selection { background-color: deeppink; color: white;} /* 해당 영역을 드래그 할 경우 색상 변경*/

html

<p class="area">가나다라마바사아자차카타파하가나다라마바사아자차카타파하
            가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하
            가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하
            가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하
            가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하
            가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하
            가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하
        </p>

테스트

가나다라마바사아자차카타파하가나다라마바사아자차카타파하 가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하 가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하 가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하 가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하 가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하 가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하

---