오늘부터 생활코딩 사이트의 html 강의를 들으면서 이곳에 메모를 하며 들을 예정입니다.
이 곳의 내용이 괜찮다고 생각하신다면
생활코딩 사이트 : https://opentutorials.org/course/1/ 이곳으로 방문해서 강의를 들으시는 것을 추천드립니다.
1. 기본문법
웹브라우저에서 웹서버에게 요청을 한다.
웹서버에서는 서버에서 정보를 읽어서 웹브라우저에게 응답을 한다(정보를 보냄)
이 때 보내는 정보가 HTML(Hypertext Markup Language)이다.
Hypertext - 문서와 문서가 링크로 연결되어있다.
{
링크는 HTML의 본질
HTML의 본질은 웹의 본질
== 링크는 웹의 본질
궁극적인 목표는 정보.
}
Markup
TAG - 꼬리표, 달려있는 아이템의 정보를 기술해서
ex_html1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
</head>
<body>
안녕하세요. <strong>생활코딩</strong>입니다.
</body>
</html>
<결과물>
2.HTML 문법 - 속성
- <a>태그 : 이것을 이용해서 텍스트에 링크를 걸 수 있다.
ex) <a href="http://opentutorials.org/course/1">생활코딩</a>
href = 속성명 / http: ~~~~ = 속성값
ex_html2.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
</head>
<body>
안녕하세요. <a href="http://opentutorials.org/course/1" target="_blank">생활코딩</a>입니다.
</body>
</html>
->target="_blank" 값을 같이 입력할 경우 페이지가 현재창이 아닌 새로운 창으로 띄워준다.
->target="_self" 값을 같이 입력할 경우 기본과 마찬가지로 현재창에서 페이지를 연다.
<결과물>
3. HTML 문법 - 태그의 중첩
List를 html에서 사용 또는 표현할 때에는 -> <li> </li>를 표현하면 된다. li는 list 의 약자.
ul == Unordered List 순서가 없는 리스트
ol == Ordered List 순서가 있는 리스트
ex_html3.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>생활코딩</title>
</head>
<body>
<ol>
<li>html</li>
<li>css</li>
<li>JavaScript</li>
</ol>
<ul>
<li>최진혁</li>
<li>최유빈</li>
<li>한이람</li>
</ul>
</body>
<html>
결과물
<!DOCTYPE html> - DOCTYPE이란 html문서가 어떤 표준안에 따라서 작성된 것인지를 기술하는 태그.
없어도 작동은 하지만, 명확하게 해놓는 것이 좋다.
<html>태그 - 이 태그 안에 있는 태그들이 html태그이다. 라는 것을 설명하는 태그
<head>태그 - 문서를 설명하는 정보들을 감싸고 있는 태그
<title> 태그 - head태그 안에 들어가는 태그 중 하나로, 웹페이지의 상단의 제목을 표현할 때 사용하는 태그.
<body>태그 - 웹 페이지의 본문에 해당되는 태그들을 body태그 안쪽에서 정의해야한다.
이 이외의 다양한 태그에 대해 궁금하다면 html Tag Reference를 검색해본다면 많이 나올 것입니다.
한국어로 되어있는 reference가 궁금하시다면 http://opentutorials.org/course/1058 로 접속하시면
한국어로 되있는 Tag 설명을 보실 수 있습니다.