프로그래밍 및 개발 공부하기

CSS margin, padding, border 완벽 정리 1. 개요 웹 페이지에서 요소(예: 박스, 버튼, 이미지 등)는 단순한 글자 덩어리가 아니라 하나의 사각형 박스(Box)로 구성되어 있습니다. 이 박스는 CSS 박스 모델(Box Model)이라 불리며, 그 구조는 다음 4개의 영역으로 이루어집니다. ┌───────────────────────────────┐ │ margin │ ← 바깥 여백 │ ┌─────────────────────────┐ │ │ │ border │ │ ← 테두리 │ │ ┌───────────────────┐ │ │ │ │ │ padding │ │ │ ← 안쪽 여백 │ │ │ ┌─────────────┐ │ │ │ │ │ │ │ c..

CSS 가상 요소(Pseudo-Element) 완벽 정리 1. 가상 요소(Pseudo-Element)란 무엇인가 가상 요소(Pseudo-Element)는 HTML에 실제로 존재하지 않는 “가상의 부분”을 만들어서 스타일을 적용할 수 있도록 하는 CSS 선택자입니다. 즉, 문서 구조에는 없지만, “요소의 특정 부분(예: 첫 글자, 첫 줄, 내용의 앞이나 뒤)” 에 CSS 스타일을 적용할 수 있게 해줍니다. 가상 클래스(:hover, :focus 등)가 “상태”를 나타낸다면, 가상 요소(::before, ::after, ::first-line 등)는 “요소의 일부분”을 가리키는 선택자입니다. 2. 가상 요소의 표기법 가상..

CSS 가상 클래스(Pseudo-Class) 완벽 정리 1. 가상 클래스(Pseudo-Class)란 무엇인가 가상 클래스(Pseudo-Class)는 HTML 문서 구조에는 존재하지 않지만, 특정한 “상태(state)”나 “조건(condition)”에 따라 스타일을 적용할 수 있게 하는 CSS 선택자입니다. 즉, HTML 코드에 별도의 클래스 이름을 추가하지 않아도, “요소가 마우스를 올렸을 때”, “링크가 방문된 후일 때”, “첫 번째 자식일 때” 같은 특정 상황에서 자동으로 스타일을 바꿔줄 수 있습니다. 핵심 개념 가상 클래스는 :(콜론) 기호로 표시합니다. 실제 HTML 구조에는 존재하지 않는 가상의..

HTML 태그와 요소 완벽 정리: 빈 요소, 블록 요소, 인라인 요소까지 1. HTML 문서의 기본 단위HTML은 웹 페이지를 구성하는 가장 기본적인 언어이며,모든 웹 콘텐츠는 “태그(Tag)”와 “요소(Element)”라는 두 개의 기본 단위로 이루어집니다.즉, 웹 문서 한 줄 한 줄이 전부 요소의 집합이며,이 요소들은 태그를 통해 정의된 의미 있는 구조 단위입니다. 2. 태그(Tag)란 무엇인가태그(Tag)는 HTML에서 콘텐츠의 역할이나 의미를 표시하기 위한 기호입니다.태그는 꺾쇠 괄호(``)로 감싸서 작성하며, 대부분 쌍으로 열고 닫습니다.기본 형태는 다음과 같습니다.내용예시:안녕하세요 → 여는 태그(Opening Tag) → 닫는 태그(Closing Tag) “안녕..

HTML의 구조 완벽 정리: head, link, meta, style, title, body의 역할까지 1. HTML 문서의 전체 구조HTML 문서는 계층적인 구조(Tree Structure)를 가집니다.모든 HTML 파일은 시작 태그(``)부터 끝 태그(``)까지 감싸진 형태로 이루어집니다.그 내부는 두 개의 큰 영역, 즉 ` 구분 역할 문서 전체를 감싸는 루트(root) 요소 3. — 문서의 속성 및 정보 태그는 문서 자체의 정보(메타데이터)를 정의합니다.이 정보는 브라우저가 문자 인코딩, 페이지 크기, 작성..

시맨틱 요소(Semantic Element)란 무엇인가 1. 시맨틱(Semantic)의 의미“시맨틱(Semantic)”이란 ‘의미론적인(meaningful)’이라는 뜻입니다.따라서 시맨틱 요소(Semantic Element)란“브라우저나 개발자가 해당 콘텐츠의 의미를 이해할 수 있도록 이름 자체에 의미가 담긴 HTML 요소”를 말합니다.즉, 단순히 화면을 꾸미기 위한 태그가 아니라,‘이 부분이 어떤 역할을 하는지’를 명확히 알려주는 요소입니다. 2. 시맨틱 요소의 목적HTML5 이전에는 나 처럼 의미가 없는(non-semantic) 요소로 대부분의 구조를 표현했습니다.예를 들어, 웹 페이지의 상단 영역을 다음처럼 만들었습니다.......이 코드는 개발자 본인은 구분할 수 있지만,브라우저, 검색..