CSS 공식 문서: 개념, 예제, 실습
예제 중심의 간결한 CSS 레퍼런스. 개념을 읽고 코드를 본 뒤 Coddy 여정에서 직접 연습하세요.
CSS 가이드 학습 시작하기시작하기
- 인라인 CSS인라인 CSS는 style 속성으로 요소에 선언을 직접 적어요. 문법, 인라인 스타일이 맞는 상황, 스타일시트보다 우선하는 이유, 내부 CSS와 외부 CSS와의 차이를 알아봐요.
- 외부 CSS외부 CSS는 .css 파일에 두고 모든 페이지가 <link rel="stylesheet">로 연결해요. 내부 CSS는 한 페이지 안의 <style> 요소에 있어요. 두 방식, 파일 경로가 동작하는 방식, 둘이 만났을 때 어떤 규칙이 이기는지 알아봐요.
- CSS 주석CSS의 주석 문법은 /* ... */ 하나뿐이고 한 줄이든 여러 줄이든 같아요. 주석을 쓸 수 있는 위치, 규칙을 주석 처리하는 방법, // 와 중첩 주석이 다음 규칙을 조용히 망가뜨리는 이유를 알아봐요.
- !important!important는 명시도와 상관없이 선언을 일반 선언보다 우선하게 만들어요. 무엇을 이기고 무엇에 지는지, 그 밑에서 명시도가 어떻게 동작하는지, 스타일 충돌을 더 깔끔하게 해결하는 방법을 알아봐요.
- CSS 변수CSS 변수(사용자 정의 속성)는 값을 한 번 저장하고 var()로 재사용해요. :root에 선언하는 법, 범위와 덮어쓰기, 기본값 지정, JavaScript로 테마 바꾸기, 잘못된 값 함정을 피하는 법을 알아봐요.
선택자
- CSS 선택자CSS 선택자는 규칙이 꾸밀 요소를 골라요. 모든 선택자 종류, 네 가지 결합자(자손, 자식, 인접 형제, 일반 형제), 속성 선택자, 그룹 선택자를 알아보고 선택자를 직접 테스트해 봐요.
- 클래스 선택자클래스 선택자(.name)는 그 클래스를 가진 모든 요소를, ID 선택자(#name)는 그 id를 가진 요소 하나를 꾸며요. 문법, 여러 클래스와 연결한 클래스, 클래스와 id의 차이, 이름 규칙, JavaScript로 클래스 토글하기를 알아봐요.
- 가상 클래스가상 클래스는 위치나 상태로 요소를 골라요. :nth-child(), :first-child, :not(), :focus, :checked, :has() 등이 있어요. 문법, 실시간 테스터로 보는 an+b 공식, nth-child와 nth-of-type의 차이를 알아봐요.
- ::before와 ::after::before와 ::after는 CSS만으로 요소의 첫 번째와 마지막 자식 자리에 생성된 콘텐츠를 넣어요. content 속성, 빈 content가 꼭 필요한 이유, 위치 지정, attr() 툴팁, 카운터, 동작하지 않는 곳을 알아봐요.
- CSS hover:hover 가상 클래스는 포인터가 요소 위에 있는 동안 요소를 꾸며요. 버튼과 카드의 hover 효과, 부드러운 트랜지션, 올바른 순서의 :link, :visited, :hover, :active 링크 색상, 터치 화면의 hover를 알아봐요.
박스 모델
- 박스 모델모든 요소는 content, padding, border, margin 네 겹으로 된 상자예요. 각 층이 크기에 어떻게 더해지는지, box-sizing: border-box가 계산을 어떻게 바꾸는지 알아보고 각 층을 실시간으로 측정해 봐요.
- CSS paddingpadding은 요소 안쪽, 콘텐츠와 테두리 사이의 공간이에요. 값 1개에서 4개까지 쓰는 padding 단축 속성, 방향별 속성, 논리적 padding, 퍼센트, padding이 요소 크기를 바꾸는 방식을 알아봐요.
- CSS marginmargin은 요소 테두리 바깥의 투명한 공간으로, 다른 요소를 밀어내요. margin 단축 속성, margin: 0 auto로 가운데 정렬, 음수 margin, flexbox의 margin auto, 세로 margin이 상쇄되는 이유를 알아봐요.
- padding과 margin 차이padding은 요소 테두리 안쪽의 공간이고, margin은 바깥쪽의 공간이에요. 같은 상자에서 둘을 나란히 실시간으로 비교해 보고, 배경, 클릭 영역, 요소 사이 간격, 가운데 정렬에 무엇을 써야 하는지 알아봐요.
- CSS 테두리border 속성은 요소의 padding 둘레에 선을 그려요. border 단축 속성, 모든 테두리 스타일, 색상과 한쪽 테두리, border-radius로 둥근 모서리 만들기, border와 outline의 차이를 알아봐요.
- width와 heightwidth와 height는 요소 상자의 크기를 정해요. 고정 크기와 퍼센트 크기, height: 100%가 자주 아무 일도 하지 않는 이유, 유연한 레이아웃을 위한 min-height와 max-width, auto와 100%의 차이, fit-content 키워드를 알아봐요.
텍스트와 글꼴
- 글자 크기font-size 속성은 글자 크기를 정해요. 받는 단위(px, rem, em, %, 키워드, vw), HTML에서 글자 크기를 바꾸는 법, rem이 안전한 기본값인 이유, em 크기가 누적되는 방식을 알아봐요.
- 글자 굵기font-weight 속성은 텍스트를 굵게, 얇게, 또는 그 사이 어디든 만들어요. 100에서 900까지의 숫자 단계, normal과 bold, 상대값 bolder와 lighter, 굵기를 바꿔도 변화가 없는 이유를 알아봐요.
- 줄 간격line-height는 텍스트 각 줄의 높이, 즉 줄 사이 간격을 정해요. 단위 없는 숫자가 올바른 기본값인 이유, px, em, % 값이 다르게 상속되는 방식, 본문과 제목에 좋은 값을 알아봐요.
- 글자 색<font color> 태그는 폐기되었고, HTML의 글자 색은 CSS color 속성으로 정해요. 페이지 전체, 단어 하나, 링크, 제목에 색을 입히는 법, 색 이름, hex, rgb, 그리고 글자를 읽기 좋게 유지하는 법을 알아봐요.
- CSS 밑줄text-decoration으로 텍스트에 밑줄을 긋고, 선의 색, 스타일, 두께, 텍스트와의 거리를 조절해요. 링크 밑줄을 없애는 방법과 없애면 안 되는 경우도 알아봐요.
- 텍스트 그림자text-shadow는 텍스트 뒤에 그림자를 하나 이상 그려요. 네 가지 값(x 오프셋, y 오프셋, 흐림, 색), 그림자를 겹쳐서 글로우, 외곽선, 3D 효과를 만드는 법, 복잡한 배경에서 그림자로 텍스트를 읽기 좋게 만드는 법을 알아봐요.
색상과 배경
- CSS 색상CSS로 색을 쓰는 모든 방법을 알아봐요. 색 이름, hex 코드, rgb()와 rgba(), hsl(), 알파 채널로 투명도, currentColor, 그리고 새로운 oklch()와 color-mix()까지, 각각 실시간 예제와 변환기로 보여 줘요.
- 배경색background-color는 요소의 상자를 색으로 채워요. 페이지 전체, div, 표의 행, 단어 하나의 배경색을 정하는 법, 투명도가 동작하는 방식, bgcolor가 폐기된 이유, background-color와 background 단축 속성의 차이를 알아봐요.
- 배경 이미지background-image는 요소의 콘텐츠 뒤에 이미지나 그라데이션을 넣어요. url()과 그라데이션, background-size(cover와 contain), background-position, background-repeat, 여러 배경 겹치기, background 단축 속성을 알아봐요.
- CSS 그라데이션CSS 그라데이션은 브라우저가 색으로 그리는 이미지예요. radial-gradient(모양, 크기, 위치), linear-gradient(방향과 각도), conic-gradient, 색 정지점, 줄무늬를 만드는 딱 끊기는 정지점, 반복 그라데이션, 그라데이션 텍스트를 알아봐요.
- 박스 그림자box-shadow는 요소의 상자 둘레에 그림자를 그려요. 다섯 가지 값(x, y, 흐림, spread, 색), inset 그림자, 사실적인 깊이를 위한 그림자 겹치기, spread로 만드는 포커스 링, 그림자를 탁하게 만드는 실수를 알아봐요.
레이아웃
- CSS displaydisplay 속성은 요소가 레이아웃에 참여하는 방식을 정해요. block, inline, inline-block을 측정한 상자로 나란히 비교하고, display none과 visibility hidden의 차이, flex, grid, flow-root, contents의 역할을 알아봐요.
- CSS positionposition: absolute는 가장 가까운 위치 지정 조상 안의 정확한 좌표에 요소를 놓아요. absolute가 position: relative와 함께 동작하는 방식, fixed와 sticky, top/right/bottom/left와 inset 속성, sticky가 가끔 붙지 않는 이유를 알아봐요.
- z-index 쌓임 순서z-index는 겹친 요소 중 어느 것을 위에 그릴지 정해요. 어떤 요소에서 동작하는지, 쌓임 맥락이 요소를 묶어서 z-index 9999도 질 수 있는 이유, 쌓임 맥락을 만드는 것, 동작하지 않는 z-index를 고치는 법을 알아봐요.
- CSS overflowoverflow는 상자에 들어가지 않는 콘텐츠를 어떻게 할지 정해요. 보여 주거나, 잘라 내거나, 스크롤바를 추가해요. visible, hidden, scroll, auto, clip, overflow-x와 overflow-y, 텍스트 말줄임, overflow가 레이아웃에 주는 부작용을 알아봐요.
- float와 clearfloat는 요소를 한쪽으로 밀고, 잡지가 사진을 배치하듯 텍스트가 그 둘레를 감싸게 해요. float left, right, inline-start, clear, float 둘레에서 부모가 무너지는 이유와 display: flow-root로 고치는 법, float를 더 이상 페이지 레이아웃에 쓰지 않는 이유를 알아봐요.
- div 가운데 정렬div를 가로, 세로, 또는 양쪽 모두 가운데 정렬하는 모든 방법이에요. flexbox, grid, margin auto, absolute와 transform, inset과 margin auto, align-content. 각 방법이 실시간으로 실행되며 스스로 가운데 정렬을 측정하고, 언제 무엇을 쓸지 표로 정리했어요.
- 이미지 가운데 정렬<img>는 인라인이라서 텍스트처럼 부모의 text-align: center로 가운데 정렬돼요. 또는 margin: 0 auto를 준 block으로 만들거나, flexbox나 grid로 세로까지 가운데 정렬할 수 있어요. 각 방법이 실시간으로 실행되며 결과를 측정해요.
Flexbox와 Grid
- CSS flexboxflexbox는 항목을 한 행이나 한 열로 배치하고, 공간을 나누고 정렬하는 방식을 제어해요. display: flex, 주축과 교차축, 모든 컨테이너 속성, flex-grow, flex-shrink, flex-basis를 각 항목의 위치를 측정하는 실시간 플레이그라운드로 알아봐요.
- justify-content 정렬justify-content는 flex 항목을 주축을 따라, align-items는 교차축을 따라 배치해요. 모든 값을 측정해서 나란히 보여 주고, 클릭하는 정렬 격자, align-self, justify-content가 가끔 아무 일도 하지 않는 이유를 알아봐요.
- flex-wrap 줄바꿈flex-wrap은 flex 항목을 한 줄에 욱여넣을지 다음 줄로 넘길지 정하고, flex-direction은 항목이 행으로 흐를지 열로 흐를지 정해요. 두 속성, flex-flow 단축 속성, align-content, 미디어 쿼리 없는 반응형 카드 행을 실시간 예제로 알아봐요.
- CSS gridCSS grid는 항목을 행과 열에 동시에 배치해요. display: grid, grid-template-columns, fr 단위, repeat()와 minmax(), auto-fill과 auto-fit의 차이, grid-column으로 항목 배치하기, grid-template-areas를 직접 편집하고 측정하는 실시간 grid로 알아봐요.
반응형 디자인
- 미디어 쿼리미디어 쿼리는 최소 화면 너비, 다크 색상 테마, 마우스 포인터 같은 조건이 참일 때만 CSS를 적용해요. @media 문법, 모바일 우선 브레이크포인트, 범위 문법, prefers-color-scheme, JavaScript의 matchMedia, 컨테이너 쿼리를 알아봐요.
- rem, em, px 단위rem은 루트 글자 크기, em은 현재 요소의 글자 크기를 기준으로 하고, px은 고정이며, %는 속성에 따라 달라요. 중첩 데모로 각 단위를 측정해 보고, em이 누적되는 이유, 언제 무엇을 쓸지, vw, vh, dvh의 동작 방식을 알아봐요.
- clamp() 함수clamp(MIN, PREFERRED, MAX)는 선호값을 돌려주지만 MIN보다 작거나 MAX보다 크게는 절대 돌려주지 않아요. 미디어 쿼리 없이 글자 크기와 간격을 유동적으로 만드는 법, 가운데 값 계산법, min()과 max()와의 관계를 알아봐요.
- calc() 함수calc()는 CSS에서 계산을 하고 단위를 섞게 해 줘요. 100%에서 고정 200px 사이드바를 빼는 것처럼요. 문법 규칙(공백이 중요해요), CSS 변수와 함께 쓰는 calc(), 흔히 해결하는 레이아웃, 잘못된 calc()가 조용히 무시되는 이유를 알아봐요.
트랜지션과 효과
- CSS transitionCSS transition은 hover처럼 속성 값이 바뀔 때 옛 값에서 새 값으로 애니메이션해요. transition 단축 속성, 모든 타이밍 함수 비교, 트랜지션할 수 있는 것과 없는 것, height: auto 우회 방법, 움직임 줄이기 설정을 알아봐요.
- CSS 애니메이션CSS 애니메이션은 @keyframes에 정의한 단계를 따라 요소를 스스로, 원하는 만큼 반복해서 움직여요. @keyframes 문법, 여덟 가지 animation 속성, fill-mode와 direction, 로딩 표시, 일시정지, 움직임 줄이기 설정을 존중하는 법을 알아봐요.
- CSS transformtransform 속성은 주변 레이아웃을 바꾸지 않고 요소를 옮기고, 크기를 바꾸고, 회전하고, 기울여요. 모든 transform 함수, 함수 순서가 중요한 이유, transform-origin, 별도의 translate, scale, rotate 속성, translate(-50%, -50%) 가운데 정렬 기법을 알아봐요.
- CSS 회전transform: rotate(45deg)나 새 rotate 속성으로 요소를 회전해요. 각도 단위(deg, turn, rad), transform-origin으로 모서리를 중심으로 회전하기, 텍스트와 아이콘 회전, 회전하는 로더, rotateX와 rotateY로 3D 회전을 알아봐요.
- CSS 투명도opacity는 요소 전체와 그 안의 모든 것을 0(보이지 않음)에서 1(불투명)까지 비쳐 보이게 해요. 값, opacity가 텍스트까지 흐리게 하는 이유와 배경만 투명하게 하는 법, opacity: 0과 visibility, display의 차이, hover 페이드를 알아봐요.
- 흐림 효과와 filterfilter: blur(5px)는 요소를 흐리게 하고, backdrop-filter: blur()는 요소 뒤에 있는 것을 흐리게 해요. 모든 filter 함수(brightness, contrast, grayscale, sepia, saturate, hue-rotate, invert, drop-shadow)를 실시간 슬라이더로 보고, 조합하는 법과 흐림 가장자리 문제를 알아봐요.
