🔗 CSS

Cascading Style Sheet

  • Cascading : 중첩, 계단식, 흐른다
    • 이전 스타일에 새 스타일을 적용하면 새 스타일이 적용됨
<style>
    h1 {
      color: red; /* 이전 스타일이 무시됨 */
      color: blue;
    }
</style>

 

🔗 적용법

  1. head 태그 안에 style 태그로 적용
  2. inline 태그 : html 태그 안에 style 속성으로 적용 -> 간단하게 스타일을 적용할 때
  3. 별도의 CSS 파일로 만들어서 import 하는 방법 -> 스타일이 복잡할 때
<!DOCTYPE html>
<html lang="en">
 <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>CSS을 적용하는 3가지 방법</title>
     <link rel="stylesheet" href="mycss.css" /> /* 3번 방법: 별도의 CSS파일 이용 */
     <style>  /* 1번 방법: head 태그 안에 style 태그 이용 */
         h1 {
         color: red;
         }
     </style>
 </head>
 <body>
     <h1>제목태그 H1입니다.</h1>
     <h2 style="color: blue">제목태그 H2입니다.</h2>  /* 2번 방법: inline 태그 이용 */
     <h3>제목태그 H3입니다.</h3>
 </body>
</html>

 

 

🔗 선택자

🧩 전체 선택자 : *

* {
    color: brown;
}

 

🧩 태그 선택자 : HTML 태그명 (ex: h1, p)

h1 {
    color: tomato;
}

/* 태그를 여러개 선택: , 사용 */
h2, p {
    background-color: cornflowerblue;
}

/* body: 화면전체 */
body {
    background-color: skyblue;
}

 

🧩 id 선택자(#) : HTML 문서안의 유일한 태그(요소)를 지정할 때

id는 하나만 입력 가능

#header1 {
    color: tomato;
}
#header2 {
    color: blue;
}
.
.
.
<h1 id="header1">제목태그 H1</h1>
<h1 id="header2">제목태그 H1</h1>

 

🧩 class 선택자(.) : 유사한 여러개를 묶어서 지정할 때

class는 여러 개를 입력가능

.design {
    color: blueviolet;
}
.
.
.
<p class="design">문단태그 p</p>
<a href="#" class="design">앵커태그 a</a>

 

🧩 태그 선택자와 id, class, 선택자 연결

h1.select {
    color: aquamarine;
}
li#item {
    background-color: blanchedalmond;
}
.item {
    background-color: yellowgreen;
}
.
.
.
<h1 class="select">제목태그 H1</h1>
<h1>제목태그 H1</h1>

<ul>
    <li class="select">아이템1</li>
    <li id="item">아이템2</li>
    <li class="select">아이템3</li>
    <li class="select item">아이템4</li>
</ul>

 

🧩 속성선택자([])

input[type="text"] {
    background-color: lightcoral;
}
input[type="password"] {
    background-color: teal;
}
.
.
.
<form action="">
    <label for="id">아이디</label>
    <input type="text" id="id" /> <br />
    <label for="pw">암호</label>
    <input type="password" id="pw" />
</form>

 

🧩 후손 선택자, 직계(첫째) 선택자

상속 관계(계층) : 태그 안에 태그가 들어가는 경우
후손 : 상속 관계에서 아래의 모든 태그 (공백 문자)
직계 : 상속관계에서 바로 아래의 한 개의 태그 (> 문자)
/* 후손 관계는 공백으로 구분 */
#header h1 {
  color: tomato;
}
/* 직계 선택자는 > 이용 */
#section > h1 {
  color: teal;
}
.
.
.
<div id="header">
  <h1>제목태그 1</h1> /* color: tomato */
  <div>
      <h1>제목태그 2</h1> /* color: tomato */
  </div>
</div>
<div id="section">
  <h1>제목태그 3</h1> /* color: teal */
  <div>
      <h1>제목태그 4</h1> /* 색상 변경 X */
  </div>
</div>

 

🧩 형제(동위레벨) 선택자(+)

h2 + h1 {  /* h2 바로 뒤에 있는 h1 하나만 선택하여 글자색 변경 */
    color: tomato;
}
h1 ~ h2 {  /* h1 뒤에 있는 모든 h2를 선택하여 글자색 변경 */
    color: teal;
}
.
.
.
<h2>제목태그 h2</h2>
<h1>제목태그 h1</h1>  /* color: tomato */
<h1>제목태그 h1</h1>
/* 아래 있는 모든 h2에 대해 color: teal */
<h2>제목태그 h2-1</h2>
<h2>제목태그 h2-2</h2>
<h2>제목태그 h2-3</h2>
<h2>제목태그 h2-4</h2>
<h2>제목태그 h2-5</h2>
<h3>제목태그 h3</h3>
<h2>제목태그 h2-6</h2>

 

