본문 바로가기

StyleSheet/CSS

(29)
[CSS] 웹 프론트엔드 CSS 총정리 및 학습 로드맵CSS 실전 웹 UI 프로젝트 (모달, 스크롤, SEO 최적화) CSS 36부작 에필로그 - 레이아웃의 진화 역사와 CSS가 맞이할 위대한 미래 로드맵대장정이 끝났습니다. 브라우저가 기본적으로 제공하는 끔찍한 파란색 굴림체 링크 밑줄을 없애기 위해 text-decoration: none을 적어 넣던 아주 기초적인 첫 포스팅부터 시작하여, Box Model의 물리적 크기를 뜯어보고, display: flex와 display: grid로 1차원과 2차원 바둑판 레이아웃을 정복했으며, z-index 9999의 비극인 Stacking Context를 격파했습니다. 그리고 Tailwind CSS, Styled-components 같은 현대 모던 프론트엔드의 거대한 패러다임 전환과 .sr-only를 통한 구글 SEO/접근성 최적화에 이르기까지, 여러분은 무려 35개의 거대한 프..
[CSS] CSS 실전 웹 UI 프로젝트 (모달, 스크롤, SEO 최적화) CSS Scroll Snap & Behavior - 자바스크립트를 버리고 틱톡(TikTok) 뷰어와 스무스 스크롤을 창조하다웹사이트 최상단에 있는 네비게이션 바에서 'Contact Us(오시는 길)' 메뉴를 클릭했을 때, 페이지 맨 밑바닥까지 부드럽게 미끄러지듯 스크롤되어 내려가는 유려한 '스무스 스크롤(Smooth Scroll)' 효과를 기억하십니까? 불과 5년 전만 하더라도 이 기능을 구현하려면 jQuery 라이브러리를 통째로 임포트(Import)하고 animate({scrollTop: ...})라는 수십 줄의 자바스크립트 코드를 짜야만 했습니다. 또한 화면을 스와이프할 때마다 자석처럼 다음 사진으로 찰칵! 하고 화면이 딱딱 정렬되어 멈추는 넷플릭스의 가로 캐러셀(Carousel)이나 틱톡(TikTo..
[CSS] 성능 최적화와 디버깅 크로스 브라우징과 벤더 프리픽스 (Vendor Prefix)이번 포스팅에서는 [CSS 실무 유지보수] 파트의 세부 주제인 구형 브라우저 대응과 지원 기능 판별에 대하여 상세히 알아보겠습니다.1. 벤더 프리픽스의 원리와 자동화 도구최신 CSS 스펙이 공식 표준으로 채택되기 전, 브라우저 제조사들이 자신들의 엔진에 실험적으로 기능을 구현할 때 접두사를 붙입니다. (-webkit-: Chrome/Safari, -moz-: Firefox, -ms-: IE/Edge)이런 것들을 일일이 손으로 쓰는 것은 불가능에 가깝습니다. 실무에서는 반드시 Autoprefixer(PostCSS 플러그인) 같은 도구를 빌드 파이프라인에 연결하여 코딩 시에는 표준 CSS만 작성하도록 자동화해야 합니다.2. 조건문(Feature Qu..
[CSS] 현대적인 CSS 프레임워크와 도구 Tailwind CSS 프레임워크 - 유틸리티 퍼스트(Utility-First) 혁명, CSS 파일을 삭제하다지난 수십 년 동안 웹 개발자들은 암묵적인 절대 규칙(국룰) 하나를 목숨처럼 지켜왔습니다. "HTML은 문서의 뼈대만 짜고, CSS 파일은 철저하게 분리(Separation of Concerns)해서 디자인을 따로 입혀라." 이 원칙 때문에 우리는 HTML 요소에 class="card-profile" 같은 의미론적(Semantic)인 예쁜 이름을 지어주고, 다시 style.css 파일을 열어 .card-profile { border-radius: 8px; box-shadow: ... }라고 길고 지루한 스타일을 앵무새처럼 반복해서 타이핑해야 했습니다. 파일 두 개를 번갈아 열어가며 코딩하는 피로감..
[CSS] CSS 아키텍처와 방법론 (BEM, Sass/SCSS) CSS 방법론(Architecture) - BEM과 OOCSS, 덮어쓰기 지옥에서 살아남는 클래스 네이밍의 예술프로그래머 역사상 가장 해결하기 어려운 두 가지 난제는 "캐시 무효화(Cache Invalidation)"와 "이름 짓기(Naming Things)"라는 유명한 격언이 있습니다. HTML/CSS를 처음 배우는 초보자들은 .btn, .box, .title처럼 직관적이고 짧은 클래스 이름을 짓는 데 행복을 느낍니다. 하지만 실무에 투입되어 수만 줄의 CSS가 얽혀있는 대규모 프로젝트를 마주하게 되면, 이 짧고 낭만적인 클래스 이름들은 끔찍한 재앙의 씨앗이 됩니다. 어제 로그인 페이지의 .title 글씨를 빨간색으로 바꿨더니, 오늘 메인 페이지의 상품 목록 .title 마저 모조리 피눈물을 흘리며 빨..
[CSS] CSS 변수(Variables)와 테마 관리 CSS Variables (사용자 지정 속성) - 하드코딩의 늪에서 벗어나 동적 테마를 지배하다과거 웹 개발자들은 웹사이트 전체의 메인 컬러(예: 브랜드 컬러인 파란색 #1da1f2)를 적용하기 위해 수백 개의 CSS 클래스에 color: #1da1f2;를 복사해서 붙여넣었습니다. 어느 날 기획자가 "브랜드 컬러를 약간 보라색 톤으로 바꿔주세요"라고 요청하면, 개발자는 프로젝트 전체를 뒤져가며 수백 개의 코드를 일일이 찾아 바꾸는(Find & Replace) 지옥 같은 막노동을 해야만 했습니다. 프로그래밍의 제1 원칙인 DRY(Don't Repeat Yourself, 중복 금지)가 완전히 박살 난 상태였죠.이를 해결하기 위해 Sass(SCSS)나 Less 같은 CSS 전처리기(Preprocessor)들이..
[CSS] CSS 애니메이션 완벽 가이드 (Transform, Transition, Keyframes) CSS Transition(트랜지션) - 뚝뚝 끊기는 화면에 '시간'의 부드러움을 불어넣는 마술자바스크립트(JS)의 화려함 없이, 오직 CSS와 HTML만으로 짜인 웹사이트를 처음 배포했을 때의 기억을 떠올려 보십시오. 파란색 버튼 위에 마우스를 :hover 하는 순간 배경색이 빨간색으로 바뀌도록 코드를 짰을 것입니다. 코드는 완벽하게 동작하지만, 결과물은 어딘가 묘하게 촌스럽고 투박하게 느껴집니다. 왜 그럴까요? 마우스가 올라가는 0.001초의 찰나에 파란색이 빨간색으로 '팍!' 하고 점프하듯 변해버리기 때문입니다. 현실 세계에서 사물이 이동하거나 변할 때는 무조건 '시간(Time)'이 걸립니다.빛조차도 지구에 도달하는 데 8분이 걸리는데, 브라우저 화면의 픽셀이 시간의 흐름 없이 순간 이동(Telep..
[CSS] 시각적 효과와 꾸미기 (그림자, 필터, 다크 모드) CSS 시각 효과 - 그림자(Shadow)와 필터(Filter)로 2D 화면에 3D 공간감을 불어넣다우리가 매일 쳐다보는 모니터나 스마트폰 화면은 물리적으로 완벽하게 평평한 2D(2차원) 평면입니다. 하지만 애플(Apple)의 iOS UI나 구글의 머티리얼 디자인(Material Design)을 보면, 버튼들이 공중에 살짝 떠 있는 것 같기도 하고, 뒤에 있는 배경이 반투명한 유리창(Glassmorphism)을 댄 것처럼 은은하게 번져 보이기도 합니다. 어떻게 물리적인 평면 디스플레이에서 이런 깊이감(Depth)과 3차원적 질감을 느끼게 할 수 있을까요? 그것은 바로 프론트엔드 개발자들이 박스 주변에 미세한 '그림자(Shadow)'를 흩뿌리고, 요소 전체에 포토샵 뺨치는 '필터(Filter)' 마법을 걸..
[CSS] 반응형 웹디자인 (미디어 쿼리, 컨테이너 쿼리) CSS Media Queries - 모바일 퍼스트 철학과 반응형 웹(Responsive Web)의 심장2010년 이전의 웹 개발자들에게 세상은 참으로 평온했습니다. 사용자들이 웹사이트에 접속하는 기기라고는 오직 책상 위에 놓인 커다란 1024x768 또는 1280x1024 해상도의 PC 모니터밖에 없었기 때문입니다. 개발자들은 화면을 가로 980px 픽셀로 고정(Fixed)시켜 놓고, 그 안에 로고와 메뉴, 본문을 예쁘게 배치하기만 하면 일이 끝났습니다. 그러나 스티브 잡스가 아이폰(iPhone)을 세상에 내놓으며 모바일 혁명이 시작되자, 평화롭던 프론트엔드 세계에 헬게이트가 열렸습니다. PC용으로 만든 980px짜리 거대한 웹사이트를 320px짜리 조그만 스마트폰 화면으로 욱여넣으려니, 글씨는 깨알만 ..
[CSS] Grid Layout - 2차원 레이아웃 마스터 클래스 CSS Grid (1편: 기초) - Flexbox의 한계를 박살 내는 2차원 바둑판 레이아웃의 탄생이전 포스팅에서 우리는 레이아웃의 구원자 Flexbox에 대해 깊이 열광했습니다. Flexbox는 가로 한 줄(Row) 또는 세로 한 줄(Column)의 요소를 우아하게 정렬하는 데 있어 타의 추종을 불허하는 신적인 존재입니다. 하지만 완벽해 보이는 Flexbox에게도 뼈아픈 한계가 하나 존재합니다. 바로 '1차원(1-Dimensional) 선형 시스템'이라는 족쇄입니다.갤러리 이미지들이나 복잡한 대시보드 화면처럼 가로와 세로가 동시에 정교하게 딱딱 맞아떨어지는 '바둑판(2차원 면)' 형태의 격자 레이아웃을 짜려고 하면, Flexbox는 갑자기 바보가 됩니다. 가로 한 줄을 맞추고 flex-wrap으로 아래..
[CSS] Flexbox: 1차원 레이아웃의 모든 것 과거 웹 개발자들은 화면에 박스 3개를 나란히 가로로 배치하기 위해 피눈물을 흘렸습니다. float: left를 썼다가 부모의 높이가 찌그러지는 버그(Height Collapse)를 막기 위해 clearfix라는 흑마법 코드를 덧붙여야 했고, 수직 중앙 정렬(Vertical Center)을 맞추기 위해 line-height와 margin 값을 픽셀 단위로 찍어 맞추는 노가다를 반복했습니다. 브라우저 창 크기가 변하는 스마트폰 시대가 도래하자, 이 구시대적 해킹 레이아웃은 여지없이 와르르 무너져 내렸습니다.전 세계 개발자들의 절규를 들은 W3C는 마침내 2009년 초안을 거쳐, 오로지 '레이아웃 배치'만을 목적으로 창조된 완벽하고 우아한 구세주를 세상에 내놓았습니다. 그것이 바로 CSS Flexible B..
[CSS] 가상 클래스(Pseudo-classes)와 가상 요소 활용 프론트엔드 개발에 갓 입문한 주니어들은 웹사이트에 역동성(Interaction)을 부여하기 위해 조금만 조건이 복잡해져도 득달같이 자바스크립트(JavaScript)를 꺼내 듭니다. "마우스를 올리면 버튼 색을 파랗게 바꿔야 하니까 mouseover 이벤트를 달아야지!", "리스트 항목 중 홀수 번째 줄에만 회색 배경을 칠해야 하니까 for 반복문으로 인덱스를 체크해서 클래스를 add 해야지!" 하지만 돔(DOM) 트리를 자바스크립트로 직접 건드리는 렌더링 성능(Performance)을 갉아먹는 주범입니다.CSS의 세계에는 이미 HTML 문서의 껍데기를 찢지 않고도 요소의 '특정 상태(마우스 오버, 포커스 등)'나 '구조적 순서(첫 번째, n번째 자식 등)'를 귀신같이 추적해 내는 첩보원 같은 존재들이 내..
[CSS] 레이아웃 기초 마스터 (Position, Float, Z-index) 우리가 이전 포스팅에서 배웠던 Block과 Inline의 법칙은 브라우저의 아주 정직한 '일반 흐름(Normal Flow)'을 따릅니다. 위에서부터 아래로, 왼쪽에서 오른쪽으로 차곡차곡 박스를 쌓아가는 방식이죠. 하지만 현대의 웹 디자인은 결코 정직하지 않습니다. 스크롤을 한참 내려도 상단에 끈질기게 달라붙어 있는 네비게이션 헤더(Header), 프로필 사진의 오른쪽 구석에 살짝 걸쳐서 깜빡이는 빨간색 알림(Badge) 동그라미, 그리고 화면 정중앙에 떡하니 나타나서 뒤의 내용들을 다 가려버리는 모달(Modal) 팝업창까지!이 모든 화려한 UI들은 기존 요소들을 밀어내지 않고, 마치 포토샵의 '레이어(Layer)'처럼 공중에 붕 떠서 자신만의 3차원 Z축 공간을 확보합니다. 문서의 일반적인 흐름(중력)을..
[CSS] 웹 타이포그래피와 시각적 디자인 기초 웹사이트에 처음 접속한 사용자가 이 사이트가 트렌디한지, 신뢰할 만한지, 아니면 10년 전에 만들어진 낡은 사이트인지 판별하는 데 걸리는 시간은 0.05초(50 밀리초)에 불과하다고 합니다. 텍스트를 읽기도 전에 우리의 뇌는 화면의 '색상(Color)'과 '배경(Background)'이 뿜어내는 분위기를 본능적으로 스캔하여 결론을 내려버립니다. 프론트엔드 개발자가 레이아웃과 단위를 아무리 기가 막히게 짜놓아도, 버튼 색상이 촌스러운 순수 빨간색(red)이거나 배경 이미지가 찌그러져 있다면 그 프로젝트는 처참하게 실패한 것입니다. 웹에서의 색상은 단순한 미적 장식이 아닙니다. 클릭을 유도하는 심리적 넛지(Nudge)이자, 다크 모드를 전환하는 아키텍처의 핵심 데이터입니다.이번 글에서는 컴퓨터가 색상을 인식..
[CSS] CSS 기초와 핵심 개념 완벽 가이드 웹 개발에 입문하는 거의 모든 사람들이 가장 먼저 접하는 기술은 HTML과 CSS입니다. 코딩 부트캠프나 온라인 강의에서는 보통 "HTML은 웹페이지의 뼈대를 만들고, CSS는 그 뼈대를 예쁘게 꾸미는 역할을 합니다"라고 간단명료하게 설명하고 넘어갑니다. 하지만, 깊이 있는 프론트엔드 개발자가 되기 위해서는 단순히 이 문장을 외우는 것을 넘어, "대체 왜 처음부터 HTML 자체에 디자인 기능을 빵빵하게 넣지 않고 굳이 CSS라는 완전히 다른 언어를 발명하여 분리해야만 했는가?"에 대한 역사적이고 구조적인 근본 이유를 이해해야 합니다. 이 분리의 철학을 이해하지 못하면, 실무에서 수천 줄의 코드가 얽히고설키는 유지보수 지옥을 마주하게 됩니다.오늘 포스팅에서는 초창기 웹의 혼란스러웠던 역사부터 CSS가 가져..
[CSS] 실무에서 자주 쓰이는 Flexbox UI 패턴 5가지 완벽 정복 Flexbox의 문법(Container와 Item 속성)을 완벽히 암기했다 하더라도, 막상 피그마(Figma) 디자인 시안을 던져주고 코드로 구현하라고 하면 눈앞이 하얘지는 초보 퍼블리셔들이 많습니다. "어? 여기엔 space-between을 써야 하나? flex-grow를 줘야 하나?" 문법과 실전은 완전히 다른 영역이기 때문입니다. 현대 웹사이트의 컴포넌트들을 분석해 보면, 수천 가지의 화려한 UI도 결국 Flexbox를 이용한 5~6가지의 전형적인 레이아웃 패턴의 반복에 불과하다는 것을 깨닫게 됩니다. 이번 13단계 포스팅에서는 글로벌 대기업 웹사이트부터 개인 블로그까지 빠짐없이 등장하는 실무 최다 빈출 Flexbox UI 패턴 5가지의 구현 원리와 코드를 상세히 알아보겠습니다. 이 패턴들만 외워두..
[CSS] Grid 이전 포스팅에서 우리는 레이아웃의 구원자 Flexbox에 대해 깊이 열광했습니다. Flexbox는 가로 한 줄(Row) 또는 세로 한 줄(Column)의 요소를 우아하게 정렬하는 데 있어 타의 추종을 불허하는 신적인 존재입니다. 하지만 완벽해 보이는 Flexbox에게도 뼈아픈 한계가 하나 존재합니다. 바로 '1차원(1-Dimensional) 선형 시스템'이라는 족쇄입니다. 갤러리 이미지들이나 복잡한 대시보드 화면처럼 가로와 세로가 동시에 정교하게 딱딱 맞아떨어지는 '바둑판(2차원 면)' 형태의 격자 레이아웃을 짜려고 하면, Flexbox는 갑자기 바보가 됩니다. 가로 한 줄을 맞추고 flex-wrap으로 아래로 떨구면, 떨어진 아랫줄 요소들의 너비가 윗줄 요소들과 미묘하게 틀어지며 오와 열이 박살 나기 ..
[CSS] Flexbox (2편: Item)(Grow, Shrink) 우리가 직전 10단계 포스팅에서 다루었던 것은 오직 '부모(Flex Container)'의 입장이었습니다. 부모가 display: flex를 선언하고, 자식들을 왼쪽으로 밀어붙일지(justify-content), 세로로 중앙에 줄을 세울지(align-items)라는 전체적인 '정렬과 방향'의 규칙을 통제하는 법을 배웠습니다. 하지만 실무 레이아웃은 그렇게 호락호락하지 않습니다. "왼쪽의 메뉴바는 무조건 250px로 크기를 고정하고, 오른쪽 본문 영역은 사용자의 모니터가 커지면 커지는 대로 남은 빈 공간을 쫙쫙 다 빨아들여서 넓어지게 해주세요!" 같은 디테일하고 이기적인 요구사항들이 쏟아집니다. 이때 필요한 것이 바로 '자식(Flex Item) 요소'들에게 개별적으로 부여하는 고무줄 속성들입니다. Flex..
[CSS] Flexbox 컨테이너 속성 Float와 Position으로 고통받던 프론트엔드 개발자들에게 한 줄기 빛처럼 강림한 기술, 바로 Flexbox(Flexible Box Layout)입니다. Flexbox는 그 이름처럼 상자들의 크기를 뷰포트나 내용물에 맞게 아주 '유연하게' 늘이거나 줄이며 배치할 수 있도록 설계된 현대적인 1차원(가로 혹은 세로) 레이아웃 모델입니다. display: flex; 단 한 줄을 선언하는 순간, 부모 요소는 전지전능한 지휘자(Container)가 되어 자식 요소들(Items)의 방향, 정렬, 간격을 마음대로 주무를 수 있게 됩니다. 가운데 정렬을 하기 위해 margin: auto를 주며 씨름하던 과거는 잊으십시오. 이번 포스팅에서는 Flexbox의 양대 산맥 중 부모 요소에 적용하는 '컨테이너(Contai..
[CSS] Flexbox (1편: Container) 과거 웹 개발자들은 화면에 박스 3개를 나란히 가로로 배치하기 위해 피눈물을 흘렸습니다. float: left를 썼다가 부모의 높이가 찌그러지는 버그(Height Collapse)를 막기 위해 clearfix라는 흑마법 코드를 덧붙여야 했고, 수직 중앙 정렬(Vertical Center)을 맞추기 위해 line-height와 margin 값을 픽셀 단위로 찍어 맞추는 노가다를 반복했습니다. 브라우저 창 크기가 변하는 스마트폰 시대가 도래하자, 이 구시대적 해킹 레이아웃은 여지없이 와르르 무너져 내렸습니다. 전 세계 개발자들의 절규를 들은 W3C는 마침내 2009년 초안을 거쳐, 오로지 '레이아웃 배치'만을 목적으로 창조된 완벽하고 우아한 구세주를 세상에 내놓았습니다. 그것이 바로 CSS Flexible ..
[CSS] Variables (사용자 지정 속성) 과거 웹 개발자들은 웹사이트 전체의 메인 컬러(예: 브랜드 컬러인 파란색 #1da1f2)를 적용하기 위해 수백 개의 CSS 클래스에 color: #1da1f2;를 복사해서 붙여넣었습니다.어느 날 기획자가 "브랜드 컬러를 약간 보라색 톤으로 바꿔주세요"라고 요청하면, 개발자는 프로젝트 전체를 뒤져가며 수백 개의 코드를 일일이 찾아 바꾸는(Find & Replace) 지옥 같은 막노동을 해야만 했습니다. 프로그래밍의 제1 원칙인 DRY(Don't Repeat Yourself, 중복 금지)가 완전히 박살 난 상태였죠. 이를 해결하기 위해 Sass(SCSS)나 Less 같은 CSS 전처리기(Preprocessor)들이 등장하여 변수 기능을 제공했지만, 이것들은 컴파일 단계에서 값이 고정되어 버리기 때문에 런타임..
[CSS] Float와 Clearfix 우리가 매일 사용하는 화려하고 반응성이 뛰어난 웹사이트들의 이면에는 10년이 넘는 프론트엔드 개발자들의 피 튀기는 사투가 숨어있습니다. 현대에는 display: flex나 display: grid 코드 단 한 줄이면 박스 수십 개를 아주 우아하고 아름답게 가로로 나란히 배치할 수 있습니다. 하지만 불과 몇 년 전까지만 해도, CSS에는 '요소들을 가로로 배치하기 위한 전용 레이아웃 속성'이라는 것 자체가 아예 존재하지 않았습니다. 개발자들은 멘붕에 빠졌습니다. "웹사이트의 좌측에는 메뉴바(GNB)를 놓고, 우측에는 본문을 2단으로 나란히 배치하고 싶은데 어떻게 해야 하지?" 결국 그들은 CSS의 본래 목적을 완전히 벗어난, 특정 속성의 버그성 동작을 악용하는 '해킹(Hack)' 기법을 십수 년간 표준처럼..
[CSS] Positioning 우리가 직전 06단계에서 배웠던 Block과 Inline의 법칙은 브라우저의 아주 정직한 '일반 흐름(Normal Flow)'을 따릅니다. 위에서부터 아래로, 왼쪽에서 오른쪽으로 차곡차곡 박스를 쌓아가는 방식이죠. 하지만 현대의 웹 디자인은 결코 정직하지 않습니다. 스크롤을 한참 내려도 상단에 끈질기게 달라붙어 있는 네비게이션 헤더(Header), 프로필 사진의 오른쪽 구석에 살짝 걸쳐서 깜빡이는 빨간색 알림(Badge) 동그라미, 그리고 화면 정중앙에 떡하니 나타나서 뒤의 내용들을 다 가려버리는 모달(Modal) 팝업창까지! 이 모든 화려한 UI들은 기존 요소들을 밀어내지 않고, 마치 포토샵의 '레이어(Layer)'처럼 공중에 붕 떠서 자신만의 3차원 Z축 공간을 확보합니다. 문서의 일반적인 흐름(중력..
[CSS] Display 우리가 HTML 문서에 박스 3개를 연달아 코딩하고 결과를 확인해 보면, 신기하게도 세 박스가 나란히 옆으로 붙지 않고 층층이 위아래로 쌓여 있는 모습을 보게 됩니다. 반대로 태그나 태그를 여러 개 쓰면, 이번에는 위아래로 쌓이지 않고 글씨처럼 좌우로 길게 나열됩니다. 대체 브라우저 안에서는 무슨 보이지 않는 룰(Rule)이 존재하길래 어떤 녀석은 줄 바꿈을 일으키고 어떤 녀석은 가로로 붙어 버리는 걸까요? 이 모든 마법 같은 배치를 결정짓는 절대적인 단 하나의 CSS 속성, 그것이 바로 'Display' 속성입니다. display 속성을 완벽하게 장악하지 못하면, 버튼에 패딩(Padding)을 주었는데 위아래로 겹쳐버린다거나, 폭(Width)을 지정했는데 아무런 반응이 없는 등 수많은 기괴한 버그..

티스토리툴바