[CSS] 기초 정리

Yumya's record·2025년 3월 13일

CSS SK SKALA SKALA1기

SKALA

목록 보기

6/25

🐣 CSS 기초 헷갈리는 것 위주 정리 🐣

CSS

웹 페이지의 스타일을 정의하는 스타일시트 언어
HTML로 구조화된 컨텐츠의 디자인, 레이아웃, 색상 등을 지정하는데 사용
++ 애니메이션 효과도 가능

기본 구문

선택자

스타일을 적용할 HTML 요소 지정해 스타일을 적용하는 선언 방식

1. 요소 선택자

특정 HTML 태그에 스타일을 적용

h1 { color : red; } 
/* h1 태그의 글자 색 설정 */

<h1>이 글씨는 빨간색</h1>

2. 클래스 선택자

특정 클래스 속성을 가진 요소에 스타일 적용

.className { color : red; } 
/* className이라는 클래스를 가진 요소에 스타일 적용 */

<p class="className">이 글자는 빨간색</p>

3. 아이디 선택자

특정 아이디를 가진 요소에 스타일 적용

#idName { color : red; } 
/* idName라는 아이디를 가진 요소에 스타일 적용 */

<p id="idName">이 글자는 빨간색</p>

4. 유니버설 선택자

모든 요소를 선택해 스타일 적용

* { color : red; } 
/* 모든 요소에 스타일 적용 */

5. 그룹화 선택자

여러 선택자를 그룹화해 한 번에 스타일 적용

h1, h2, h3 { color : red; } 
/* h1~3에 스타일 적용 */

<h1>이 글씨는 빨간색</h1>
<h2>이 글씨도 빨간색</h2>
<h3>이 글씨 또한 빨간색</h3>

6. 자식 선택자

직접 자식 요소를 선택해 스타일 적용
자식 요소는 div 안에 있는 요소이며, div 내 다른 태그 안에 있는 요소의 경우 자식 요소가 아님

div > p { color : red; } 
/* div의 p 태그 요소에 스타일 적용 */

<div>
  <p>이 문장은 빨간색</p>
  <section>
    <p>이 문장은 영향을 받지 않음</p>
  </section>
</div>

7. 후손 선택자

자식뿐만 아니라 모든 후손 요소를 선택해 스타일 적용
후손 요소는 div 안에 있는 모든 태그

div p { color : red; } 
-> div 내 모든 p 태그 요소에 스타일 적용 */

<div>
  <p>이 문장은 빨간색</p>
  <section>
    <p>이 문장도 빨간색</p>
  </section>
</div>

8. 인접 형제 선택자

특정 요소 바로 다음에 위치한 형제 요소를 선택해 스타일 적용

h1 + p { color : red; }
/* h1 바로 다음에 위치한 p 태그 요소에 스타일 적용 */

<h1>제목</h1>
<p>이 문장은 빨간색</p>
<p>이 문장은 영향을 받지 않음</p>

9. 일반 형제 선택자

특정 요소 뒤에 있는 모든 형제 요소 선택해 스타일 적용

h1 ~ p { color : red; } 
/* h1 뒤에 있는 모든 p 태그 요소에 스타일 적용 */

<h1>제목</h1>
<p>이 문장은 빨간색</p>
<p>이 문장도 빨간색</p>

10. 속성 선택자

특정 속성을 가진 요소 선택해 스타일 적용

a[href] { color : red; } 
/* 링크가 있는 모든 하이퍼 링크에 스타일 적용 */

<style>
  a[href="https://google.com"] { color: red; }
</style>

<a href="https://google.com">구글 빨간색 링크</a>
<a href="https://naver.com">네이버 빨간색 링크</a>

11. 속성 값 선택자

특정 속성 값이 일치하는 요소를 선택해 스타일 적용

a[href="https://google.com"] { color : red; } 
/* 구글 링크에 해당하는 하이퍼 링크에 스타일 적용 */

<style>
  a[href="https://google.com"] { color: red; }
</style>

<a href="https://google.com">구글 빨간색 링크</a>

12. 가상 클래스 선택자

이벤트, 행위에 의해 달라지도록 설정해 스타일 적용

:hover - 요소 위에 마우스가 있을 때 선택
ex) a:hover { color : red; }

: first-child - 부모 요소의 첫 번째 자식을 선택
ex) p:first-child { color : red; }

:last-child - 부모 요소의 마지막 자식을 선택
ex) p:last-child { color : red; }

:nth-child(n) - 부모 요소의 n번째 자식을 선택
ex) li:nth-child(2) { color : red; }

:not() - 지정된 조건에 맞지 않는 요소를 선택
ex) p:not(.special) { color : red; }

::before - 요소의 내용 앞에 가상 요소를 삽입, 렌더링 전
ex) p::before { content : "내용"; }

