HTML이란
HTML은 Hypertext Markup Language의 약자로 우리가 보는 웹페이지가 어떻게 구조화되어 있는지 브라우저로 하여금 알 수 있도록 하는 마크업 언어이다. HTML은 elements로 구성되어 있으며, 이들을 나타내고 실행하기 위해 각 컨텐츠의 여러 부분들을 감싸고 마크업 한다. 마크업은 태그로 구성되어있는데, 태그(tag)는 웹 상의 다른 페이지로 이동하게 하는 하이퍼링크 내용들을 생성하거나, 단어를 강조하는 등의 역할을 한다.
<p>My cat is very grumpy</p>위의 문장을 웹페이지에 그대로 표시하고 싶다면 태그 중 <p>로 감싸 엘리먼트를 문단으로 명시 할 수 있다. <p>태그는 문단(paragraph)의 약자로, 하나의 문단을 만들 때 쓰인다.
HTML 요소(Elemnet)의 구조
1. 여는 태그(Opening tag) : 요소의 이름과(위 문장에서는 p) 열고 닫는 꺽쇠 괄호로 구성되어있다. 내용이 시작되기 전에위치한다.
2. 닫는 태그(Closing tag) : 요소의 이름 앞에 슬래시(/)가 있는 것을 제외하면 여는 태그와 같다. 요소의 끝에 위치한다.
3. 내용(Content) : 요소의 내용이며 위 문장은 단순한 텍스트로 나타내져 있다.
4. 요소(Elemnet) : 여는 태그, 닫는 태그, 내용을 통틀어서 요소(element)라고 한다.
HTML 문서의 구조
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My test page</title>
</head>
<body>
<p>This is my page</p>
</body>
</html>1. <!DOCTYPE html> : 유효한 문서 형식을 나타내는 문장으로써 문서 형식을 나타낸다.
2. <html></html> : 이 요소는 전체 페이지의 콘텐츠를 포함하며, 기본 요소로 알려져 있다.
3. <head></head> : 이 요소는 홈페이지 사용자에게 보이진 않지만 검색 결과에 노출 될 키워드, 홈페이지 설명, CSS 스타일등 HTML 페이지의 모든 내용을 담고 있다.
4. <meta charset = "utf-8"> : 이 요소는 HTML 문서의 문자 인코딩 설정을 UTF-8로 지정하는 것이며, UTF-8은 전세계에서 사용되는 언어의 대부분의 문자를 표현할 수 있는 타입이다. 인코딩설정을 하지않으면 글씨가 깨져보이기 때문에 꼭 설정해줘야 하는 중요한 요소이다.
5.<title></title> : 페이지 제목을 설정하는 요소이며 페이지가 로드되는 브라우저 탭에 표시되는 제목으로 사용된다.
6.<body></body> : 페이지에 표시되는 모든 콘텐츠가 포함되는 요소이다.
HTML 특수 문자
HTML에서는 특수문자를 사용해서 구문을 나타내기 때문에 특수문자 그자체를 표현하고 싶더라도 웹페이지가 요소로 헷갈려할 수 도 있다. 그렇기 때문에 우리는 특수문자를 나타내기위해 특별한 문자를 적어주어야 한다.
특수문자가 많기 때문에 외울 필요는 없고 구글에
HTML character entity
라고 검색하면 그 특수문자를 나타내줄 Entity Name을 알려준다. 그래서 특수문자 대신에 그 Entity Name을 적어주면 특수문자를 이용할 수 있다. 몇 개 예를 들면 아래와 같다.
| Result | Description | Entity Name |
| 줄 바꿈 없는 공백 |   | |
| < | 보다 작다 | < |
| > | 보다 크다 | > |
| & | 앰퍼센트 | & |
| " | 큰따옴표 | " |
| ' | 작은따옴표 | &apos |
HTML 주석
<p>I'm not inside a comment</p>
<!-- <p>I am!</p> -->HTML에서 주석을 사용할 때에는 위의 예시처럼 <!--주석내용-->을 사용하면 된다. 주석은 코드를 설명해준다는 장점이 있지만 웹서버는 주석까지 같이 웹페이지로 전송해주기 때문에 중요한 정보는 주석에 적지 않도록 해야한다. 그리고 주석은 꼭 필요한 정보가 아니면 너무 많은 주석을 적지말고 최소화하여 사용자가 웹페이지를 사용할 때 성능이 최적화될 수 있도록 권장한다.
'html' 카테고리의 다른 글
| HTML - <input>태그 (0) | 2023.01.17 |
|---|---|
| HTML - 블록(BLOCK)과 인라인(INLINE) (0) | 2023.01.17 |
| HTML - strong태그 vs b태그 / em태그 vs i태그 (0) | 2023.01.16 |
| HTML - 이미지삽입방법 (0) | 2023.01.16 |
| HTML - 하이퍼링크(Hyperlink) (0) | 2023.01.16 |