[CSS] 0915 3일차 (선택자, hover 등등)

CSS (Cascading Style Sheets)는 HTML요소에 스타일 (크기, 색상 등)을 적용하기 위해 사용한다.

적용 방법

CSS를 적용하는 방법은 몇 가지가 있는데 다음과 같다.

스타일 태그 활용
- HTML 문서에 있는 head태그의 자식이 될 수 있도록 style태그를 만들어 해당 태그의 내부 내용에 CSS문법을 작성하는 방법을 의미한다.
- HTML문서 내에 HTML문법과 CSS 문법이 공존하게 됨으로 원하는 코드를 찾기 힘들어지고 유지보수가 까다로워진다.
스타일 속성 활용
- 스타일을 적용하고자 하는 태그에 style 속성을 부여하는 방법을 의미한다.
- 요서에 직접 값을 부여함으로 별도의 선택자를 작성하지 않는다.
- HTML 문서 내에 HTML 문법과 CSS 문법이 공존하게 됨으로 원하는 코드를 찾기 힘들어지고 유지보수가 까다로워진다.
링크 태그 활용
- 아래와 같이 head 태그의 자식이 되도록 link 태그를 작성해 HTML 파일 외부에서 작성된 CSS 파일을 불러와 사용할 수 있다.

<head>
  <link href = "..." rel="stylesheets">
  
</head>
 
 href : 불러올 CSS 파일의 주소 및 경로
 rel : stylesheets로 지정해 불로얼 파일이 css 임을 지정한다

html파일와 css 파일을 서로 연결시켜서 적용한다는 말

CSS 색상 값

CSS에서 색상을 표현하는 방법이 여러가지가 있는데 그중 일부는 다음과 같다.
- 이름 : white , black , blue 등과 같이 사전에 정의된 이름을 사용 할 수 있다.
- transparent : 투명
- RGB :함수를 통해 각 인자에 대해 0부터 255 까지 적,녹,청의 값을 전달하여 색상을 반환하는 방식이다. 숫자가 작을수록 어두우며 RGB(0,0,0) 은 검은색 RCB(255,255,255)는 흰색이다.
- RGBA : 함수를 통해 색상을 반환하는 방식 R,G,B,A는 위 RGB 함수와 동일하게 사용되나 A 알파값으로 불투명도를 지정할 수 있다. A 값은 0%(0.0)부터 100%(1.0)까지 지정 할 수 있고, 0% 에 가까울 수록 투명해 진다.
- HEX : #rrggbb 혹은 #rrggbbaa 표현식을 통해 색상을 지정하며, 각 rr,gg,bb 값은 rgb 함수에서 사용했던 인자의 10진법 값을 16진법 값으로 표현한 값이다. aa 값 또한 마찬가지로 RGBA 함수에서 사용했던 알파값의 255에 대한 백분율의 10진법 값을 16진법 값으로 표현한 값이다.

선택자

선택자(Selector)는 하나 이상의 CSS 속성(Propterty)을 적용하기 위한 대상을 선택하기 위해 사용하는 표현식이다.
CSS의 속성을 적용하기 위해 아래와 같이 작성한다.

<style>
div {
 속성이름 1 : 값 1,
 속성이름 2 : 값 2
 }
 </stlye>

선택자를 작성하고 중괄호 {}를 열어 중괄호를 닫기 전까지 속성을 여러개를 작성 할 수 있다.
속성은 속성 이름을 작성하고 콜론 (:)을 적은 뒤 값을 적고 세미콜론(,)으로 끝내야 한다. (속성 이름 : 값 꼴 )

기본 선택자

전체 선택자

전체 선택자(Unuversal Selector)는 모든 유형의 태그를 선택한다.
별표(*)특수 기호를 사용한다.

* {

}

전체 선택자는 모든 유형을 선택하는 것으로, 유형 선택자와 함께 사용하지 않는다.
유형 선택자가 아닌 선택자를 사용하는 경우 전체 선택지가 생략된 것으로 간주한다.

.color-red{

}

위 선택자는 아래와 같다

*.color-red{

}

유형 선택자

유형 선택자( 요소 선택자, Type Selector )는 태그의 이름으로 선택한다.( 이름 없이 태그의 이름으로 적용해서 이름이 같은 태그면 갯수 상관 없음)
별도의 특수기호 없이 태그의 이름을 작성한다.
가령 모든 span 태그를 선택하기 위해 아래와 같이선택자를 작성한다.
span { }

클래스 선택자

클래스 선택자(Class Selector)는 태그가 가지고 있는 class 속성 값을 공백으로 구분하여 선택한다.
마침표 특수기호(.) 를 이용하여 .클래스의 형태로 작성한다.
가령, color - red 라는 클래스를 가지는 모든 요소를 선택하기 위해 아래와 같은 선택자를 작성한다.

