HTML은 모든 웹사이트의 기초이다.
css, javascript만 사용하여 만든 웹사이트는 없지만,
html만 사용하여 만든 웹사이트는 있으니 말이다.
html은 마크업 언어의 일종인데,
마크업 Markup이란?
편집자가 저자의 원고에 변경 사항을 표시하거나,
출판사에 레이아웃 변경을 위해 표시한 기호같은 것이다.
XML,GML, HTML(HyperText Markup Language)은
모두 가운데에 Markup 글자가 들어갔다.
모두 마크업에 기반을 둔 언어라는 뜻이다.
한편,
마크업 언어인 HTML은
태그(Tag)를 사용하여 웹사이트의 레이아웃과 구조를 지정한다.
HTML이 태그를 이용하여 어떻게 웹사이트에서 작동하는지 실습하며 알아보도록 하자.
<실습>
1. codepen 회원가입하기
html 코드를 실습할 때 codepen 사이트를 이용한다.
CodePen
An online code editor, learning environment, and community for front-end web development using HTML, CSS and JavaScript code snippets, projects, and web applications.
codepen.io
sign up 회원가입을 하면,
아래의 창이 보인다.
2. e-book 무료 제공 사이트
html 구조가 적용되지 않은 raw한 텍스트 파일을 보기 위해
e-book 사이트를 이용한다.
회원가입 없이 이용할 수 있다.
다양한 형식의 e-book 형태를 제공하는데,
가장 위와 마지막 파일 두 개를 살펴보자.
1) Read this book online: HTML
제목, 본문 등 구조가 있어 가독성이 좋다.
2) Plain Text UTF-8
그냥 글들이 나열되어 있다. 구조가 없다.
3. 일반 text >> HTML 구조로 바꾸기
<구조1 tag, HTML element>
start tag + Content + End tag
ex) <h1>내 웹사이트입니다</h1>
self_closing tag 자체 종료 태그
ex) <br>, <hr>
- tag
시작이 있으면 끝이 있다.
tag라는 말이 꼬리표라는 뜻인데,
시작이 있으면 꼭 꼬리표를 달아줘야 한다고 했다.
꼬리표는 /를 쓰고 <>안에 해당 단어를 넣어준다.
- HTML element
h1, h2, center, hr, br
head >>>>크기1 <h1> </h1>
head >>>>크기2 <h2> </h2>
중앙배열 >>>>> <center> </center>
Title: Pride and Prejudice
Author: Jane Austen
Release Date: June, 1998 [eBook #1342]
<center>
<h1>Title: Pride and Prejudice</h1>
<br>
<h2>Author: Jane Austen</h2>
<br>
<h5>Release Date: June, 1998 [eBook #1342]</h5>
</center>
<구조2 html Attribute>
<html Element html Attribute=?>
ex) <hr size = "4">
html attribute 속성은
html element 요소 뒤에 스페이스를 하나 띄고 적는다.
브라우저에 추가 정보를 주어 해당 html 요소(html element)에 변경 사항을 지정하는 것이다.
hr의 attribute를 살펴보면,
align, color, noshade, size, width 등이 있다.
<hr size = "3", color = "red">
<center>
<h1>Title: Pride and Prejudice</h1>
<br>
<h2>Author: Jane Austen</h2>
<br>
<h5>Release Date: June, 1998 [eBook #1342]</h5>
</center>
<hr size = "3", color = "blue">
'HTML & CSS' 카테고리의 다른 글
| [41-6 HTML] 1990년대 웹사이트의 모습 (1) | 2022.10.05 |
|---|---|
| [41-5 HTML] html 주석처리 (0) | 2022.10.05 |
| [41-3 HTML] html 공부할 수 있는 사이트, mozilla, w3schools, devocs (0) | 2022.10.05 |
| [41-2 HTML] website 웹사이트가 작동하는 원리 (1) | 2022.10.05 |
| [41-1 HTML] 인터넷, 서버, 클라이언트, ISP, DNS server, 백본 (0) | 2022.10.04 |