::after - 요소의 내용 뒤에 가상 요소를 삽입, 렌더링 후
ex) p::after { content : "내용"; }

선택자 적용 순서
전체 선택자 > 태그 선택자 > 가상 요소 선택자 > 클래스 선택자 > 가상 클래스 선택자 > 아이디 선택자 > 인라인 스타일

선택자는 선택자끼리 조합이 가능함

속성

스타일을 적용할 특성을 정의
ex) color, font-size, background-color

위치 속성

static : 기본 위치
relative : 자신이 원래 위치를 기준으로 이동
absolute : 위치가 지정된 근접 부모 요소를 기준으로 이동
fixed : 화면에 고정된 위치에 배치
sticky : 스크롤에 따라 위치가 고정, 이동

상속

부모 태그의 속성이 자식 태그로 전달

값

속성에 대한 구체적인 값 정의
ex) red, 16px, #RGB

!important

특정 스타일 규칙을 강제로 우선 적용하도록 하는 키워드
스타일 시트에서 여러 규칙이 충돌할 때, !important가 적용된 규칙이 가장 우선적으로 강제 적용

사용 시 디버깅과 유지 보수가 어려우며, 가독성이 감소됨

태그 요소의 박스 모델

Margin : 요소와 다른 요소 사이의 간격 설정
Padding : 컨텐츠와 경계 사이의 간격 설정
Border : 요소의 경계 설정
Content : 요소의 실제 내용이 들어가는 영역

블록 요소와 인라인 요소

블록 요소
: 화면에서 새로운 줄 차지
width, height 속성 사용
ex) <div>, <section>
인라인 요소
: 줄 안에 배치
width, height 속성 사용 불가
ex) <span>, <a>

FlexBox

Flex 컨테이너의 display 속성이 flex로 지정된 부모 요소

item : Flex container 내의 자식 요소
주요 속성
- justify-content : 아이템의 주 축(수평) 정렬 방식
- align-items : 아이템의 교차 축(수직) 정렬 방식

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

<style>
  .container {
    display: flex;
  }
  .item {
    background: lightblue;
    padding: 10px;
    margin: 5px;
  }
</style>

Grid Layout

Flex 컨테이너의 display 속성이 grid로 지정된 부모 요소

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

<style>
  .container {
    display: grid;
  }
  .item {
  	grid-column: 1 / 3; /* 1번째부터 3번째 열까지 차지 */
  	grid-row: 1 / 3; /* 1번째부터 3번째 행까지 차지 */
  }
</style>

Grid

2차원 레이아웃 시스템으로, 행(row)과 열(column)을 쉽게 조정할 수 있는 레이아웃
격자 기반으로 생성

FlexBox vs Grid Layout

FlexBox	Grid Layout
1차원 레이아웃에 사용	2차원 레이아웃에 적합
컨텐츠 중심 레이아웃 설계	전체 페이지, 섹션 레이아웃에 적합
justify-content, align-items 등으로 정렬	grid-template으로 전체 레이아웃 정의

Lorem lpsum

채우기 텍스트(Filler Text)
논리적 의미를 가지지 않으며, VS Code에서 lorem을 입력하고 Tab 키를 눌러 생성 가능

lorem -> 30개 단어
lorem10 -> 10개 단어

Moving

Transform

요소를 회전, 크기 조정, 이동, 기울이는데 사용

.box {
  width: 100px;
  height: 100px;
  background-color: blue;
  transform: rotate(45deg); /* 45도 회전 */
}

Transition

상태 변화 시 효과 설정

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: background-color 0.5s ease-in-out; /* 색상이 0.5초 동안 변화 */
}

.box:hover {
  background-color: blue; /* 마우스를 올리면 색상 변경 */
}

Animation

@keyframes를 사용하여 애니메이션을 정의하고, animation 속성을 적용

@keyframes moveBox { /* 박스가 좌우로 움직이는 애니메이션 */
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(100px); /* 오른쪽으로 100px 이동 */
    /* translateX(-100px)일 경우 왼쪽으로 100px 이동 */
  }
  100% {
    transform: translateX(0);
  }
}

.box {
  width: 100px;
  height: 100px;
  background-color: green;
  position: relative;
  animation: moveBox 2s infinite ease-in-out; /* 2초 동안 반복 */
}

미디어 쿼리

화면 크기나 디바이스 유형에 따라 CSS 스타일을 다르게 적용할 수 있는 기능
반응형 웹(모바일, 태블릿, PC)에 필수
여러 개의 미디어 쿼리 함께 사용 가능

@media (조건) {
  /* 조건을 만족할 때 적용할 CSS */
}

조건

min-width : 모바일 퍼스트
max-width : 데스크톱 퍼스트
min-width, max-width 모두 사용 : 해상도 별 지정, override 사용 X

자주 쓰는 조건

