본문 바로가기

온라인 멘토와 함께하는 공부/HTML43

[HTML] HTML과 XHTML 비교 HTML(HyperText Markup Language)과 XHTML(Extensible HyperText Markup Language) HTML(HyperText Markup Language)과 XHTML(Extensible HyperText Markup Language)은 웹 페이지를 구성하기 위한 마크업 언어들입니다. 각각의 특징과 차이점에 대해 살펴보겠습니다. HTML 정의: HTML은 웹 페이지를 작성하기 위한 가장 기본적인 마크업 언어입니다. 유연성: HTML은 비교적 유연한 문법 규칙을 가지고 있습니다. 예를 들어, 태그의 소문자/대문자 구분이 없고, 일부 태그는 닫지 않아도 문제가 되지 않습니다. 버전: HTML은 시간이 지남에 따라 여러 버전으로 발전해 왔으며, 최신 버전은 HTML5입니.. 2023. 12. 25.
[HTML] 태그로 보는 DOM 구조 태그로 보는 DOM 구조 HTML 문서의 DOM(Document Object Model) 구조를 태그를 기준으로 살펴보겠습니다. 간단한 HTML 예시를 통해 DOM 구조를 설명하겠습니다. HTML 예시: Welcome to My Website This is a sample paragraph. Item 1 Item 2 Item 3 이 HTML 문서를 DOM 트리로 변환하면 다음과 같은 구조를 갖습니다: Document 노드: 모든 DOM 트리의 최상위 노드입니다. 이 예시에서는 전체 HTML 문서를 대표합니다. Element 노드: HTML 태그들이 DOM 트리에서 Element 노드가 됩니다. 예를 들어, , , , , , , , 태그들이 각각 Element 노드로 변환됩니다. Text 노드: HTML .. 2023. 12. 24.
[HTML] DOM(문서 객체 모델)이 작동하는 원리 HTML에서 DOM(Document Object Model)이 작동하는 원리 HTML에서 DOM(Document Object Model)이 작동하는 원리에 대해 설명입니다. DOM의 기본 개념: DOM은 HTML 문서의 구조화된 표현입니다. 이를 통해 프로그래밍 언어가 문서 구조, 스타일, 내용 등을 변경할 수 있습니다. DOM은 문서를 노드(node)의 트리로 취급하며, 각 노드는 HTML 문서의 일부분(예: 태그, 속성, 텍스트 등)을 나타냅니다. HTML 문서와 DOM의 관계: 브라우저는 HTML 문서를 불러올 때 이를 DOM으로 변환합니다. 이 과정에서 HTML 태그들은 DOM 트리의 다양한 노드로 변환되어 상호작용이 가능한 형태로 메모리에 저장됩니다. DOM 트리의 구조: DOM 트리는 루트(보.. 2023. 12. 23.
[HTML] CSS에서 포지셔닝(positioning) CSS에서 포지셔닝(positioning) CSS에서 포지셔닝(positioning)은 요소의 위치를 어떻게 결정할지를 정의하는 중요한 부분입니다. 포지셔닝에는 주로 다섯 가지 유형이 있으며, 각각의 특성에 따라 요소의 배치와 정렬이 달라집니다. 1. Static Positioning 기본값: position: static; 설명: 모든 HTML 요소의 기본 포지셔닝 방식입니다. 요소들은 기본적으로 문서 흐름에 따라 순차적으로 배치됩니다. 특징: top, right, bottom, left 속성이 적용되지 않습니다. 2. Relative Positioning 설정: position: relative; 설명: 요소를 기본 위치에서 상대적으로 이동시킵니다. 이동한만큼의 공간은 여전히 원래 위치에 남아 있습니.. 2023. 12. 10.
[HTML] 마진, 테두리, 패딩, 콘텐츠 비교 마진, 테두리, 패딩, 콘텐츠 비교 마진, 테두리, 패딩, 콘텐츠는 웹 디자인에서 중요한 요소들로, 각각의 역할과 차이점을 예를 들어 설명하겠습니다. 1. 콘텐츠 (Content) 설명: 이는 웹 페이지의 실제 콘텐츠를 담는 부분입니다. 텍스트, 이미지, 비디오 등이 여기에 해당합니다. 예시: 한 웹 페이지에 있는 글이나 이미지 자체가 콘텐츠입니다. 2. 패딩 (Padding) 설명: 패딩은 콘텐츠와 테두리 사이의 내부 공간을 말합니다. 패딩을 조절함으로써 콘텐츠 주변의 여백을 넓히거나 좁힐 수 있습니다. 예시: 글 상자 내부에 글자와 상자 경계 사이의 공간이 패딩입니다. 패딩이 커지면 글자와 상자 경계 사이의 공간이 넓어집니다. 3. 테두리 (Border) 설명: 테두리는 콘텐츠와 패딩을 둘러싼 선입니.. 2023. 12. 9.
[HTML] 아이디(ID)와 클래스(Class) 비교 아이디(ID)와 클래스(Class) 비교 HTML에서 아이디(ID)와 클래스(Class)는 요소를 식별하고 스타일을 적용하기 위해 사용되는 선택자입니다. 두 선택자는 비슷한 기능을 하지만, 사용 목적과 방법에 있어 중요한 차이점이 있습니다. 아이디(ID) 정의: 아이디는 HTML 요소에 부여하는 유일한 식별자입니다. 용도: 특정 요소를 유일하게 식별하고, 그 요소에 스타일을 적용하거나 JavaScript에서 참조할 때 사용합니다. 문법: 아이디는 문서 내에서 고유해야 하며, 한 요소에 하나의 아이디만 부여할 수 있습니다. 예시: ... CSS에서의 사용: #header { background-color: blue; } 클래스(Class) 정의: 클래스는 하나 이상의 HTML 요소에 공통적으로 적용할 수 .. 2023. 12. 8.

티스토리툴바