(html을 복습하기 위해 시작했습니다. 내용이 정확하지 않을 수도 있습니다. 배우면서 계속해서 수정해 나가고 있습니다.)
HTML(HyperText Markup Language)?
html은 hypertext markup language다. 각 단어의 뜻을 해석해서 보면 이해하기 쉽다.
hypertext: 다른 곳으로 이동 가능한 텍스트
markup: 특정한 기호로 표시(mark)한 것
language: 언어
정리하면, html은 다른 곳으로 이동 가능한 텍스트가 있는 문서를 특정한 표시를 해서 만들 수 있는 언어이다.
웹페이지의 정보와 구조를 나타내는데 사용한다.
1. html 기본 문법
(1) 태그, 요소
- 아래 코드에서 태그와 요소 구분
<내용>
사과는 <글씨두껍게>정말</글씨두껍게> 맛있다
<줄구분하기/>
바나나는 <글씨기울이기>더</글씨기울이기> 맛있다
</내용>-
태그
:<와>을 포함한 감싸진 부분을 말한다.
(<글씨두껍게>,</글씨두껍게>,<줄구분하기/>,<글씨기울이기>,</글씨기울이기>)
여기서<글씨두껍게>태그와<글씨기울이기>태그는 글씨를 꾸미는 효과를 시작할 위치와 끝날 위치를 알려주기 위해서 시작할 때 태그 하나를 사용하고, 끝날 때/를 앞부분에 추가한 태그를 사용한다. 시작할 때 사용하는 태그를 시작 태그, 끝날 위치를 알려줄 때 사용하는 태그를 종료 태그라고 부른다.
<줄구분하기>태그 같이 들어갈 내용이 없어 시작과 끝을 지정해줄 필요가 없는 태그는 한 번만 작성해주면 된다. 시작과 끝 표시를 위해 두 번씩 작성해야 하는 태그들과 구분하기 위해 태그를>로 닫기 전에/을 써주며, 이러한 태그를 빈 태그(단일 태그)라고 부른다.위의 태그들은 html에서 사용하기로 약속한 태그들이 아니기 때문에 컴퓨터가 이해하지 못한다. 웹페이지를 만들고 싶으면 컴퓨터가 이해할 수 있는 태그들을 사용해야 한다. 글씨를 두껍게 하고 싶다면,
<글씨두껍게>태그가 아니라 컴퓨터가 이해할 수 있는<strong>태그를 사용해야 한다.- 태그의 종류(semantic & non-semantic)
html에는 다양한 태그들이 있다. 그 중 컴퓨터가 태그를 보고 어떤 용도로 사용될지 알 수 있는 태그는시멘틱(semantic) 태그, 용도를 명확히 알 수 없는 태그는non-semantic태그라고 부른다. 대부분이 시멘틱 태그이며, 대표적인 논 시멘틱 태그에는<span>태그와<div>태그가 있다.위에서 글씨를 두껍게 만들기 위해
<strong>태그를 사용했던 것처럼 태그의 본래 용도에 맞게 의미론적으로 사용하는 것은 굉장히 중요하다.
- 요소
: 요소는 시작 태그, 내용, 끝 태그로 구성된 부분을 말한다.
(<내용> 사과는 <글씨두껍게>정말</글씨두껍게> 맛있다 <줄구분하기/> 바나나는 <글씨기울이기>더</글씨기울이기> 맛있다 </내용>,<글씨두껍게>정말</글씨두껍게>,<글씨기울이기>더</글씨기울이기>)
(2) 속성
속성은 태그에 추가적인 정보를 주어야할 경우 사용하는 것이다. 예를 들어 이미지를 웹페이지에 넣고 싶다면 이미지 태그를 사용한 뒤에 사용할 이미지에 대한 정보(이미지의 위치)를 같이 알려주어야 한다. 이 때, 이미지의 위치 정보를 알려줄 수 있는 src속성에 이미지 위치 정보 값을 속성값으로 알려주면 된다. 속성값은 따옴표로 감싸주어야 한다.
<이미지 주소="이미지가 위치한 주소\이미지 이름"/>
<!--이미지: 태그 이름-->
<!--주소: 속성 이름-->
<!--"c:\Users\...\banana.jpg": 이미지 위치 정보 값-->
<img src="C:\Users\username\OneDrive\바탕 화면\banana.jpg"/>(3) 요소 중첩
하나의 태그 안에는 다른 태그가 들어있을 수도 있고, 다른 태그가 이 태그를 감싸고 있을 수도 있다.
<!--외할아버지 태그는 엄마 태그를 감싸고 있고 엄마 태그는 아들 태그와 딸 태그를 감싸고 있다.-->
<외할아버지>
<엄마>
<아들></아들>
<딸></딸>
</엄마>
</외할아버지>다른 태그를 감싸고 있는 태그를 부모 태그라고 부르고, 다른 태그 안에 들어있는 태그를 자식 태그라고 한다. 엄마태그를 기준으로 부모 태그는 <외할아버지>태그이며, 자식 태그는 <아들>, <딸>태그이다. 부모와 자식의 관계는 상대적이다.
<list>태그나<table>태그 같이 부모와 자식의 관계가 정해져 있는 태그들도 있다.
2. html 문서 기본 구조
<!DOCTYPE html>
<html>
<head>
<!--웹페이지의 본문에 들어갈 내용 이외의 추가 정보를 넣는 곳이다-->
</head>
<body>
<!--웹페이지의 본문 내용이 들어가는 곳이다-->
</body>
</html>(1) !DOCTYPE html
html은 처음 등장했던 1993년 이후에도 계속해서 발전해왔기 때문에 다양한 버전이 존재한다. html의 각 버전은 조금씩 다른 특징을 가지고 있기 때문에, 웹 페이지를 화면 상에 출력하기 위해 브라우저가 html 코드를 해석할 때는 브라우저가 해당 코드의 html 버전을 아는 것이 좋다. 사용하는 html버전을 알려주기 위해서는 html문서 맨 처음에 사용한 html 버전을 알려줄 수 있는 태그를 작성하면 되는데, 이를 문서 형식 정의(DTD) 태그라고 한다. 가장 최근에 나온 html5같은 경우에는 문서 맨 처음에 <!DOCTYPE html>를 작성해주면 된다.
(2) head, body 태그
웹페이지를 만들 때는 웹페이지의 화면에 보여지는 내용뿐만 아니라 웹페이지의 탭 제목 등 추가적인 정보를 제공해주어야 할 때가 많다. 이러한 태그들은 보통 <head>태그 안에 넣어 정리하고, 그 외의 본문 내용과 관련된 태그들은 <body>태그 안에 들어간다. 이렇게 head태그와 body태그를 사용하면 문서를 최대한 구조화시켜 웹페이지 소스를 잘 이해할 수 있다.
