FRONTEND/HTML 18

[FE] HTML 문서 구조 - Doctype, html, head, body

Doctype 문서가 HTML5 문서임을 브라우저에 알려준다. 이것은 실제 HTML 태그가 아니라 브라우저에게 HTML 버전을 알려주는 선언이다. 문서의 HTML 버전을 지정한다. DOCTYPE(DTO, Document Type Definition)은 마크업 언어에서 문서 형식을 정의하며, 웹 브라우저가 어떤 HTML 버전의 해석 방식으로 페이지를 이해하면 되는지 알려주는 용도이다. : 문서의 전체 범위를 지정, 문서가 어디에서 시작하고 어디에서 끝나는지 알려주는 역할 lang 속성은 문서의 주언어가 영어임을 지정 문서의 정보를 나타내는 범위 웹 브라우저가 해석해야하는 웹 페이지의 제목, 설명, 사용할 파일위치, 스타일(CSS)같은 웹 페이지에 보이지 않는 정보를 작성하는 범위 문서의 메타데이터를 포함하..

FRONTEND/HTML 2023.11.10

HTML 튜토리얼 - HTML Iframes

HTML Iframes HTML에서 요소는 한 웹 페이지 내에 다른 웹 페이지를 임베드 할 때 사용됩니다. 이를 통해 사용자는 현재 웹 페이지를 떠나지 않고 다른 웹 페이지의 내용을 볼 수 있습니다. HTML Iframe Syntax HTML 태그는 인라인 프레임을 지정합니다. 인라인 프레임은 현재 HTML 문서 내에 다른 문서를 삽입하는 데 사용됩니다. 요소에 title 속성을 포함시키는 것은 웹 접근성 지침에 따라 권장되는 사항 중 하나입니다. Iframe - 주요 속성 src: 이 속성은 임베드될 페이지의 URL을 지정합니다. width & height: 이러한 속성은 iframe의 너비와 높이를 각각 지정합니다. 이는 픽셀 값이나 퍼센트로 지정될 수 있습니다. frameborder: 이 속성은 i..

FRONTEND/HTML 2023.08.14

HTML 튜토리얼 - HTML id Attribute

