정정지용
기술스택 목록
프론트엔드

CSS

프로젝트 1개에서 사용했습니다. 각 프로젝트에서 어떤 역할로 썼는지 아래에 정리했습니다.

이 기술은 무엇인가요?

웹 페이지의 시각적 표현(색상, 레이아웃, 폰트 등)을 정의하는 스타일시트 언어

CSS(Cascading Style Sheets)는 HTML 문서의 외형을 꾸미기 위한 언어입니다. HTML이 문서의 구조와 내용을 담당한다면, CSS는 그 구조를 어떻게 화면에 표시할지(색상, 크기, 위치, 애니메이션 등)를 선언적으로 기술합니다. 스타일을 별도 파일로 분리해 관리할 수 있어 유지보수와 재사용성이 높아지며, 동일한 HTML 구조에 다른 CSS를 적용해 완전히 다른 디자인을 만들 수 있습니다.

이럴 때 사용합니다

  • HTML 문서의 시각적 표현을 구조와 분리해 관리하고 싶을 때
  • 동일한 스타일을 여러 페이지에 일관되게 적용해야 할 때
  • 다양한 화면 크기에 대응하는 반응형 디자인이 필요할 때
  • 애니메이션이나 인터랙티브한 UI 효과를 선언적으로 구현하고 싶을 때

핵심 개념

Selector
스타일을 적용할 HTML 요소를 선택하는 패턴입니다. 태그명, 클래스, ID, 속성 등 다양한 조건으로 대상을 지정할 수 있습니다.
Box Model
모든 HTML 요소는 content, padding, border, margin 네 영역으로 구성된 박스로 취급됩니다. 이 개념은 레이아웃 계산의 기초가 됩니다.
Cascading
여러 규칙이 같은 요소에 적용될 때, 우선순위(specificity)와 출처에 따라 최종 스타일이 결정되는 메커니즘입니다.
Flexbox
1차원(행 또는 열) 방향으로 요소를 유연하게 배치하는 레이아웃 모델입니다. 요소 정렬과 공간 분배를 직관적으로 제어할 수 있습니다.
Grid
2차원(행과 열) 격자 구조로 레이아웃을 구성하는 시스템입니다. 복잡한 페이지 레이아웃을 간결하게 표현할 수 있습니다.
Media Query
화면 크기, 해상도 등 환경 조건에 따라 다른 스타일을 적용하는 기능입니다. 반응형 웹 디자인의 핵심 도구입니다.

기본 스타일 적용

선택자로 요소를 지정하고, 속성-값 쌍으로 스타일을 정의합니다. 미디어 쿼리로 화면 크기에 따라 다른 스타일을 적용할 수 있습니다.

예시
/* 모든 h1 요소에 스타일 적용 */
h1 {
  color: #333;
  font-size: 2rem;
  margin-bottom: 1rem;
}

/* .card 클래스를 가진 요소에 박스 스타일 */
.card {
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background-color: white;
}

/* 768px 이하 화면에서 다른 레이아웃 */
@media (max-width: 768px) {
  .card {
    padding: 10px;
  }
}

처음 쓸 때 흔한 함정

  • Specificity를 이해하지 못해 의도한 스타일이 적용되지 않는 경우
  • Box Model을 모르고 width/height를 설정해 예상과 다른 크기가 나오는 문제
  • Cascading 순서를 무시하고 !important를 남발해 유지보수가 어려워지는 상황

위 개요는 기술 학습을 돕기 위해 자동 생성된 일반 설명입니다. 정확한 사양과 최신 정보는 공식 문서를 확인하세요.

프로젝트별 활용 방식

위 개념이 실제 프로젝트에서 어떻게 쓰였는지 보여줍니다.

함께 사용한 기술

위 프로젝트들에서 같이 쓰인 다른 기술입니다.

Claude Code CLIHTMLJavaScriptNode.js