1. CSS에서 “값”이란?CSS는 속성: 값; 형태로 스타일을 지정합니다.예를 들어,color: red;font-size: 16px;여기서 red, 16px이 바로 값(Value)입니다.즉, 스타일을 어떻게 적용할지 구체적으로 지시하는 정보가 값입니다. 하지만 우리가 사용할 수 있는 값에는 생각보다 많은 종류가 있습니다. 예를들면 사용자의 화면 크기에 따라 반응하는 vw 단위가 있죠. 따라서 오늘은 다양한 CSS 값에 대해 알아보겠습니다. 2. CSS 값의 유형별 설명2.1 숫자 값단위가 없는 숫자.예: z-index: 3, opacity: 0.75숫자값은 어떤 속성에서는 그대로 사용되지만, 대부분의 CSS 속성에서는 단위와 함께 사용되어야 합니다.2.2 길이 값 (Length)CSS에서 길이는 텍스트..
0. 왜 중요할까?CSS 는 Cascading Style Sheets 의 약자이며, CSS 라는 단어를 이해하는 데 있어 첫 번째 단어 cascading 은 매우 중요합니다. CSS는 여러 규칙이 동시에 하나의 요소에 적용될 수 있습니다. 이때 "어떤 규칙이 실제로 적용될지"를 결정하는 것이 바로 계단식 + 우선 순위 + 상속 + 중요도 (!important)입니다. 이 시스템이 없다면 CSS는 매우 혼란스러울 수밖에 없습니다.즉, CSS 충돌을 해결하는 핵심 규칙 세트입니다. 1. 계단식(Cascade)핵심 개념같은 요소에 여러 규칙이 적용될 때, CSS는 우선 적용할 규칙을 결정해야 합니다.이 과정을 계단식(Cascade)이라고 부릅니다.적용 우선순위 순서 (위에서 아래로 비교)중요도 (!import..
1. 페이지 그리기: 모든 요소는 박스입니다HTML 요소는 브라우저 안에서 직사각형 상자(box) 형태로 표현됩니다.이를 이해해야 레이아웃 설계와 정렬을 더 정밀하게 할 수 있습니다. 2. 박스의 4계층 구조┌──────────── margin ────────────┐│ ┌─── border ───┐ ││ │ ┌─ padding ─┐ │ ││ │ │ content │ │ ││ │ └───────────┘ │ ││ └──────────────┘ │└───────────────────────────────┘Content: 텍스트·이미지 등 실제 내용이 위치합니다. width, heigh..
0. 결합자란?결합자는 HTML 요소 간의 관계를 기반으로 스타일을 적용할 때 사용하는 CSS 선택자입니다.즉, 요소끼리 부모-자식, 형제 등의 구조일 때 어떤 요소를 선택할지를 정합니다. 1. 결합자 종류와 예시결합자이름의미예시설명공백후손 결합자앞 요소의 모든 후손 선택div pdiv 안의 모든 p 선택>자식 결합자바로 아래 자식만 선택ul > liul의 직계 자식 li만 선택+인접 형제 결합자바로 뒤에 오는 형제 요소h1 + ph1 바로 뒤의 p 하나만 선택~일반 형제 결합자뒤에 오는 모든 형제 요소h1 ~ ph1 뒤의 모든 p 형제 요소 선택 2. 결합자 특징결합자 자체는 우선순위 계산에 포함되지 않습니다.대신, 결합자와 함께 쓰는 선택자의 종류(ID, 클래스, 태그 등)가 우선순위에 영향을 줍니다..
1. float란?float 속성은 요소를 왼쪽(left) 또는 오른쪽(right)으로 띄워서 텍스트나 인라인 요소가 그 주위를 감싸도록 만드는 기능입니다.이때 해당 요소는 문서의 일반 흐름(normal flow)에서 벗어나지만, 포지션 절대값(absolute)과 달리 여전히 레이아웃의 일부로 동작합니다. 2. 기본 사용법HTML간단한 float 예제float Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras portti..
0. 의사 클래스란 무엇인가?의사 클래스(Pseudo-class)는 HTML 요소의 특정 상태에 따라 스타일을 적용할 수 있도록 해주는 CSS 기능입니다. 예를 들어 마우스를 올렸을 때, 포커스를 받았을 때, 첫 번째 자식일 때 등 특정 조건을 만족하는 요소에만 스타일을 적용합니다. HTML에 클래스를 직접 쓰지 않아도 동적으로 스타일을 줄 수 있습니다. 예시로 알아보는 의사 클래스 사용 이유다음과 같은 기사가 있습니다. 기사의 첫 번째 단락을 더 크고 굵게 만들고 싶다면 이전에 배웠던 클래스 선택자를 이용해 해당 단락에 클래스를 추가한 다음 해당 클래스에 CSS를 추가할 수 있습니다. Veggies es bonus vobis, proinde vos postulo essum magis kohlr..