HTML id Attribute HTML의 id 속성은 웹 페이지 내의 특정 요소를 고유하게 식별하는 데 사용됩니다. id 속성의 값은 전체 페이지에서 유일해야 합니다. 이것은 CSS와 JavaScript에서 해당 요소에 접근하는 데 매우 중요하게 사용됩니다. Using The id Attribute 고유성 페이지 내에서 id의 값은 고유해야 합니다. 즉, 같은 id를 가진 두 개 이상의 요소가 있어서는 안 됩니다. CSS에서 사용하기 id를 사용하여 특정 HTML 요소에 스타일을 적용할 수 있습니다. CSS에서 id는 해시(#) 기호를 이용해 참조됩니다. The id Attribute CSS를 사용하여 ID가 "myHeader"인 요소의 스타일을 지정합니다 My Header HTML 삽입 미리보기할 수..

FRONTEND/HTML 2023.08.04

HTML 튜토리얼 - HTML class Attribute

HTML class Attribute HTML class속성은 HTML 요소의 클래스를 지정하는 데 사용됩니다. 여러 HTML 요소가 동일한 클래스를 공유할 수 있습니다. Using The class Attribute 속성 class은 종종 스타일 시트에서 클래스 이름을 가리키는 데 사용됩니다. 특정 클래스 이름을 가진 요소에 액세스하고 조작하기 위해 JavaScript에서 사용할 수도 있습니다. 아래 예제는 css 와 JavaScript에 class를 사용해 접근하는 예제입니다. London London is the capital of England. Paris Paris is the capital of France. Seoul Seoul is the capital of Korea. Hide Cities

FRONTEND/HTML 2023.07.28

HTML 튜토리얼 - HTML Block and Inline Elements

모든 HTML 요소는 그 요소의 유형에 따라 기본 display 값이 있습니다. display 값은 두 가지가 있습니다. 블록Block 과 인라인Inline 입니다. Block-level Elements 블록 요소는 항상 새로운 줄에서 시작되며, 전체 사용 가능한 너비를 차지합니다. 이는 블록 요소가 그 전후에 있는 모든 요소와 분리되어 있는 것처럼 보이게 만듭니다. 블록 요소는 보통 구조적인 요소로 사용됩니다. : 일반적으로 스타일링이나 스크립트 작성을 목적으로 사용됩니다. ~ : 제목 태그입니다. 숫자가 높을수록 제목의 수준이 낮아집니다. : 문단을 정의합니다. : 사용자 입력을 위한 양식을 정의합니다. , , 등: 웹 문서의 구조를 정의하는 시멘틱 태그입니다. Block p tag Block div..

FRONTEND/HTML 2023.07.24

HTML 튜토리얼 - HTML Lists

HTML Lists HTML Lists는 웹 페이지에서 항목들을 순서대로 나열하기 위해 사용되는 HTML 요소의 집합입니다. 리스트는 정보를 구조화하고 시각적으로 정돈된 방식으로 표시하는 데 사용됩니다. 크게 순서가 있는 목록과 순서가 없는 목록 등 두 가지 경우로 사용합니다. HTML Lists는 웹 페이지의 정보 구조화에 유용하며, 목차, 항목 목록, 버튼 목록 등 다양한 형태로 사용될 수 있습니다. An Unordered HTML List Coffee Tea Milk An Ordered HTML List Coffee Tea Milk HTML 삽입 미리보기할 수 없는 소스 Unordered HTML List 순서가 없는 목록은 태그로 시작하며 각 목록의 아이템은 태그를 이용합니다. 목록 항목은 기본적..

FRONTEND/HTML 2023.07.21

HTML 튜토리얼 - HTML Tables

HTML Tables HTML 테이블은 웹 페이지에서 데이터를 구조화하고 표시하기 위한 요소입니다. 테이블은 행과 열로 구성되며, 각 셀은 데이터 또는 다른 HTML 요소(이미지, 링크, 목록, 기타 표 등)를 포함할 수 있습니다. 일반적으로 테이블은 데이터를 조직화하고 표 형식으로 표시하기 위해 사용됩니다. Define an HTML Table A basic HTML table Company Contact Country Alfreds Futterkiste Maria Anders Germany Centro comercial Moctezuma Francisco Chang Mexico To understand the example better, we have added borders to the table...

FRONTEND/HTML 2023.07.19

HTML 튜토리얼 - HTML Page Title

HTML Page Title. HTML 페이지 제목(HTML page title)은 웹 페이지의 제목을 나타내는 요소입니다. 브라우저 창의 제목 표시줄이나 탭에 표시되는 텍스트입니다. 또한 검색 엔진 결과 페이지에서도 페이지 제목이 표시됩니다. HTML 문서의 요소 내에 작성한 텍스트는 페이지의 제목으로 사용됩니다. 브라우저는 이 텍스트를 사용자에게 보여주고, 검색 엔진은 페이지를 인덱싱하고 결과 페이지에 표시할 때 이 텍스트를 사용합니다. HTML 페이지 제목은 다음과 같은 목적을 가지고 있습니다: 사용자에게 페이지의 내용을 알려줍니다: 페이지 제목은 사용자가 페이지를 여는 동안 브라우저 탭에서 볼 수 있는 첫 번째 정보입니다. 제목은 웹 페이지의 내용이나 목적을 간략하게 설명하므로 사용자에게 페이지에..

FRONTEND/HTML 2023.07.17

HTML 튜토리얼 - HTML Favicon

HTML Favicon HTML favicon은 웹 사이트의 브라우저 탭에 표시되는 작은 아이콘입니다. "파비콘"은 "Favorites Icon"의 줄임말로 알려져 있으며, 브라우저 북마크 목록이나 웹사이트를 탭으로 열었을 때 아이콘으로 표시됩니다. 이 아이콘은 사용자에게 웹 사이트의 식별성을 제공하고 브랜딩을 강화하는 데 도움이 됩니다. HTML favicon은 일반적으로 ICO 형식의 이미지 파일로 제공됩니다. 그러나 최근에는 PNG, GIF, JPEG 등 다른 이미지 형식도 지원됩니다. 일반적으로 웹 사이트 루트 디렉토리에 "favicon.ico"라는 이름으로 파일을 배치하면 브라우저가 이를 자동으로 인식합니다. 또는 HTML 문서의 This is a Heading This is a paragrap..

FRONTEND/HTML 2023.07.17