<head>
.color-red {

}
.alpha{
 color : red
 }
/<head>
<body>

<div class=color-red">b<div>


<div class = " alpha bravo charie " 이렇게 클래스 명마다 띄어쓰기 하면  클래스가 3개라는 뜻
</body>

.color-red : 태그의 종류 x color-red 클래스

section.color-red : section태그, color-red 클래스 O

section . color-red : section 태그의 자식/ 자손인 color - red 클래스 O

띄어쓰기 하나로 위 아래 뜻이 다르게 되어버림

아이디 선택자

아이디 선택자(ID Selector)는 태그가 가지고 있는 id 속성 값으로 선택한다.
샾 특수기호 (#)를 이용하여 #아이디의 형태로 작성한다.
가령 logInForm 이라는 id 를 가지는 요소를 선택하기 위해 아래와 같이선택자를 작성한다.
#loginForm { }

<style>
#loginform {
color : red
}

</style>


<form class id"loginform>

특성 선택자

특성 선택자(속성 선택자 ,Attribute Selector)는 HTML 태그가 가지고 있는 속성 및 이의 값으로 선택한다.
대괄호 특수기호([,])를 이용하여, 속성 및 값 관계 정의를 아래와같이 할 수 있다.
- [속성] : 속성 존재 확인
- [속성-값] : 속성 값 일치 확인
- [속성~=값] : 속성 값 포함 확인 (공백 구분자)
- [속성^=값] : 속성 값 시작 확인
- [속성$=값] : 속성 값 끝 확인
- [속성*=값] : 속성 값 포함 확인(단순 문자열 포함)

<style>
input[required]{
border-color:red
}

input[type^="t"]{ // 속성값이  t 로  시작하는 거
border-color:red
}
</style>

<body>

<input required placeholder="작성해주세요">
<input required type = "telecom"


</body>

결합자

결합자(Combination)에 의해 속성을 적용받는 대상은 항상 마지막 피결합자임에 유의한다.

자손 결합자

자손 결합자는 기준이 되는 선택자가 가지는 자식 혹은 자손이 되는 선택자 전체를 선택하기 위해 사용한다.
선택자 사이를 공백( )으로 구분한다.
가령, div의 자식 혹은 자손인 span을 선택하기 위해 아래와 같이 작성한다.

div span{

스타일에 대상자는 div가 아니라 div안에 들어있는 span(마지막 피결합자)이라는 뜻

}

div span {
 color :red
 }
 
 1. <div> div
  2. <span> span
   3. <span>
    4.  <a> dd </a>
    </span>
   </span>
  </div>
  
  실제 해당은 1,2번까지만이지만 왜 나머지도 스타일 적용이 되는가 ?
  원래 기본색상을 블랙이 아니라 inheritage 상속이기 때문에

자식 결합자

자식 결합자는 기준이 되는 선택자가 가지는 자식이 되는 선택자 전체를 선택하기 위해 사용한다.
선택자 사이를 오른쪽 꺽쇠괄호(>)로 구분한다.
가령,ul 태그의 자식인 li 태그를 모두 선택하기 위해 아래와 같이 선택자를 작성할 수 있다.

ul > li {

}

일반 형제 결합자

일반 형제 결합자는 기준이 되는 선택자와 동일한 부모를 가지고, 이보다 후행하는 요소들에 대한 선택자이다.
물결표( ~ ) 특수기호를 활용한다.
가령,container 태그의 자식인 .box의 일반 형제인 .box를 선택하기 위해 아래와 같이 선택자를 작성할 수 있다.

.container > .box ~ .box{

}

인접 형제 결합자

인접 형제 결합자는 기준이 되는 선택자와 동일한 부모를 가지고 이에 바로 후행하는 요소에 대한 선택자이다
더하기( + ) 특수기호를 활용한다.
가령, .container 태그의 자식인 .box의 인접 형제인 .box를 선택하기 위해 아래와 같이 선택자를 작성할 수 있다.

.container > .box + .box {


}

의사 클래스

