HTML은 전자문서를 작성할 때 서식을 정의하기 위해 개발되었습니다.
블로그를 운영하는 유저라면 가장 친해져야 할 녀석이지요.
HTML은 Hyper Markup Language의 약자로 전자문서의 확장자입니다.
아래는 HTML의 기본 골격인데요. 하나씩 살펴봅시다.
<!doctype html>
<html>
<head>
<title>내문서</title>
</head>
<body>
내용
3+5
</body>
</html>
<!doctype html>으로 시작합니다. 작성 툴을 사용하면 기본적으로 적용되어 있겠지만 가장 기본이 되는 메모장에서 실행을 하면 텅빈 화면이니 써줍니다. <!doctype html>입력하면 현재 최신 규격인 HTML5가 적용됩니다.
html, head, title, body로 이어지는 기본 디폴트는 암기해서 눈감고도 칠 수 있도록 준비하세요.
Q. 왜 같은 디폴트 값이 2개씩 있을까요?
→ 원하는 내용을 입력한 뒤에는 반드시 슬래시(/) + 디폴트 값으로 닫아줘야 그 내용을 제대로 인식합니다. 화면을 출력했을 때 입력한 내용이 제대로 반영되어 있지 않다면 슬래시가 제대로 먹혀 있는지 확인하세요.
<title>내문서</title> 타이틀은 말그대로 제목을 설정하는데 쓰입니다. 인터넷 창을 여러개 켰을 때 창에 대한 설명이 보이는 부분입니다.
<body>내용</body> 몸통과 /몸통 사이에 내용을 입력하면 해당 내용이 출력됩니다. 주황색으로 표시했지만 실제 출력시에는 검정색 '내용' 이란 글자가 보이지요. 만약 주황색 효과를 넣으려면 color 태그를 활용해야 합니다.
Q. HTML에서 더하기가 안 되는 이유?
→ <body>3+5</body> 몸통에 3+5라고 입력을 하면 8이 아니라 3+5가 화면에 나옵니다. HTML은 연산 등을 수행하는 프로그램이 아니라 그저 문서이기 때문에 있는 그대로를 보여줍니다. 연산을 위해서는 프로그래밍 영역을 활용해야 하는데요. HTML 속성은 문서라고 다시 한 번 강조합니다.
Q. html, head, title, body 값들이 삐뚤빼뚤한 이유?
→ 왼쪽으로 나란히 정렬해도 아무 문제는 없습니다. 똑같은 값은 나오지만 디폴트의 안에 속해 있는 값들을 표현 할 때는 꼭 Tab키를 눌러서 공간을 구분해야 합니다. 몇 줄 정도야 문제 없겠지만 수백 줄이 넘는 HTML문서를 작성하다보면 어떤 내용이 어디에 속했는지 찾을 수 없기 때문입니다. 본인을 위해서도 작업한 내용을 보게 될 다른 사람을 위해서라도 Tab키 활용을 생활화 합시다.
'문돌이의 IT > HTML&CSS' 카테고리의 다른 글
| [문돌이의IT]HTML 목록 지정하는 <ol>, <ul>, <li>태그 (0) | 2016.01.10 |
|---|---|
| [문돌이의IT]HTML 기울기 효과를 주는 <i>, <address>, <cite>태그의 차이점 (0) | 2016.01.09 |
| [문돌이의IT]HTML 문자를 두껍게 만드는 <b>태그, <strong>태그의 차이점 (0) | 2016.01.08 |
| [문돌이의IT]HTML 글자크기 조절 태그 <h> <small> (2) | 2016.01.07 |
| [문돌이의IT]HTML 태그배우기! 줄 바뀌는 <br><p>태그 차이점 (0) | 2016.01.07 |