유키의 티스토리

[HTML 독학 #1] HTML 태그 구성 본문

Learn HTML

[HTML 독학 #1] HTML 태그 구성

Oneway1031 2021. 12. 10. 09:00

디자이너와 코딩은 뗄레야 뗼 수 없는 관계가 아닐까합니다. 디자이너가 코딩을 어느정도 할줄 알면, 추후 회사 선택의 폭이 굉장히 넓어지기 때문에 개발까진 아니여도, 디자이너 혼자서 홈페이지 유지보수 정도는 할줄 알아야한다고 생각하는데요. 기본적으로 디자이너는 HTML, CSS, 자바스크립트 정도만 할줄 알면 된다고 생각합니다. 오늘부터 HTML부터 CSS, 자바스크립트까지 디자이너 알아야 하는 코딩지식에 대해서 하나씩 설명드릴텐데요. 천천히 설명드릴테니까 저와 함께 코딩의 세계로 들어가보시죠! 

 

[HTML 배워보자]

HTML은 웹페이지를 구성하는 프로그래밍언어인데요. 우리가 지금 보고 있는 모든 웹페이지들은 HTML로 구성되어있습니다. 기본적인 HTML 형식은 아래와 같습니다.

(예시 1)
<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
</head>
<body>
    <p>TEST</p>
</body>
</html>

지금은 태그들을 공부하지 않았기 때문에 어떤것인지 알 필요는 없습니다. 

HTML은 태그로 구성이 되어있는데요. 태그는 꺽쇠<, >로 이루어진 것들을 말합니다. 예를 들면 <html></html>은 태그로 볼 수 있습니다. 태그는 기본적으로 사용할 때 구성형식이 명확해야하는데요. 시작과 끝이 태그가 한쌍이 되어야만 합니다. ex. <Tagname>CONTENTS</Tagname>

위 예시1에서도 <title></title>이 한쌍으로 이루어져있는데요. 이렇게 쌍으로 이루어져있어야 인터넷 브라우저가 태그를 읽을 수 있습니다.

예시 2

HTML은 기본적으로 <body> 섹션에 포함되어 있는 컨텐츠들이 브라우저 화면에 보이게 됩니다. 위 예시2 에서는 <body> 태그 안에 <h1>,<p> 태그가 들어있는데요. 실제 출력 화면에서는 아래와 같이 <h1>태그와 <p>태그만 나오게 됩니다. (<h1>태그는 타이틀을 나타낼 때 사용하는 태그이고, <p> 태그는 문장을 나타낼 때 사용하는 태그입니다)

그리고 <head>안에 있는 <title>태그는 브라우저 타이틀에 사용되는 태그입니다. 브라우저 타이틀은 인터넷창의 탭안에 나오는 타이틀 영역을 말합니다. 아래 예시3 사진을 보면 '경제 유치원 : 네이버 블로그' 라고 나와있는데요.

이 부분이 바로 <title>태그안 컨텐츠입니다. 

예시 3

모든 HTML은 큰 뼈대로 <html>, <head>, <body>로 이루어져있습니다. 그 안에 작은 태그들이 들어가며 웹페이지를 구성하게 됩니다.

'Learn HTML' 카테고리의 다른 글

[HTML 독학 #6] Paragraphs 관련 태그 정리  (0) 2021.12.21
[HTML 독학 #5] HTML Headings 태그 정리  (0) 2021.12.17
[HTML 독학 #4] HTML 속성(Attribute)란?  (0) 2021.12.16
[HTML 독학 #3] HTML 요소(element)란?  (0) 2021.12.13
[HTML 독학 #2] HTML 기본형식 공부하기  (0) 2021.12.11
'Learn HTML' Related Articles more