HTML
HTML은 HyperText Markup Language의 약자로, 웹 페이지를 만들기 위해 사용하는 마크업 언어입니다. 즉, 화면을 통해 웹 콘텐츠를 표시하는 문서인 ‘웹 페이지’를 만들기 위해 사용하는 언어입니다. 웹페이지를 만드는 과정에서 HTML은 웹 페이지의 뼈대를 만드는 역할을 합니다.
HTML은 웹 브라우저에게 웹 페이지의 구조를 알려주며, HTML 태그를 사용하여 텍스트, 이미지, 링크, 테이블 등 다양한 콘텐츠를 웹 페이지에 표시할 수 있습니다.
HTML 문서는 일련의 요소(element)로 구성되며, 각 요소는 태그(tag)로 표시됩니다. 예를 들면, <p> 태그는 단락을 나타내고, <img> 태그는 이미지를 나타냅니다. 태그는 시작 태그와 종료 태그로 이루어지며, 시작 태그는 <tag> 형식으로 작성되고, 종료 태그는 </tag> 형식으로 작성됩니다. 일부 요소는 종료 태그를 필요로 하지 않는 경우도 있습니다.
기본형식
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>웹 페이지 제목</title>
</head>
<body>
<h1>제목</h1>
<p>문단입니다.</p>
<img src="image.jpg" alt="이미지">
<a href="https://www.example.com">링크</a>
</body>
</html>위의 예시는 기본적인 html코드 입니다.
- <!DOCTYPE html>: 문서 형식을 나타냅니다. HTML 초창기에 (1991~2년) doctype은 HTML 페이지가 자동 오류 검사나 다른 유용한 것이 가능한 좋은 HTML을 의미하는 연결고리처럼 작동하는 것을 뜻했습니다. 이런 형식으로 사용했습니다. 하지만 요즘에는 별로 신경쓰지 않으며, 그저 모든 것이 제대로 작동하기 위해 포함되어야 하는 역사적 유물일 뿐입니다. "유효한 문서 형식이다" 정도로만 알고있으면 됩니다.
- <head></head>: head 요소는 홈페이지 이용자에게는 보이지 않지만 검색 결과에 노출 될 키워드, 홈페이지 설명, CSS 스타일, character setdeclaration 등 HTML 페이지의 모든 내용을 담고 있습니다.
- <meta charset="utf-8">: 이 요소는 HTML 문서의 문자 인코딩 설정을 UTF-8로 지정하는 것이며 예시에서 지정한 UTF-8에는 전세계에서 사용되는 언어에 대한 대부분의 문자가 포함됩니다.
- <title></title>: title 요소를 사용하면 위의 예시처럼 페이지 제목이 설정되고, 페이지가 로드되는 브라우저 탭에 표시되는 제목으로 사용됩니다. 페이지 제목은 페이지가 책갈피 될 때 페이지를 설명하는 데에도 사용됩니다.
- <body></body>: <body> 요소 여기에는 텍스트, 이미지, 비디오, 게임, 재생 가능한 오디오 트랙 등을 비롯하여 페이지에 표시되는 모든 콘텐츠가 포함됩니다.
속성(Attributes)
앞서 말했던 것처럼 HTML의 요소(element)들은 태그(tag)로 이루어져있는데, 각 요소들은 속성(attributes)을 가질 수 있다.
예시로 요소 중 하나인 <a> 요소는 "anchor"를 의미하는데, 텍스트를 감싸서 하이퍼링크로 만듭니다.
<a href="https://www.example.com" title="예시 웹사이트" target="_blank">링크</a>- href: 당신이 연결하고자 하는 웹 주소를 지정합니다.
- title: 링크에 대한 추가 정보를 나타냅니다. 링크 위로 마우스를 옮겼을 때 나타납니다.
- target: 속성은 링크가 어떻게 열릴 것인지를 지정합니다. 예를들어 "blank"는 새탭에서 링크를 엽니다.
특수문자
HTML에서 문자 <,>, "및 &는 특수 문자입니다.
<p>나는 문장안에 <p>태그를 사용하고 싶어</p>만약 <p></p>태그안에 저렇게 <p>와 같이 특수문자를 포함한 텍스트를 사용하면 <p>는 텍스트가 아니라 요소로 사용됩니다. 해당 특수문자를 HTML 엔티티(entity)로 대체해야 합니다. 엔티티는 특수문자를 나타내는 코드로 변환하여 웹 브라우저가 올바르게 해석할 수 있도록 합니다.
<p>나는 문장안에 <p> 태그를 사용하고 싶어.</p>두 번째 <p>를 텍스트로 사용하고 싶은 경우, <와 >를 엔티티로 대체할 수 있습니다. <는 <로, >는 >로 대체합니다. 따라서, 위와 같이 작성할 수 있습니다.
주석
<!-- 원하는 메모를 적습니다. -->
<!--
이 문장은 외부에서 보이지 않아요.
-->주석은 코드를 실행할 때, 브라우저가 무시하여 사용자가 주석을 보지 못하게 합니다. 주석의 목적은 코드에 메모를 포함시켜 논리 또는 코딩을 설명 할 수 있도록하는 것입니다. HTML 주석을 쓰려면 특수 마커 <!- 및 ->로 주석을 묶습니다. 예를 들면 위와 같습니다.
'Frontend > 개념,공부' 카테고리의 다른 글
| JS - JavaScript? (0) | 2023.06.17 |
|---|---|
| CSS - CSS? (0) | 2023.06.17 |
