[CSS] 1. CSS 개요 및 선택자

쵱뉴성·2024년 11월 19일
CSS

HTML.CSS.JavaScript

목록 보기
4/16
post-thumbnail

1. CSS 개요

2. 기본 선택자

3. 기타 선택자

1. CSS 개요

1.1 CSS란

Cascading Style Sheets의 줄임말로 마크업 언어가 실제로 화면에 표시되는 방법을 기술하는 언어이다. W3C(웹 표준 기관)에서 CSS를 웹 브라우저의 표준으로 지정했다.
여기서 Cascading은 우선순위가 계단식으로 적용된다는 의미로, CSS는 우선순위가 있는 스타일 시트이다. (스타일 우선순위는 추후)

  • 스타일(style)
    HTML 문서에서 글꼴, 색상, 정렬, 각 요소의 배치 방법과 같이 문서의 겉모습을 결정짓는 것
선택자 {
	속성: 속성값;
	}
  • 선택자: 스타일을 어느 태그에 적용할지 선택
  • 인라인 스타일 : html 태그에 직접 표현
<p style="color: blue">귤귤</P>

귤귤

  • 내부 스타일 시트 : html 문서 head태그 내 style태그 정의
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS 개요 및 선택자</title>
    <style>
    h1 {
     background-color: black;
     color: white ;
     }
    </style>
</head>
  • 외부 스타일 시트 : 외부 *.css 파일에 작성하며 html 헤드 태그 내 link에 파일 경로 지정 
css 파일
div[id=container1] {
    background-color: yellow;
}
html 헤드 태그 <link> 태그 내 css파일 경로 지정
<link rel="stylesheet" href="css/selector1.css">

2. CSS 기본 선택자

