CSS

#it #개발 #웹개발 #스타일시트 #프론트엔드 #css #웹디자인 #header #333 #ddd #f5f5f5

기본 정보

이름: 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 우선순위

!important
인라인 스타일
ID 선택자
클래스 선택자
태그 선택자

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

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

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과 디자인 분리
유지보수가 쉬움
반응형 웹 구현 가능
애니메이션 지원
재사용성이 높음

단점

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

실무 메모

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

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

출처

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