- 자연수와 정수의 정의와 차이
자연수의 정의
자연수는 1, 2, 3, 4, ... 처럼 1부터 시작해서 끝없이 이어지는 양의 정수를 말해요. 보통 "셈할 때 쓰는 숫자"라고 생각하면 쉬워요. 즉, 0은 자연수에 포함하지 않고 1부터 시작하는 경우가 많아요. (단, 수학자에 따라 0을 포함시키기도 해요.)
정수의 정의
정수는 음수, 0, 양수 모두 포함하는 수의 집합이에요. ... -3, -2, -1, 0, 1, 2, 3 ... 이런 식으로 음수와 양수가 모두 포함되죠. 소수나 분수는 포함 안 되어요.
차이점
- 자연수는 보통 양수만 포함하지만, 정수는 음수, 0, 양수를 모두 포함해요.
- 자연수는 수를 셀 때 주로 쓰이고, 정수는 음수와 양수를 모두 다뤄야 할 때 쓰여요.
- 표현 상 정수에는 자연수가 모두 포함되지만, 자연수는 정수의 일부 집합이에요.
요약하면, 자연수는 “1, 2, 3...” 양수만 생각하면 되고, 정수는 그 양수에 0과 음수가 딱 붙어 “-2, -1, 0, 1, 2...” 이렇게 확장된 숫자 범위라는 거예요!
- Pseudo-classes
사용자의 동작에 반응하는 가상 클래스 (User Action)
사용자의 상호작용에 따라 실시간으로 스타일이 변합니다.
- :hover: 요소 위에 마우스 커서를 올렸을 때 적용됩니다.
- :active: 요소를 마우스로 클릭하고 있는 순간에 적용됩니다.
- :focus: 탭 키로 이동하거나 클릭하여 요소에 커서가 활성화되었을 때 적용됩니다. (주로 input이나 button에 사용)
CSS
.btn { background-color: gray; transition: 0.3s; }
.btn:hover { background-color: blue; } /* 마우스 올리면 파란색 */
.btn:active { background-color: darkblue; } /* 클릭 시 진한 파란색 */
input:focus { border: 2px solid orange; } /* 입력창 클릭 시 주황색 테두리 */요소의 구조를 이용하는 가상 클래스 (Structural)
요소가 부모 안에서 몇 번째에 위치하는지에 따라 스타일을 지정합니다.
- :first-child: 부모의 첫 번째 자식인 요소를 선택합니다.
- :last-child: 부모의 마지막 자식인 요소를 선택합니다.
- :nth-child(n): 부모의 n번째 자식인 요소를 선택합니다. (2n은 짝수, 2n+1은 홀수 선택 가능)
CSS
/* 리스트의 첫 번째 항목만 글자 크기 키우기 */
li:first-child { font-size: 20px; }
/* 리스트의 짝수 번째 항목만 배경색 입히기 */
li:nth-child(2n) { background-color: #f9f9f9; }링크 및 상태 관련 가상 클래스
하이퍼링크나 폼 요소의 특정 상태를 제어합니다.
- :link: 방문한 적이 없는 링크를 선택합니다.
- :visited: 이미 방문한 적이 있는 링크를 선택합니다.
- :enabled / :disabled: 활성화되거나 비활성화된 폼 요소를 선택합니다.
- :checked: 체크박스나 라디오 버튼이 선택된 상태일 때 적용됩니다.
실전 예제 코드: "반응형 리스트와 폼"
HTML
<style>
/* 1. 리스트 스타일링 */
ul li { padding: 10px; border-bottom: 1px solid #ddd; }
ul li:hover { background-color: #eef; cursor: pointer; }
ul li:first-child { border-top: 2px solid #333; }
ul li:nth-child(odd) { color: navy; } /* 홀수 번째만 남색 */
/* 2. 체크박스 강조 */
input[type="checkbox"]:checked + label {
font-weight: bold;
color: green;
}
/* 3. 비활성 입력창 */
input:disabled { background-color: #eee; cursor: not-allowed; }
</style>
<ul>
<li>첫 번째 항목 (두꺼운 선)</li>
<li>두 번째 항목 (남색 아님)</li>
<li>세 번째 항목 (남색)</li>
<li>네 번째 항목 (남색 아님)</li>
</ul>
<input type="checkbox" id="agree">
<label for="agree">약관에 동의합니다.</label>
<input type="text" value="수정 불가" disabled>주요 가상 클래스 요약표
| 종류 | 가상 클래스 | 의미 |
| 동적 | :hover, :active, :focus | 사용자의 움직임에 반응 |
| 구조 | :first-child, :last-child, :nth-child | 부모 내 순서에 따라 선택 |
| 상태 | :checked, :disabled, :required | 요소의 설정 상태에 따라 선택 |
| 부정 | :not(선택자) | 특정 조건이 아닌 요소만 선택 |
학습 정리
- 가상 클래스는 콜론 하나(:)를 사용하여 작성합니다.
- **:nth-child**는 아주 강력한 선택자로, 복잡한 표(Table)나 리스트 스타일링의 핵심입니다.
- :not() 선택자를 잘 활용하면 예외 케이스(예: 마지막 요소만 제외하고 마진 주기)를 쉽게 처리할 수 있습니다.
- Pseudo-elements
가상 클래스가 '상태'를 선택한다면, 가상 요소는 '특정 부분'을 선택하거나 '새로운 조각'을 만들어냅니다
::before와 ::after (가장 많이 쓰이는 가상 요소)
선택한 요소의 **내부 앞쪽(before)**이나 **내부 뒤쪽(after)**에 새로운 콘텐츠를 추가합니다.
- 특징: 반드시 content 속성이 있어야 화면에 나타납니다.
- 용도: 아이콘 추가, 꾸밈 요소(장식선), 단위 표시(예: '원', '%') 등을 HTML 수정 없이 넣을 때 사용합니다.
CSS
/* 링크 앞에 화살표 아이콘 넣기 */
a::before {
content: "➔ ";
color: blue;
}
/* 필수 입력 항목 뒤에 빨간 별표 넣기 */
.required::after {
content: "*";
color: red;
}글자 및 영역 선택 가상 요소
콘텐츠의 특정 부분만 골라서 스타일을 적용합니다.
- ::first-line: 요소의 첫 번째 줄만 선택합니다.
- ::first-letter: 요소의 첫 번째 글자만 선택합니다. (신문이나 잡지의 첫 글자 강조 효과)
- ::selection: 사용자가 마우스로 드래그하여 블록을 지정한 부분의 스타일을 바꿉니다.
CSS
/* 문단의 첫 글자를 크게 만들고 빨간색으로 변경 */
p::first-letter {
font-size: 3em;
color: red;
float: left;
margin-right: 5px;
}
/* 드래그했을 때 배경색과 글자색 변경 */
::selection {
background-color: black;
color: yellow;
}::placeholder (입력 힌트 스타일링)
input 태그의 placeholder 속성 텍스트에만 스타일을 적용합니다.
CSS
input::placeholder {
color: lightgray;
font-style: italic;
text-align: right;
}실전 예제 코드: "메뉴 구분선 만들기"
::after를 사용하여 메뉴 항목 사이에 세로선(|)을 넣는 실무 기법입니다.
HTML
<style>
.menu-list { list-style: none; display: flex; }
.menu-list li { margin-right: 10px; position: relative; }
/* 마지막 항목을 제외한 모든 리스트 뒤에 세로선 추가 */
.menu-list li:not(:last-child)::after {
content: "|";
margin-left: 10px;
color: #ccc;
}
/* 호버 시 밑줄 애니메이션용 가상 요소 */
.menu-list li:hover::before {
content: "";
position: absolute;
bottom: -5px;
width: 100%;
height: 2px;
background-color: orange;
}
</style>
<ul class="menu-list">
<li>홈</li>
<li>소개</li>
<li>서비스</li>
<li>문의</li>
</ul>가상 요소 vs 가상 클래스 한눈에 비교
| 구분 | 가상 클래스 (Pseudo-class) | 가상 요소 (Pseudo-element) |
| 기호 | 콜론 1개 (:) | 콜론 2개 (::) |
| 의미 | 특정 상태를 선택 | 특정 부분을 선택하거나 생성 |
| 예시 | :hover, :nth-child | ::before, ::after, ::selection |
| 특징 | 실제로 존재하는 요소의 상태 변경 | 존재하지 않는 요소를 만들거나 부분 수정 |
학습 정리
- 가상 요소는 최신 표준에 따라 **콜론 2개(::)**를 사용하는 것이 정석입니다. (하위 호환성을 위해 1개도 작동하긴 합니다.)
- **::before**와 **::after**는 기본적으로 인라인(inline) 요소입니다. 크기를 조절하려면 display: block이나 inline-block으로 바꿔야 합니다.
- HTML 코드를 깨끗하게 유지하면서 디자인적인 요소를 넣고 싶을 때 가장 먼저 고려해야 할 도구입니다
- CSS Functions
CSS 함수를 사용하면 정적인 디자인을 넘어 수학적 계산이나 조건부 스타일링이 가능해집니다
수학적 계산 함수
요소의 크기나 간격을 계산할 때 사용합니다.
- calc(): 서로 다른 단위(예: %와 px)를 섞어서 계산할 수 있게 해줍니다
- min() / max(): 여러 값 중 가장 작거나 큰 값을 선택합니다
- clamp(): 최소값, 유동값, 최대값을 설정하여 반응형 크기를 한 줄로 정의합니다
CSS
.container {
/* 전체 너비에서 100px을 뺀 나머지 */
width: calc(100% - 100px);
/* 폰트 크기를 최소 16px, 최대 32px 사이에서 유동적으로 조절 */
font-size: clamp(16px, 5vw, 32px);
}변형 함수 (Transform)
요소를 회전, 이동, 왜곡, 확대/축소할 때 사용합니다.
- translate(): 요소를 가로(x) 또는 세로(y)로 이동시킵니다
- rotate(): 요소를 지정한 각도만큼 회전시킵니다
- scale(): 요소를 확대하거나 축소합니다
- skew(): 요소를 기울여 왜곡시킵니다
CSS
.box:hover {
/* 오른쪽으로 20px 이동하고 45도 회전하며 1.2배 확대 */
transform: translate(20px, 0) rotate(45deg) scale(1.2);
}색상 및 그래디언트 함수
색상을 정의하거나 부드러운 색 변화를 만듭니다.
- rgb() / rgba(): 적, 녹, 청색과 투명도(a)로 색을 만듭니다
- hsl() / hsla(): 색상, 채도, 명도로 색을 조절하여 직관적인 색 변형이 가능합니다
- linear-gradient(): 선형 그래디언트 배경을 만듭니다
- radial-gradient(): 원형 그래디언트 배경을 만듭니다
CSS
.hero {
/* 오른쪽 아래 방향으로 파란색에서 보라색으로 변하는 배경 */
background: linear-gradient(to bottom right, blue, purple);
color: rgba(255, 255, 255, 0.8); /* 80% 투명한 흰색 */
}기타 유용한 함수들
- var(): 사용자가 정의한 CSS 변수(Custom Properties) 값을 가져옵니다
- url(): 이미지나 폰트 등 외부 리소스 파일의 경로를 지정합니다
- attr(): HTML 요소의 속성값을 가져와 스타일(주로 content)에 사용합니다
CSS
:root {
--main-color: #3498db;
}
.button {
background-color: var(--main-color);
background-image: url('pattern.png');
}주요 CSS 함수 요약표
| 카테고리 | 대표 함수 | 용도 |
| 수학 | calc(), clamp() | 유연한 수치 계산 (반응형 필수) |
| 변형 | translate(), rotate() | 요소의 위치 및 형태 변경 |
| 색상 | rgba(), linear-gradient() | 색상 정의 및 효과 |
| 참조 | var(), url(), attr() | 외부 값이나 변수 활용 |
학습 정리
- calc() 내에서 연산자(+, -) 앞뒤에는 반드시 공백이 있어야 브라우저가 올바르게 인식합니다
- **clamp()**는 미디어 쿼리(@media)를 줄여주는 혁신적인 함수로 현대 웹 디자인에서 매우 선호됩니다
- CSS 함수는 속성의 '값' 자리에 위치하여 동적인 브라우저 환경에 대응하게 해줍니다