🧩 반응(액션) 선택자

반응: 이벤트(액션) ex) 마우스 클릭, 호버, etc...

/* hover : 마우스커서가 위로 갔을 때 */
h1:hover {
    color: teal;
}

/* active : 마우스로 클릭했을 때 */
h1:active {
    color: tomato;
}
.
.
.
/* 마우스 커서가 위로 가면 color: teal, 클릭 시 color: tomato */
<h1>반응선택자</h1>

 

🧩 상태 선택자

상태: 포커스, 활성화, 비활성화, 체크됨, 선택됨

focus: 입력 대기 상태

활성화: Enabled, 기본값, 정상 동작 상태

비활성화: Disabled, 입력(동작) 불능 상태

체크됨: checked 체크박스

선택됨: selected 선택박스

<h1>활성화 상태</h1>
<input type="text" />

<h1>비활성화 상태</h1>
<input type="text" disabled />

<h1>체크박스</h1>
<input type="checkbox" id="ck" checked />
<label for="ck">체크박스</label>

<input type="radio" id="rd" checked />
<label for="rd">라디오버튼</label>

<select id="drink">
    <option value="cola">콜라</option>
    <option value="cider" selected>사이다</option>
</select>

 

🧩 n번째 선택자 : nth-child

li:nth-child(1) {
    color: red;
}
li:nth-child(2) {
    color: blue;
}
li:first-child {
    background-color: aqua;
}
li:last-child {
    background-color: tomato;
}
.
.
.
<ul>
    <li>아이템선택1</li> /* color: red, background-color: auqa */
    <li>아이템선택2</li> /* color: blue */
    <li>아이템선택3</li>
    <li>아이템선택4</li>
    <li>아이템선택5</li> /* background-color: tomato */
</ul>

 

🧩 n번째 선택자 - n 변수 사용

/* 전부 적용 */
li:nth-child(n) {
    color: tomato;
}

/* 짝수번째만 선택 */
li:nth-child(2n) {
    background-color: teal;
}

/* 홀수번째만 선택 */
li:nth-child(2n + 1) {
    background-color: aqua;
}
.
.
.
/* 모든 아이템 color: tomato */
/* 짝수번째 아이템 background-color: teal */
/* 홀수번째 아이템 background-color: aqua */
<ul>
    <li>아이템1</li>
    <li>아이템2</li>
    <li>아이템3</li>
    <li>아이템4</li>
    <li>아이템5</li>
    <li>아이템6</li>
    <li>아이템7</li>
</ul>

 

🧩 n번째 선택자(상속관계): nth-of-type

/* 적용 안됨 */
p:nth-child(1) {
    color: red;
}

/* div 밑에 있는 모든 p 태그에서 1번째 */
div p:nth-of-type(1) {
    color: blue;
}
.
.
.
<div>
    <div>div 아이템</div>
    <p>p 아이템1</p> /* color: red(x), color: blue(o) */
    <p>p 아이템2</p>
    <p>p 아이템3</p>
</div>

 

🧩 부정선택자: not

input[type="password"] {
    background-color: red;
}
input:not([type="password"]) {
    background-color: teal;
}
body :not(h1) {
    color: green;
}
.
.
.
<input type="text" /><br />
<input type="password" /><br />
<input type="text" /><br />
<input type="password" /><br />
<h1>제목태그 h1</h1>
<p>문단태그 p</p>

 

🔗 CSS 크기 단위

📏 크기 단위 : px(픽셀), % 백분율(기본 대비), em 배수(부모 대비), rem 배수(root 대비)

 

🔗 색상 속성 값

🎨 예약어

EX) red, blue
color: red;

 

🎨 16진수 표현

EX) 0xFF00CC
color: #FF00CC;
color: #FF00CCFF /* 맨 뒤 2칸을 추가하여 불투명도 조절가능(00~FF) */

 

🎨 RGB 함수 표현

EX) rgb(0,255,255)
color: rgb(0,0,0);

 

🎨 RGBA 함수 표현

EX) rgba(0,255,255,0.5)
color: rgba(255, 255, 255, 0.5);

 

✈️ 출처

한국경제신문 x 토스뱅크 풀스택 훈련

 

'프론트엔드 > CSS' 카테고리의 다른 글

Tailwind 어떻게 쓰는건데?  (0) 2025.01.15
CSS 중급 III  (0) 2025.01.14
CSS 중급 II  (0) 2025.01.13
CSS 중급  (1) 2025.01.12
CSS 기초 II  (1) 2025.01.09

티스토리툴바