기본적으로 CSS 속성은 style 태그 또는 css파일에 작성된 순서대로 해석이 진행된다.
만약 동일한 요소에 여러 CSS 속성이 설정되는 경우 "우선순위"에 따라 어떤 CSS 스타일이 적용될지 결정된다.

  • 1순위 : CSS 속성에 !important;를 붙인 경우
  • 2순위 : inline으로 작성한 CSS
  • 3순위 : 아이디 선택자(#)
  • 4순위 : 클래스 선택자(.)
  • 5순위 : 태그 선택자(태그명)

2.1. 태그 선택자(타입 선택자)

  • 태그명 { 스타일 규칙 }
  • 문서 내 같은 종류의 태그들을 선택하는 선택자
* div 태그에 배경선 적용

div {
    border: 3px solid red;
}

2.2. 클래스 선택자

  • .클래스명 { 스타일 규칙 }
  • HTML 문서 내에서 같은 class 속성값을 가지는 태그를 모두 선택하는 선택자
  • 태그 내 class="클래스명"으로 정의해둔 class 속성을 사용하여 스타일 정의
  • 요소 하나에 클래스 스타일 2개 이상 적용 가능
* test-1이라는 클래스를 가진 태그에 스타일 적용

.test-1 {
    color: red;
}

2.3. id 선택자

  • #아이디명 { 스타일 규칙 }
  • HTML 문서 내에서 id속성 값이 일치하는 요소를 선택하는 선택자
  • 태그 내 id="id명"으로 정의해둔 id 속성을 사용하여 스타일 정의
  • 문서에서 한 번만 적용 가능(class 선택자와 차이점)
* li-1, li-2라는 아이디를 가진 태그에 스타일 적용

#li-1{background-color: red;}
#li-2{background-color: lightcoral;}

2.4. 전체 선택자

  • *{ 스타일 규칙 }
  • HTML 문서 내 모든 요소에 스타일을 적용하는 선택자
전체 태그에 스타일 적용
* {
    font-size: 20px;
}

3. 기타 선택자

3.1. 속성 선택자

  • 선택자[속성=속성값] { 스타일 규칙 }
  • 스타일을 부여하고자 하는 요소 내 작성되어 있는 속성을 이용하여 선택하는 방법
번호작성방법설명
1선택자[속성=속성값]속성값과 일치하는 요소 선택
2선택자[속성~=속성값]속성에 속성값이 포함되어 있는 요소 선택
3선택자[속성\=속성값]속성이 속성값으로 시작되는 요소 선택 -기준 앞에 *
4선택자[속성^=속성값]속성이 속성값으로 시작되는 요소 선택(캐럿기호)
5선택자[속성$=속성값]속성이 속성값으로 끝나는 요소 선택(달러기호)
6선택자[속성*=속성값]속성에 속성값이 포함되어 있는 요소 선택

CSS 파일

* div 태그들 중 name 속성값이 nam1과 "일치"하는 요소를 선택 
[name=name1] {
    background-color: orangered;
}

* div 태그들 중 name속성값에 name1이 포함되어 있는 요소를 선택 
div[name~=name1]{
    background-color: yellow;
}

* div 태그들 중 class 속성값이 div로 시작되는 요소 단, -기준 앞에
div[class|=div] {
    background-color: cyan;
}

* div 태그들 중 name 속성값이 na로 시작되는 요소(시작과 관련된 기호는 캐럿^)
div[name^=na] {
    background-color: blue;
}

* div 태그들 중 class 속성값이 ss로 끝나는 요소(끝과관련된 기호는 달러$)
div[class$=ss] {
    color:white;
}
/* div 태그들 중 class 속성값에 i가 포함되어 있는 요소( 
div[class*=i] {
    background-color: yellow;
    color: red;
}

HTML 파일

<div class="div-class" name="name1">div1</div>
<div class="divclass" name="name2">div2</div>
<div class="div-class" name="name3 name1">div3</div>
<div class="class-div" name="name3">div4</div>



3.2. 자손선택자와 후손선택자

  • 자손 : 바로 하위 요소들
  • 후손 : 하위 요소 전체를 의미 
<div id="test1">
    <h4>div의 자손이면서 후손</h4> 
    <h4>div의 자손이면서 후손.</h4>
    <ul>
        <li>ul의 자손이면서 div의 후손입니다.</li>
        <li>ul의 자손이면서 div의 후손입니다.</li>
    </ul>
</div>
  • 자손 선택자 : 자손을 선택하기 위한 선택자
    => a > b 형태로 선택 : a의 자손들 중 b 요소만 선택
#test1 > h4 {
  color : white;
}

#test1 > ul > li {
  color : pink;
}

3.2. 등위 선택자

등위 관계에 있는 특정 요소를 선택할 때 사용한다.

  • a 요소 뒤에 있는 b 요소 하나만 선택
    => a+b { 스타일; }
  • a 요소 뒤에 있는 모든 요소 선택
    => a~b { 스타일; }
<div id="test2">div1</div>
<div>div2</div>
<div>div3</div>
<div>div4</div>
<ul>마지막 div</ul>
#test2+div{
    background-color: yellow;
}

#test2~div{
    background-color: darkolivegreen;
}
div1
div2
div3
div4
    마지막 div

3.2. 반응 선택자

사용자의 움직임에 따라 반응하는 선택자

  • active 속성값: 요소에 "클릭"이 되었을 경우 반응하는 선택자
    => 선택자:active {스타일}

  • hover 속성값: 요소에 마우스가 올라가는 순간 반응하는 선택자(hover: 마우스가 올라가 있는 상태)
    => 선택자:hover{스타일}
<div id="active-test" class="area">active 테스트</div>
<div id="hover-test" class="area">hover 테스트</div>
.area {
    background-color: yellowgreen;
    width: 100px;
    height: 100px;
    cursor: pointer;
}

#active-test:active{
    background-color: yellow;
    color: red;
}

#hover-test:hover {
    background-color: maroon;
    color: white;
}
active 테스트

hover 테스트

3.3. 상태 선택자

요소의 상태에 따라 선택되는 선택자들

  • checked: 체크된 상태의 요소들
  • focus: 초점이 맞춰진 input 요소들
  • enabled/disabled : 활성화/비활성화된 요소들

(1) checked

<input type="checkbox" id="apple">
<label for="apple">사과</label>

<input type="checkbox" id="banana">
<label for="banana">바나나</label>

<input type="checkbox" id="pfruit">
<label for="pfruit">패션후르츠</label>
input[type=checkbox]:checked+label{
    width: 20px;
    height: 20px;
    font-size: 20;
}
사과 바나나 패션후르츠

(2) focus

아이디: <input type="text" name="userId" placeholder="아이디"> <br>

비밀번호: <input type="password" name="userPwd" placeholder="비밀번호"> <br>
input[name^=user]:focus {
    background-color: palevioletred;

}

원래는 클릭하면 핑크색으로 바뀜 ㅎㅋ

아이디:

비밀번호:

(3) enabled/disabled

<button>클릭 가능 버튼</button>
<button disabled>클릭 불가능 버튼</button>  
button:disabled{
    background-color: indigo;
}

button:enabled{
    background-color: olive;
}

클릭 가능 버튼
클릭 불가능 버튼

3.4. 일반 구조 선택자

  • 형제 관계에 있는 요소들 중 특정 요소를 선택하는 선택자
  • 위치를 기준으로 구분한다.

(1) first-of-type : 같이 선택된 요소들 중 첫번째 요소
(2) last-of-type : 같이 선택된 요소들 중 마지막 요소
(3) nth-of-type(n) : 같이 선택된 요소들 중 n번째
(4) nth-last-of-type : 뒤에서부터 n번째 요소(맨 뒤가 1)

HTML 및 CSS 예시

<div id="test1">
	<p>테스트1</p>
	<p>테스트2</p>
	<p>테스트3</p>
	<p>테스트4</p>
	<p>테스트5</p>
	<pre>테스트6</pre>
</div>
#test1 > p:first-child{
    background-color: red;
    color:  white;
}

#test1 > pre:last-child{
    background-color: orange;
}

#test1 > p:nth-child(2){
    background-color: yellow;
}


#test1 > :nth-child(2n-1){
    background-color: purple;
}

#test1 > p:nth-last-child(2n){
    background-color: hotpink;
}
p:nth-last-child(2n) 적용 Xp:nth-last-child(2n) 적용했을 때

3.5. 형태 구조 선택자

  • 선택된 형제 관계 요소들 중 "특정요소"를 선택하는 선택자
  • 선택된 요소들을 기준으로 위치를 구분

(1) first-of-type : 같이 선택된 요소들 중 첫번째 요소
(2) last-of-type : 같이 선택된 요소들 중 마지막 요소
(3) nth-of-type : 같이 선택된 요소들 중 n번째
(4) nth-last-old-type : 뒤에서부터 n번째 요소

HTML 및 CSS 예시 

<div id="test2">
	<pre>테스트0</pre>
	<p>테스트1</p>
	<p>테스트2</p>
	<p>테스트3</p>
	<p>테스트4</p>
	<p>테스트5</p>
	<pre>테스트6</pre>
</div>
#test2 > p:first-of-type{
    background-color: orange;
}

#test2 > pre:first-of-type{
    background-color: orangered;
}

#test2 > p:last-of-type{
    background-color: skyblue;
}

#test2 > p:nth-of-type(2n){
    background-color: red;
}

3.6. 부정 선택자

  • 괄호 내 선택자를 제외한 나머지 요소를 선택한다.
  • 선택자1 : not(:선택자2)

HTML 및 CSS 예시 

<ul id="test3">
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
	<li>5</li>
	<li>6</li>
</ul>
#test3 > li:nth-of-type(3n){
    background-color: pink;
}

#test3 > li:not(:nth-of-type(3n)){
    background-color: beige;
}

#test3 > li:not(:nth-of-type(2n)) {
    color: crimson;
}
형태 구조 선택자부정 선택자

3.7. only-child & only-of-type & empty

  • only-child : 특정 요소의 자식이 "하나"뿐일 때 선택하는 선택자
  • only-of-type : 특정 요소의 자식들 중 "지정된 형태와 같은" 자식 요소가 1개만 있을 때 선택
<div id="test1">
	<p>자식1</p>
	<pre>자식2</pre>
</div>
    
<div id="test2">
	<p>자식1</p>
	<pre>자식2</pre>
</div>
    
<div id="test3">
	<p><!--주석--></p>
	<p>123</p>
	<p>         </p>
<p><span>하이</span></p>
</div>
#test1 > p:only-child{
    background-color: steelblue;
}

#test2 > p:only-of-type{
    background-color: plum;
}

#test3 > p:empty{
    height: 30px;
    background-color: lime;
}
only-childonly-of-typeempty
자식이 하나가 아니라서 스타일X공백도 요소로 취급
profile
쵱뉴성
이전 포스트

[HTML] 3. HTML 태그 2

다음 포스트

[CSS] 2. CSS 박스모델 및 글자 관련 스타일

0개의 댓글