25.03.14 ✨ CSS 핵심 개념 정리 ✨
✨ CSS 핵심 개념 정리 ✨
1. 선택자 (Selectors)
선택자는 HTML 요소에 스타일을 적용하기 위해 어떤 요소를 선택할지 알려주는 역할을 해요.
| 종류 | 문법 | 적용하는 곳 | 예시 |
| 전체 선택자 | * | 모든 HTML 요소에 스타일을 적용/ 주로 초기화시 사용. |
* { margin: 0; padding: 0; } (모든 요소의 기본 마진과 패딩 제거) |
| 타입 선택자 | 태그이름 | 지정한 HTML 태그를 사용하는 모든 요소에 적용 | p { color: blue; } (모든 <p> 태그의 글자색을 파란색으로) |
| 클래스 선택자 | .클래스이름 | HTML 요소의 class 속성에 지정된 이름으로 선택합니다. | .important { font-weight: bold; } (class="important"인 요소 굵게) |
| 아이디 선택자 | #아이디이름 | HTML 요소의 id 속성에 지정된 이름으로 선택합니다. (페이지 내 고유해야 함) | #header { background-color: lightgray; } (id="header"인 요소 배경색 변경) |
✍️ 추가 설명:
- 클래스 선택자는 여러 요소에 동일한 스타일을 적용하고 싶을 때 유용해요. 예를 들어, 여러 개의 버튼에 동일한 디자인을 적용할 수 있죠.
- 아이디 선택자는 페이지에서 유일한 특정 요소에 스타일을 적용할 때 사용해요. 보통 레이아웃의 주요 섹션(헤더, 푸터 등)에 많이 사용됩니다. 아이디는 고유해야 한다는 점을 꼭 기억하세요!
2. 복합 선택자 (Combinators)
복합 선택자는 두 개 이상의 선택자를 조합하여 더 구체적인 요소를 선택할 때 사용해요.
| 종류 | 문법 | 설명 | 예시 |
| 후손 | 선택자1 선택자2 | 선택자1 요소의 모든 후손(자식, 손자 등) 중 선택자2 요소를 선택합니다. (띄어쓰기로 구분) | div p { color: green; } (<div> 요소 안에 있는 모든 <p> 요소) |
| 자손 | 선택자1 > 선택자2 | 선택자1 요소의 직계 자식인 선택자2 요소를 선택합니다. | ul > li { list-style-type: square; } (<ul> 바로 아래의 <li> 요소) |
| 인접 형제 | 선택자1 + 선택자2 | 선택자1 요소 바로 뒤에 오는 형제 요소 중 선택자2 요소를 선택합니다. | h2 + p { margin-top: 0; } (<h2> 바로 뒤에 오는 <p> 요소) |
| 일반 형제 | 선택자1 ~ 선택자2 | 선택자1 요소 뒤에 오는 모든 형제 요소 중 선택자2 요소를 선택합니다. | h2 ~ p { text-indent: 2em; } (<h2> 뒤에 오는 모든 <p> 요소 들여쓰기) |
| 그룹 | 선택자1, 선택자2 | 여러 선택자를 쉼표(,)로 구분하여 동시에 선택합니다. | h1, h2, h3 { font-family: sans-serif; } (<h1>, <h2>, <h3> 요소) |
✍️ 예시로 이해하기:
<div>
<h1>제목</h1>
<p>첫 번째 단락입니다.</p>
<ul>
<li>항목 1</li>
<li>항목 2</li>
</ul>
<p>두 번째 단락입니다.</p>
</div>
<h2>소제목</h2>
<p>세 번째 단락입니다.</p>
<p>네 번째 단락입니다.</p>
위 HTML 구조에서 각 복합 선택자가 어떻게 동작하는지 볼게요.
- div p: <div> 안의 "첫 번째 단락입니다."와 "두 번째 단락입니다." <p> 요소가 선택됩니다.
- div > p: <div> 바로 아래의 자식인 "첫 번째 단락입니다."와 "두 번째 단락입니다." <p> 요소가 선택됩니다. (이 예시에서는 후손 선택자와 결과가 같네요!)
- h2 + p: <h2> 바로 뒤에 오는 "세 번째 단락입니다." <p> 요소만 선택됩니다.
- h2 ~ p: <h2> 뒤에 오는 "세 번째 단락입니다."와 "네 번째 단락입니다." <p> 요소가 모두 선택됩니다.
- h1, li: <h1> 요소와 모든 <li> 요소가 선택됩니다.
3. 속성 선택자 (Attribute Selectors)
HTML 요소가 특정 속성을 가지고 있거나, 특정 속성 값을 가지는 경우에 따라 요소를 선택할 수 있어요.
| 문법 | 선택하는 요소 설명 | 예시 |
| [속성이름] | 해당 속성을 가진 모든 요소 | a[target] { color: purple; } (target 속성을 가진 모든 <a> 요소) |
| [속성이름="값"] | 해당 속성의 값이 정확히 일치하는 요소 | input[type="text"] { border: 1px solid black; } (type 속성이 "text"인 <input>) |
| [속성이름~="값"] | 해당 속성의 값 목록(공백으로 구분) 중 하나가 일치하는 요소 | img[class~="thumbnail"] { border: 2px solid blue; } (class에 "thumbnail" 포함) |
| [속성이름|="값"] | 해당 속성의 값이 정확히 일치하거나 "값-"으로 시작하는 요소 (주로 언어 코드에 사용) |
a[lang|="en"] { font-style: italic; } (lang이 "en" 또는 "en-US" 등) |
| [속성이름^="값"] | 해당 속성의 값이 특정 값으로 시작하는 요소 | a[href^="https://"] { background-color: yellow; } (https로 시작하는 링크) |
| [속성이름$="값"] | 해당 속성의 값이 특정 값으로 끝나는 요소 | img[src$=".jpg"] { box-shadow: 2px 2px 5px gray; } (jpg 이미지) |
| [속성이름*="값"] | 해당 속성의 값에 특정 값이 포함되는 요소 | p[class*="warning"] { color: red; } (class에 "warning" 포함) |
✍️ 활용 팁: 특정 파일 확장자를 가진 링크나 이미지에만 스타일을 적용하거나, 특정 데이터 속성을 가진 요소에 스크립트 없이 스타일을 주고 싶을 때 유용하게 사용할 수 있습니다.
4. CSS 단위 (Units)
CSS에서 크기나 길이를 나타낼 때 사용하는 단위들이에요.
| 단위 | 설명 | 예시 |
| px | 픽셀(Pixel) 단위로, 화면의 작은 점 하나를 의미해요.고정된 크기를 가지기 때문에 직관적이지만, 확대/축소 시 레이아웃이 깨질 수 있어요. | font-size: 16px; |
| % | 백분율(Percentage) 단위로, 부모 요소의 크기에 대한 상대적인 비율로 크기를 정해요. 반응형 웹 디자인에 유용하게 사용됩니다. | width: 50%; (부모 요소 너비의 절반) |
✍️ 추가적으로 알아두면 좋은 단위들:
- em: 현재 요소의 글꼴 크기에 대한 상대적인 단위입니다. font-size: 2em; 은 기본 글꼴 크기의 2배를 의미해요.
- rem: HTML 최상위 요소(<html>)의 글꼴 크기에 대한 상대적인 단위입니다. em보다 예측하기 쉽다는 장점이 있어요.
- vw: 뷰포트(브라우저 창) 너비의 1%를 의미해요. width: 100vw; 는 화면 너비 전체를 차지합니다.
- vh: 뷰포트 높이의 1%를 의미해요. height: 100vh; 는 화면 높이 전체를 차지합니다.
5. CSS 박스 모델 (Box Model)
HTML 요소는 기본적으로 사각형의 박스 형태로 렌더링되며, 이 박스를 구성하는 요소들을 이해하는 것이 중요해요.
- content: 실제 내용(텍스트, 이미지 등)이 들어가는 영역입니다. width와 height 속성으로 크기를 조절할 수 있어요.
- padding: content 영역과 border 사이의 여백입니다. 안쪽 여백이라고 생각하시면 돼요.
- border: padding 영역 바깥쪽의 테두리입니다.
- margin: border 영역 바깥쪽의 여백으로, 다른 요소와의 간격을 조절할 때 사용해요. 바깥쪽 여백입니다.
box-sizing 속성: 요소의 너비(width)와 높이(height)를 계산하는 방식을 결정해요.
| 값 | 설명 |
| content-box (기본값) | width와 height 속성이 content 영역의 크기만을 포함합니다. padding과 border 크기는 별도로 더해져서 실제 박스 크기가 결정돼요. |
| border-box | width와 height 속성이 content, padding, border를 모두 포함한 크기를 의미합니다. 레이아웃을 예측하고 관리하기 훨씬 쉬워져요. |
✍️ border-box 사용을 추천하는 이유:
content-box를 사용하면 요소에 padding이나 border를 추가할 때마다 전체 크기가 의도치 않게 변경될 수 있어요. 하지만 border-box를 사용하면 width와 height로 지정한 크기가 유지되면서 내부적으로 padding과 border가 조절되기 때문에 레이아웃 작업이 훨씬 수월해집니다. 많은 개발자들이 초기 CSS 설정에서 모든 요소에 box-sizing: border-box;를 적용하곤 합니다.
*, *::before, *::after {
box-sizing: border-box;
}
6. display 속성
요소가 웹 페이지에 어떻게 보여지고 다른 요소와 어떻게 상호작용할지를 결정하는 중요한 속성이에요.
| 값 | 설명 |
| block | 요소를 블록 레벨 요소로 만듭니다. 항상 새 줄에서 시작하고, 사용 가능한 전체 너비를 차지하려고 해요. width, height, margin, padding 속성을 모두 지정할 수 있습니다. 예: <div>, <p>, <h1>~<h6>, <ul>, <li>, <form> 등 |
| inline | 요소를 인라인 레벨 요소로 만듭니다. 새 줄에서 시작하지 않고, 다른 인라인 요소들과 같은 줄에 배치됩니다. 내용의 크기만큼만 너비를 차지하며, width와 height 속성을 직접 지정할 수 없어요. margin과 padding은 좌우에만 적용됩니다. 예: <span>, <a>, <img>, <strong>, <em> 등 |
| inline-block | inline처럼 다른 요소와 같은 줄에 배치되지만, block처럼 width와 height, 상하 margin과 padding을 지정할 수 있는 특징을 가집니다. 예: <button>, <input>, <select> 등 |
| flex | 요소를 플렉스 컨테이너로 만들고, 그 자식 요소들을 플렉스 아이템으로 취급하여 유연한 레이아웃을 구성할 수 있게 합니다. |
| none | 요소를 화면에 아예 표시하지 않고, 공간조차 차지하지 않도록 만듭니다. 스크린 리더 등 보조 기술에서도 읽히지 않아요. |
✍️ block vs inline vs inline-block 비교:
| 특징 | block | inline | in line-block |
| 줄 바꿈 | O (항상 새 줄에서 시작) | X | X |
| 너비 기본값 | 부모 요소의 100% | 콘텐츠 너비 | 콘텐츠 너비 |
| width, height | 적용 가능 | 적용 불가 | 적용 가능 |
| margin 상하 | 적용 가능 | 적용 불가 | 적용 가능 |
| padding 상하 | 적용 가능 | 적용되지만 레이아웃 영향 X | 적용 가능 |
7. overflow 속성
요소의 크기보다 내부 콘텐츠가 더 클 때, 넘치는 부분을 어떻게 처리할지 지정합니다.
| 값 | 설명 |
| visible (기본값) | 콘텐츠가 요소의 경계를 넘어서도 그대로 보여줍니다. |
| hidden | 넘치는 부분을 잘라내어 보이지 않게 합니다. 스크롤바가 생기지 않아요. |
| scroll | 콘텐츠가 넘치지 않더라도 항상 가로 및 세로 스크롤바를 표시합니다. 넘치는 부분이 있을 경우 스크롤하여 볼 수 있습니다. |
| auto | 콘텐츠가 넘칠 경우에만 스크롤바를 표시합니다. 넘치지 않으면 스크롤바가 나타나지 않아요. 대부분의 경우 auto를 사용하는 것이 좋습니다. |
✍️ 언제 사용할까요?
- 고정된 크기의 컨테이너 안에 많은 양의 텍스트나 이미지가 들어갈 때
- 드롭다운 메뉴 등 특정 상황에서만 내용을 보여주고 싶을 때 (hidden과 JavaScript 조합)
8. opacity 속성
요소의 투명도를 조절합니다. 값은 0.0(완전 투명)부터 1.0(완전 불투명) 사이의 숫자로 지정해요.
.transparent-box {
background-color: blue;
opacity: 0.5; /* 50% 투명도 */
}
✍️ opacity: 0; vs display: none; vs visibility: hidden;
이 세 가지는 요소를 보이지 않게 한다는 공통점이 있지만, 중요한 차이점이 있어요.
- opacity: 0;: 요소는 투명해져서 보이지 않지만, 페이지 레이아웃 상에서 공간은 그대로 차지하고 있습니다. 이벤트(클릭 등)도 여전히 받을 수 있어요.
- display: none;: 요소를 렌더링하지 않으므로 화면에서 완전히 사라지고 공간도 차지하지 않습니다.
- visibility: hidden;: 요소는 보이지 않지만, opacity: 0;처럼 페이지 레이아웃 상에서 공간은 그대로 차지합니다. 하지만 이벤트는 받을 수 없다는 차이점이 있어요.
9. white-space 속성
요소 내부의 공백 문자(띄어쓰기, 탭, 줄바꿈)를 어떻게 처리할지 지정합니다.
| 값 | 설명 |
| normal (기본값) | 연속된 공백은 하나로 합쳐지고, 필요한 경우 자동으로 줄바꿈이 일어납니다. |
| nowrap | 연속된 공백은 하나로 합쳐지지만, 자동 줄바꿈을 하지 않습니다. 텍스트가 길어지면 요소를 벗어날 수 있어요. |
| pre | HTML 소스 코드에 입력된 공백과 줄바꿈을 그대로 유지합니다. <pre> 태그와 비슷한 동작을 해요. |
| pre-wrap | pre처럼 공백과 줄바꿈을 유지하지만, 필요한 경우 자동 줄바꿈도 수행합니다. |
| pre-line | 연속된 공백은 하나로 합쳐지지만, 줄바꿈은 유지하고 필요한 경우 자동 줄바꿈도 수행합니다. |
✍️ 언제 사용할까요?
- nowrap: 표의 셀 내용이 길어져서 줄바꿈되는 것을 방지하고 싶을 때
- pre, pre-wrap, pre-line: 코드 블록이나 시처럼 형식을 유지해야 하는 텍스트를 표시할 때
10. position 속성
HTML 요소의 위치를 결정하는 방법을 지정합니다. top, right, bottom, left 속성과 함께 사용하여 위치를 정밀하게 제어할 수 있어요.
| 값 | 설명 | 기준점 |
| static (기본값) | 요소를 일반적인 문서 흐름에 따라 배치합니다. top, right, bottom, left, z-index 속성이 적용되지 않아요. | 없음 |
| relative | 요소를 일반적인 문서 흐름에 따라 배치한 후, static일 때의 위치를 기준으로 top, right, bottom, left 속성을 사용하여 상대적으로 위치를 이동시킵니다. 원래 요소가 차지하던 공간은 그대로 유지됩니다. absolute 위치의 기준점이 될 수 있다는 점이 매우 중요합니다. | 요소 자기 자신의 static 위치 |
| absolute | 요소를 일반적인 문서 흐름에서 제외시키고, 가장 가까운 position 속성이 static이 아닌 조상 요소를 기준으로 위치를 지정합니다. 만약 그러한 조상 요소가 없다면 초기 컨테이닝 블록(보통 <html> 요소)을 기준으로 합니다. absolute 요소는 주변 레이아웃에 영향을 주지 않고 띄워진다고 생각하면 쉬워요. | position이 static이 아닌 가장 가까운 조상 요소 |
| fixed | absolute와 유사하게 요소를 일반적인 문서 흐름에서 제외시키지만, 기준점이 **뷰포트(브라우저 창)**입니다. 따라서 스크롤을 하더라도 항상 같은 위치에 고정되어 표시됩니다. 상단 고정 네비게이션 바나 화면 특정 위치에 항상 떠 있는 버튼 등에 사용돼요. | 뷰포트 (브라우저 창) |
| sticky | 평소에는 static처럼 동작하다가, 사용자가 스크롤하여 요소가 특정 임계점(예: top: 0)에 도달하면 마치 fixed처럼 해당 위치에 고정됩니다. 스크롤 위치에 따라 동작이 달라지는 것이 특징입니다. 스크롤 가능한 가장 가까운 조상 요소를 기준으로 고정됩니다. | 스크롤 가능한 가장 가까운 조상 요소 (overflow가 visible이 아닌) |
✍️ relative 와 absolute 의 관계 (매우 중요!)
absolute 속성을 가진 요소의 위치 기준점을 명확하게 하고 싶을 때, 부모 요소에 position: relative; 를 설정하는 경우가 많습니다. 이렇게 하면 absolute 요소는 relative 가 설정된 부모 요소의 좌상단 모서리를 기준으로 위치하게 됩니다.
<div style="position: relative; width: 300px; height: 200px; border: 1px solid black;">
<div style="position: absolute; top: 10px; left: 10px; width: 50px; height: 50px; background-color: red;"></div>
</div>
위 예시에서 빨간색 <div>는 position: absolute; 이고, 부모 <div>는 position: relative; 입니다. 따라서 빨간색 <div>는 부모 <div>의 왼쪽 상단으로부터 위쪽으로 10px, 왼쪽으로 10px 떨어진 위치에 배치됩니다.
11. CSS 전환 & 변환 (Transitions & Transforms)
웹 요소에 동적인 효과를 추가하여 사용자 경험을 향상시키는 기능입니다.
CSS 전환 (Transitions)
CSS 속성 값이 변경될 때, 부드러운 전환 효과(애니메이션)를 적용할 수 있도록 해줍니다.
| 속성 | 설명 | 기본값 |
| transition-property | 전환 효과를 적용할 CSS 속성의 이름을 지정합니다. (예: width, background-color, all) | all |
| transition-duration | 전환 효과가 완료될 때까지 걸리는 시간을 지정합니다. (초 s 또는 밀리초 ms 단위) | 0s |
| transition-timing-function | 전환 효과의 속도 변화를 지정합니다. (예: ease, linear, ease-in, ease-out, ease-in-out) | ease |
| transition-delay | 전환 효과가 시작되기 전까지 대기하는 시간을 지정합니다. | 0s |
단축 속성: transition: <property> <duration> <timing-function> <delay>; 순서로 한 번에 지정할 수 있습니다.
예시) transition: background-color 0.5s ease-in-out;
✍️ 간단한 전환 효과 예시 (마우스 호버 시 배경색 변경):
<style>
.box {
width: 100px;
height: 100px;
background-color: blue;
transition: background-color 0.5s ease-in-out; /* 배경색 변경에 0.5초 동안 ease-in-out 효과 적용 */
}
.box:hover {
background-color: red;
}
</style>
<div class="box"></div>위 예시에서 .box 요소에 마우스를 올리면 배경색이 파란색에서 빨간색으로 0.5초 동안 부드럽게 변경됩니다.
■ transition-timing-function (내가 추가한 거라 외울 필요는 x)
만약 박스 (boxmove 애니메이션)가 화면 왼쪽에서 오른쪽으로 움직이는 애니메이션이라고 가정했을 때,
- linear: 박스가 로봇처럼 일정한 속도로 멈춤 없이 쭉 움직입니다.
- ease: 박스가 사람이 걷는 것처럼 처음에는 천천히 움직이다가 중간에 속도가 빨라지고, 오른쪽 끝에 다다를 즈음 다시 속도가 줄어들면서 멈춥니다.
- ease-in: 박스가 자동차 출발처럼 처음에는 천천히 움직이다가 점점 속도가 빨라집니다.
- ease-out: 박스가 자동차 급정거처럼 빠르게 움직이다가 점점 속도가 줄어들면서 멈춥니다.
- ease-in-out: 박스가 부드러운 움직임처럼 처음과 끝은 천천히, 중간은 빠르게 움직입니다.
infinite alternate 는 애니메이션 반복 횟수와 방향을 설정하는 부분입니다.
- infinite: 애니메이션을 무한히 반복합니다.
- alternate: 애니메이션이 반복될 때마다 정방향과 역방향을 번갈아 가면서 재생합니다. (예: 갔다가 돌아오고, 갔다가 돌아오고...)
CSS 변환 (Transforms)
요소의 형태(크기, 위치, 각도 등)를 변경하는 효과를 제공합니다. 2D 변환과 3D 변환이 있습니다.
* 자주 사용되는 2D 변환 함수:
| 함수 | 설명 | 예시 |
| translate(x, y) | 요소를 현재 위치에서 x축으로 x만큼, y축으로 y만큼 평행 이동시킵니다. 하나의 값만 넣으면 x축으로만 이동합니다. (translateX(n), translateY(n)) |
transform: translate(50px, 20px); |
| scale(x, y) | 요소의 크기를 x축 방향으로 x배, y축 방향으로 y배 확대 또는 축소합니다. 하나의 값만 넣으면 가로, 세로 비율을 유지하며 확대/축소합니다. (scaleX(n), scaleY(n)) |
transform: scale(1.5); (1.5배 확대) |
| rotate(angle) | 요소를 중심점을 기준으로 지정된 각도만큼 회전시킵니다. 각도 단위는 deg (도)를 사용합니다. |
transform: rotate(45deg); (45도 회전) |
| skew(x-angle, y-angle) | 요소를 x축 기준으로 x-angle 만큼, y축 기준으로 y-angle 만큼 기울입니다. (skewX(angle), skewY(angle)) | transform: skew(15deg, 10deg); |
✍️ 변환 효과 예시 (마우스 호버 시 약간 확대):
<style>
.zoom-image {
width: 200px;
transition: transform 0.3s ease; /* transform 속성 변경에 전환 효과 적용 */
}
.zoom-image:hover {
transform: scale(1.1); /* 마우스 호버 시 1.1배 확대 */
}
</style>
<body>
<img src="image.jpg" alt="샘플 이미지" class="zoom-image">
</body>