CSS

기본 정보

• 이름: CSS (Cascading Style Sheets)
• 분류: 스타일시트 언어
• 최초 공개: 1996년
• 관리 기관: W3C
• 주요 용도: 웹페이지 디자인 및 레이아웃 구성
• 관련 주제: #CSS #웹디자인 #프론트엔드 #스타일시트

개요

CSS(Cascading Style Sheets)는 HTML 문서의 색상, 글꼴, 크기, 배치, 애니메이션 등 시각적인 표현을 담당하는 스타일시트 언어이다.

HTML이 문서의 구조를 담당한다면, CSS는 디자인과 레이아웃을 담당하며 JavaScript와 함께 현대 웹 개발의 핵심 기술 중 하나이다.

주요 특징

• HTML과 디자인 분리
• 반응형 웹 구현 가능
• 다양한 애니메이션 지원
• 유지보수가 용이
• 재사용 가능한 스타일 작성 가능
• 웹 표준 지원

CSS 적용 방법

인라인 방식

<p style="color:red;">Hello CSS</p>

내부 스타일

<style>

p{
    color:red;
}

</style>

외부 스타일 (권장)

<link rel="stylesheet" href="style.css">

기본 문법

h1{
    color:red;
    font-size:40px;
}

구성

• 선택자(selector)
• 속성(property)
• 값(value)

선택자

태그 선택자

p{
    color:blue;
}

클래스 선택자

.title{
    color:red;
}

<h1 class="title">
안녕하세요
</h1>

아이디 선택자

#header{
    background:#333;
}

<div id="header">

</div>

자식 선택자

.menu > li{
    color:red;
}

후손 선택자

.menu li{
    color:red;
}

글자 스타일

font-size:16px;

font-weight:bold;

font-family:"Noto Sans KR";

color:#333;

line-height:1.8;

text-align:center;

박스 모델

모든 HTML 요소는 Box Model을 가진다.

width:300px;

height:100px;

padding:20px;

border:1px solid #ddd;

margin:20px;

구성

• Content
• Padding
• Border
• Margin

Display

display:block;

display:inline;

display:inline-block;

display:flex;

display:grid;

display:none;

Flexbox

.container{

display:flex;

justify-content:center;

align-items:center;

gap:20px;

}

주요 속성

• justify-content
• align-items
• flex-direction
• flex-wrap
• gap

실무에서 가장 많이 사용하는 레이아웃 방식 중 하나이다.

Grid

.container{

display:grid;

grid-template-columns:1fr 1fr 1fr;

gap:20px;

}

복잡한 레이아웃 구성에 적합하다.

Position

position:static;

position:relative;

position:absolute;

position:fixed;

position:sticky;

배경

background:#f5f5f5;

background-image:url(bg.jpg);

background-size:cover;

background-position:center;

Border Radius

border-radius:10px;

원형

border-radius:50%;

Box Shadow

box-shadow:

0 5px 20px rgba(0,0,0,.15);

카드 UI에서 자주 사용된다.

Transition

transition:.3s;

button:hover{

background:red;

}

Animation

@keyframes fade{

from{

opacity:0;

}

to{

opacity:1;

}

}

.box{

animation:fade 1s;

}

Media Query

@media(max-width:768px){

.menu{

display:none;

}

}

모바일 반응형 웹 구현에 사용된다.

CSS 우선순위

1. !important
2. 인라인 스타일
3. ID 선택자
4. 클래스 선택자
5. 태그 선택자

동일한 선택자일 경우 아래에 작성된 코드가 우선 적용된다.

실무에서 자주 사용하는 속성

display:flex;

justify-content:center;

align-items:center;

gap:10px;

overflow:hidden;

cursor:pointer;

z-index:999;

opacity:.8;

transform:scale(1.05);

transition:.2s;

CSS 프레임워크

• Bootstrap
• Tailwind CSS
• Bulma
• Foundation
• Material UI

CSS 전처리기

• Sass
• SCSS
• Less

CSS와 함께 사용하는 기술

• HTML
• JavaScript
• PHP
• React
• Vue.js
• Figma

장점

• HTML과 디자인 분리
• 유지보수가 쉬움
• 반응형 웹 구현 가능
• 애니메이션 지원
• 재사용성이 높음

단점

• 프로젝트가 커질수록 관리가 어려워질 수 있음
• 선택자 충돌 가능성
• 브라우저별 호환성 고려 필요

실무 메모

실무에서는 다음과 같은 방식이 권장된다.

• BEM 네이밍 규칙 사용
• display:flex 우선 활용
• CSS 변수(:root) 적극 사용
• 공통 스타일 분리
• rem 단위 사용 권장
• box-sizing:border-box 기본 적용
• 다크모드 고려
• 반응형 디자인을 기본으로 개발

관련 문서

• HTML
• JavaScript
• 웹개발
• 프론트엔드
• Bootstrap
• Tailwind CSS
• Sass
• React
• Vue.js
• Figma

출처

• MDN Web Docs - CSS
• W3C CSS Specification
• 위키백과 「CSS」