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..
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..
CSS가 실제로 어떻게 작동할까?웹 브라우저가 HTML과 CSS를 받아들여 화면에 표시하기까지의 과정을 단계별로 알아보겠습니다. HTML 파일 불러오기브라우저가 서버나 파일에서 HTML 문서를 가져옵니다.DOM 트리 만들기 (HTML → DOM)HTML을 파싱해서 “DOM (Document Object Model)”이라는 트리 구조로 변환합니다. 각 HTML 요소가 하나의 노드로 변합니다.필요한 리소스 가져오기이미지, 동영상, 그리고 link rel="stylesheet" … 같은 연결된 CSS 파일들을 함께 불러옵니다.CSS를 파싱해서 규칙 분류하기브라우저가 CSS를 읽고, 선택자별로 규칙을 분류한 뒤, DOM의 어떤 노드에 어떤 스타일을 적용할지 계산합니다. 이 결과를 “렌더 트리(render tre..
