태그: CSS
14편
-
CSS 선택자: 속성 선택자, 가상 클래스, :has()까지
속성 선택자의 ^= $= *= 차이와 i 플래그, :focus-visible·:nth-child(An+B of S)·:has() 같은 가상 클래스, 특이도 계산과 :is/:where의 차이까지 예제로 짚어 봅니다.
-
Tailwind CSS 실전: 유틸리티 우선 방식 적응, 반응형·상태 변형, 다크 모드, @apply 재사용
Tailwind CSS 사용법 정리. Bootstrap과의 차이, 유틸리티 우선 방식에 적응하는 과정, 설치와 기본 사용, 반응형 디자인, 상태 변형, 다크 모드, 커스터마이징, @apply로 클래스 재사용을 예제로 다룹니다.
-
CSS position 심화 | 포함 블록, 쌓임 맥락, 레이아웃 영향
position은 “어디에 붙일지”만이 아니라, 요소가 일반 문서 흐름(normal flow)에 남을지 이탈할지를 결정합니다. 이탈한 박스는 부모의 블록 레벨 세로 배치에서 빠지며, 형제와의 마진 병합 관계도 달라집니다.
-
CSS 깊이 보기: 특이성·캐스케이드·박스 모델·쌓임 맥락과 실무 패턴
스타일이 왜 적용되지 않는지 추적하려면 특이성 계산, 캐스케이드 순서, 박스 모델과 마진 병합, 스택킹 컨텍스트를 알아야 합니다. 각 규칙을 예제로 설명하고 @layer, 논리 속성, clamp(), 컨테이너 쿼리를 활용한 실무 패턴도 소개합니다.
-
Sass(SCSS) 활용: 변수, 중첩, Mixin, 함수, @use 모듈, Partials와 빌드 연동
Sass(SCSS)의 변수·중첩·Mixin·함수로 반복되는 CSS를 줄이고, @import 대신 @use로 모듈을 나누는 방법과 Partials 구성, Webpack·Vite 연동, 버튼 컴포넌트까지 포함한 작은 디자인 시스템 예제를 다룹니다.
-
PostCSS 플러그인 활용: Autoprefixer, CSS Nesting, CSS Modules, Webpack·Vite·Tailwind 연동
PostCSS로 CSS를 변환하는 방법. 설치와 기본 설정, Autoprefixer, CSS Nesting, CSS Modules, Webpack·Vite 통합, Tailwind CSS 연동을 예제로 정리합니다.
-
CSS 애니메이션 | Transition, Animation, Transform
transition 타이밍 함수, 2D·3D transform과 perspective, @keyframes 애니메이션 속성을 버튼 효과·로딩 스피너·카드 플립 예제로 익히고, 60fps를 지키기 위한 GPU 가속 속성과 will-change 사용 기준을 설명합니다.
-
CSS 기초 | 선택자, 속성, 색상, 폰트
CSS 선택자, 색상 표현, 웹 폰트, 텍스트 오버플로우, px·rem·em 단위, CSS 변수를 예제로 익히고 같은 요소에 여러 규칙이 겹칠 때 캐스케이드와 특이도로 값이 결정되는 과정을 설명합니다.
-
CSS 박스 모델: margin, padding, border와 box-sizing
박스 모델·사용값·퍼센트 기준·BFC·마진 병합·box-sizing까지. 레이아웃 엔진이 너비·마진을 확정하는 순서와 병합이 끊기는 조건을 고급 관점에서 정리합니다. CSS 박스 모델은 모든 HTML 요소를 상자로 보는 관점입니다. 내용물(Content)은 상자 안 물건, padding은 완충재, border는 상자 테두리, margin은 상자 바깥의 간격이라고 이해하시면 레이아웃이 잡힙니다.
-
CSS Flexbox 입문: flex-direction, justify-content, align-items로 레이아웃 잡기
CSS Flexbox 기초 정리. Flexbox 기본 개념, flex-direction, justify-content와 align-items 정렬, flex-wrap, flex 아이템 속성을 예제로 설명합니다.
-
CSS Grid 레이아웃: grid-template-areas, fr·minmax·auto-fit, Flexbox와 함께 쓰기
CSS Grid 정리. display: grid와 grid-template 설정, grid-template-areas, fr·gap·repeat·minmax·auto-fit, 아이템 배치와 정렬, 대시보드 레이아웃 예제와 Flexbox 조합을 다룹니다.
-
반응형 웹 디자인 | 미디어 쿼리와 모바일 최적화
viewport 메타 태그 설정부터 미디어 쿼리 브레이크포인트, srcset과 picture를 이용한 반응형 이미지, clamp()로 만드는 유동 타이포그래피, Container Queries까지 모바일 대응 레이아웃을 예제로 구성합니다.
-
HTML/CSS 시작하기 | 웹 개발 첫걸음
웹 개발을 처음 시작하는 사람을 위해 VS Code를 설치하고 첫 HTML 파일을 만든 뒤, HTML 기본 구조와 주요 태그, CSS를 연결하는 세 가지 방법과 선택자 문법을 익힙니다. 명함 페이지와 블로그 글 예제, Chrome DevTools 사용법도 다룹니다.
-
HTML/CSS 시리즈 전체 목차 | 웹 프론트엔드 기초부터 실전까지
HTML 기본 태그와 CSS 기초에서 시작해 박스 모델, Position, Flexbox, Grid, 반응형 디자인, 애니메이션으로 이어지는 HTML/CSS 시리즈의 각 편 내용과 초급·중급·고급 학습 경로를 안내합니다.