max-width: 600px - 화면 너비가 600px 이하일 때 적용
min-width: 768px - 화면 너비가 768px 이상일 때 적용
max-height: 500px - 화면 높이가 500px 이하일 때 적용
orientation: portrait - 세로 모드일 때 적용
orientation: landscape - 가로 모드일 때 적용

모바일 퍼스트

/* Default CSS */
/* Mobile - Portrait */

/* Mobile - Landscape */
@media (min-width: 576px) {}

/* Tablet */
@media (min-width: 768px) {}

/* Desktop */
@media (min-width: 992px) {}

/* Desktop (Large) */
@media (min-width: 1200px) {}

데스크톱 퍼스트

모바일 활성화 전 사용하던 옛날 방식

/* Mobile - Portrait */
@media (max-width: 575px) {}

/* Mobile - Landscape */
@media (max-width: 767px) {}

/* Tablet */
@media (max-width: 991px) {}

/* Desktop */
@media (max-width: 1199px) {}

/* Default CSS */

해상도 범위 지정

디바이스 별로 css 적용 가능

/* Mobile - Portrait */
@media (max-width: 575px) {}

/* Mobile - Landscape */
@media (min-width: 576px) and (max-width: 767px) {}

/* Tablet */
@media (min-width: 768px) and (max-width: 991px) {}

/* Desktop */
@media (min-width: 992px) and (max-width: 1199px) {}

/* Desktop (Large) */
@media (min-width: 1200px) {}

설정

<head> 태그 사이에 meta viewport 작성

참고-미디어 쿼리

Mobile-First Design

기본 스타일을 모바일 크기에 맞추고, 더 큰 디바이스에 추가 스타일을 적용 -> 모바일 화면을 기준으로 화면이 커질수록 스타일을 추가

기본 스타일 (모바일)

body {
  font-size: 16px;
  background-color: lightblue;
}

.container {
  width: 100%;
  padding: 20px;
  text-align: center;
}

태블릿(768px 이상)

@media (min-width: 768px) { /* 반응형으로 동작 */
  body {
    font-size: 18px; /* 폰트 사이즈 2px 늘어남 */
    background-color: lightgreen; /* 색깔 변경 */
  }
  
  .container {
    max-width: 600px;
    margin: auto;
  }
}

데스크탑(1024px 이상)

@media (min-width: 1024px) { /* 반응형으로 동작 */
  body {
    font-size: 20px; /* 폰트 사이즈 2px 늘어남 */
    background-color: lightcoral; /* 색깔 변경 */
  }

  .container {
    max-width: 800px;
  }
}

-> 화면이 커질수록 min-width 스타일을 추가

사용자 정의 변수

--변수 명으로 선언
var(--변수 명)으로 사용

:root { /* 전역에서 사용할 CSS 변수 정의 */
  --main-color: #3498db; /* 파란색을 변수로 저장 */
  --text-color: white; /* 하얀색을 변수로 저장 */
  --padding-size: 20px; /* 20px를 변수로 저장 */
}

.box {
  background-color: var(--main-color); /* 변수 값을 불러와 사용 */
  color: var(--text-color); 
  padding: var(--padding-size);
  text-align: center;
  width: 200px;
}

사용자 정의 변수 장점

코드 재사용성
일괄 수정 편리

CSS 전처리기

CSS를 더 효율적으로 작성할 수 있도록 확장된 기능을 제공하는 도구

변수 : 재사용 가능한 값 정의
중첩(Nesting) : 계층적 구조
믹스인(Mixin) : 재사용 가능한 스타일 블록
확장(Extend) : 기존 스타일 상속

SCSS

CSS 문법과 호환되는 CSS 전처리기
중괄호 {}, 세미콜론 ; 필요
.scss 확장자 사용

$main-color: #3498db;  /* 변수 선언 */

.box { /* 중괄호 사용 */
  background-color: $main-color; /* 세미콜론 필요 */
  width: 200px;
  height: 200px;

  h1 { /* 계층적 구조 */
    color: white;
    font-size: 20px;
  }
}

SASS

간결한 문법을 제공하는 CSS 전처리기
중괄호 {}, 세미콜론 ; 필요X
.sass 확장자 사용

$main-color: #3498db /* 변수 선언 */

.box
  background-color: $main-color /* 들여쓰기 사용 */
  width: 200px
  height: 200px

  h1 /* 계층적 구조 */
    color: white
    font-size: 20px

SCSS와 SASS는 CSS를 더 효율적으로 작성할 수 있게 도와주는 스타일링 확장 언어이며, 현재는 SCSS가 인기임

참고를 제외한 예시 및 설명은 챗지피티를 기반으로 작성하였습니다.

Yumya's record

🍀 ٩(ˊᗜˋ*)و 🍀

이전 포스트

[HTML] 기초 정리

다음 포스트