의사 클래스(가상 클래스 ,Pessudo Class)는 요소의 상태나 상황에 따라서 선택자를 구분하기 위해 사용한다.
의사 클래스는 어떠한 선택자 뒤에 콜론 ( : ) 과 의사 클래스 이름을 붙여 사용한다.
의사 클래스의 종류는 다음과 같다
- :hover : 마우스 커서가 올라가 있는 상태.
- :active : 마우스를 누르고 있는 상태.(눌러야 스타일이 적용 됨)
- :checked : input 태그의 type 속성 값이 checkbox혹은 radio일때 해당 태그가 체크되어 있는 상태.
- :disabled : 태그가 비활성화 되어있는 ( disabled 속성이 있는 ) 상태, 단, 비활성화 가능한 태그만을 대상으로 한다.
- :enabled : 태그가 비활성화되어 있지않은 (disabled 속성이 없는 )상태, 단 비활성화 가능한 태그만을 대상으로 한다.
- :focus : 태그가 포커스를 가지고 있는 상태, 단, 포커스를 가지고 있는 태그만을 대상으로 한다.
- :focus-within :자기 스스로 혹은 자식/자손 중 하나가 포커스를 가지고 있는 상태
- :has(x) : 태그가 선택자 x를 가지고 있는 상태. ex ) div:has(>a) -> div중 a태그를 가지고(has)있는 div
- :not(x) : 태그가 선택한 x 에 부정인 상태. ex ) div:not (:has(>a)) -> div중 a태그를 가지고(has)있지 않은(not) div -> 응용 가능 ex ) div:not(:active(>a)) -> div중 a태그를 active 하고 있지 않은 div
- optional : 태그가 필수 필드가 아닌( required 속성이 없는) 상태, 단, 입력 가능한 태그만을 대상으로 한다.
- :required : 태그가 필수 필드인 (required 속성이 있는 ) 상태, 단, 입력 가능한 태그만을 대상으로 한다.
- read-only :태그가 읽기 전용(read-only 속성이 있는) 상태, 단, 입력 가능한 태그만을 대상으로 한다.
- :read-write :태그가 읽기 전용이 아닌(readonly속성이 없는)상태, 단, 입력 가능한 태그만을 대상으로 한다.
- :first-child : 위치한 곳에서 (반드시)첫번째 자식이면서 선행 선택자를 만족하는 상태.
- :last-child : 위치한 곳에서 마지막 자식이면서 선행 선택자를 만족하는 상태
- :nth-child(x) : 위치한 곳에서 주어진 x를 만족하는 자식이면서 선행 선택자를 만족하는 상태. x는 다음과같다
  - 숫자: 순번을 의미하며 1부터 시작한다.
  - even : 짝수번째를 의미한다(2,4,6,8..)
  - odd : 홀수번째를 의미한다.(1,3,5,7..)
  - 식(n) : 0부터 1씩 증가하는 n에 대해 An + B에 대한 식. 가령,3n 은 3의 배수이다.(0,3,6,9...)단, 연산 결과가 1 미만일 경우 그 연산 결과는 무시된다.

<style>
        .box {
            width : 100px;
            height : 100px;
        }
        .box.a {
            background-color: #38d5be;
        }
        .box.a:hover {
            background-color: #21bcff;
        }
        .box.b {
            background-color: #ffd93b;
        }
    </style>
</head>
<body>
<div class="box a">a</div>
<div class="box b">b</div>
</body>

Q : a 에 hover 되면 색이 바뀌게끔 스타일을 적용했는데 b 에는 b가 아닌 a를 눌렀을 때 b에도 스타일이 적용되게끔 넣는 방법은?

A : 인접형제 결합자를 사용하면 됨( 여기서 부모는 body가 부모 )

 <style>
        .box {
            width : 100px;
            height : 100px;
        }
        .box.a {
            background-color: #38d5be;
        }
        .box.a:hover {
            background-color: #21bcff;
        }.box.a:hover + .box.b {
            background-color: #21bcff;
        }
        .box.b {
            background-color: #ffd93b;
        }
    </style>
</head>
<body>
<div class="box a">a</div> //box 띄어쓰기 a 이기 때문에 클래스가 2개라는 뜻(box클래스,a클래스 별도
<div class="box b">b</div>

공부를 하다보니 왜 클래스 선택자, 아이디 선택자 별로 다른게 없어보이는데 두가지가 있을까 하고생각해봄.

gpt에 질문 해보니

사용빈도 : 클래스 > 아이디
우선순위 : 아이디> 클래스

'FRONT-END > CSS' 카테고리의 다른 글

[CSS] CSS 0918 6일 (filter, transform, border,flex) (0)	2025.09.18
깨알 : box-sizing에 대해서 (0)	2025.09.17
[CSS] 0916 4일차(의사요소 ::,background,font,width,height,position,padding,margin) (2)	2025.09.16
[CSS] input 박스 클릭-> 연결되어있는 글자색 변경 // 체크박스 체크-> 글씨보이게 하기 (0)	2025.09.15

개발자 코드츄

[CSS] 0915 3일차 (선택자, hover 등등)

'FRONT-END > CSS' 카테고리의 다른 글

티스토리툴바

[CSS] 0915 3일차 (선택자, hover 등등)

'FRONT-END > CSS' 카테고리의 다른 글

관련글

티스토리툴바