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

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

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

HTML 엔티티 코드(Entity Code) 정리 1. 엔티티 코드란? HTML에서 엔티티 코드(Entity Code)는 브라우저가 태그로 인식하거나 키보드에서 입력하기 어려운 특수 문자를 표현하기 위해 사용하는 코드입니다. 예를 들어 , >, & 같은 기호는 HTML 문법에서 중요한 의미를 갖기 때문에 그대로 입력하면 문제가 생깁니다. 이럴 때 엔티티 코드를 사용하면 안전하게 표시할 수 있습니다. 2. 엔티티 코드 표기 방식 이름 방식(Name) : &로 시작하고 ;로 끝납니다. 예: < → 숫자 방식(Number) : &#숫자; (10진수) 또는 &#x16진수; 형식. 예: < 또는 < →..

HTML 태그 정리: , , , 1. — 수평선(Horizontal Rule) (1) 정의 태그는 문단 사이에 수평선을 삽입할 때 사용합니다. 주로 내용 구분, 시각적인 단락 분리 용도로 사용됩니다. (2) 특징 빈 태그(Empty tag): 닫는 태그()가 없습니다. 브라우저가 기본 스타일을 적용해서 가로줄이 표시됩니다. CSS로 굵기, 색상, 스타일을 조정할 수 있습니다. (3) 예시 첫 번째 문단입니다.두 번째 문단입니다. 출력 결과: 첫 번째 문단입니다. 두 번째 문단입니다. 2. ..

인라인 요소와 블록 요소 정리 1. 인라인 요소와 블록 요소의 정의 HTML 태그는 크게 두 가지 성격을 가집니다. 바로 블록 요소(Block-level element)와 인라인 요소(Inline element)입니다. 블록 요소(Block) : 화면에서 하나의 “덩어리”로 취급되는 요소. 줄 전체를 차지하며, 항상 새 줄에서 시작합니다. 인라인 요소(Inline) : 줄 안에서 다른 요소와 나란히 표시되는 요소. 줄 전체를 차지하지 않고 글자처럼 이어지는 성격을 가집니다. 2. 블록 요소의 특징 줄바꿈이 자동 발생 ..

HTML 목록 요소 정리 (UL, OL, LI, DL) HTML 목록 요소의 개요 웹 페이지에서 정보를 나열할 때 가장 많이 쓰이는 것이 목록(List)입니다. HTML은 목록을 만들기 위해 여러 가지 요소를 제공합니다. 대표적으로 UL, OL, LI, DL, DT, DD 등이 있습니다. 1. 순서 없는 목록 (Unordered List: ) 설명: 순서가 중요하지 않은 항목들을 나열할 때 사용합니다. 기본 표시: 각 항목 앞에 점(•)이나 원(○) 같은 기호가 붙습니다. 사과바나나포도 출력 결과: 사과 바나나 포도 👉 특징: 항목의 ..