250828 [ Day 38 ] - CSS (2)

TaeHyun·2025년 8월 28일

TIL

목록 보기

40/182

시작하며

어제 혼자서 공부했던 내용 중 놓친 내용은 딱히 없었다. 그래서 무사히 오늘 진도를 따라갈 수 있었다.
오늘은 주로 CSS의 선택자에 대해 공부했는데, 선택자의 종류도 너무 많고 다 비슷하면서 디테일하게 다른 부분이 있어서 너무 복잡해서 어떻게 쓰나 싶었다. 하지만 막상 실습을 해보니 주로 사용하는 방식만 사용해서 이론적으로 내용을 배울 때와는 확실히 달랐던 것 같다.

가상 클래스 선택자

Hover

a:hover {}
요소에 마우스 커서가 올라가 있는 동안 선택

Active

a:active {}
요소에 마우스를 클릭하고 있는 동안 선택

Focus

input:focus {}
요소가 포커스(선택)되면 선택

Checked

input[type=”checkbox”]:checked + label {}
체크박스를 체크하면 스타일 적용

Link / Visited

a:link {} : 방문하지 않은 링크에 대한 속성
a:visited {} : 이전에 방문한 링크에 대한 속성
주로 색상관련 속성을 사용

first-child

.class > *:first-child {}
해당하는 요소 중 첫번째 요소를 선택

last-child

.class > *:last-child {}
해당하는 요소 중 마지막 요소를 선택

nth-child

.class > *:nth-child(n) {}
해당하는 요소 중 n번째 요소를 선택

not

.class > *:not(div) {}
해당하는 요소 중 () 에 해당하지 않는 요소만 선택

가상 요소 선택자

선택 된 요소의 앞, 뒤에 별도의 Content를 삽입하는 선택자
반드시 content 속성을 사용

::before

.class::before { content: “내용”; }
해당하는 요소의 내부 앞에 내용을 삽입

::after

.class::after { content: “내용”; }
해당하는 요소의 내부 뒤에 내용을 삽입

속성 선택자

<body>
    <h2>속성 선택자 실습</h2>
    <p class="note">속성 선택자는 태그의 속성을 이용한 선택자</p>
    <a href="https://naver.com">네이버</a>

    <img src="dog.png" alt="강아지사진" />
    <img src="cat.jpg" alt="고양이사진" />
    
    <input type="text" placeholder="이름" />
    <input type="password" value="pw" />
    <input type="text" value="000-0000-0000" />
    <input type="text" placeholder="핸드폰" />
    <input type="text" placeholder="주민번호" disabled />
</body>

해당하는 속성을 포함한 요소 선택

[disabled] {
    background-color: red;
}

해당 속성에 해당 값을 포함하는 요소 선택 (완전 일치해야 됨)

[placeholder="이름"] {
    background-color: orange;
}

해당하는 속성을 포함하지 않는 요소 선택

input:not([placeholder]) {
    background-color: blue;
}

속성값이 특정 단어를 포함하는 요소 선택 (공백으로 단어 구분) ( ~= )

[class~="note"] {
    background-color: yellow;
}

속성값이 특정 접두사로 시작하는 경우 선택 ( ^= )

[href^="https"] {
    color: red;
}

속성값이 특정 접미사로 끝나는 경우 선택 ( &= )

[src$=".png"] {
    border: 1px solid green;
}

속성값이 특정 문자열을 포함하는 요소 선택 (단어 단위 상관X 있기만 하면 됨) ( *= )

[alt*="고양이"] {
    border:1px dashed crimson
}

마치며

내일은 웹에서 기능을 담당하는 JavaScript를 배울 것 같은데 매우 기대가 된다. 지금까지 배운 HTML과 CSS만으로도 충분히 다음 프로젝트나 앞으로의 포트폴리오 제작에 큰 도움이 될 것 같은데, 여기에 기능 구현까지 가능해지면 앞으로의 작업 퀄리티가 많이 상승하지 않을까 싶다.