HTML은 어디다 쓰는 언어?
웹페이지를 만들고 디자인하고 싶을 때 사용합니다.
세상에 존재하는 모든 웹페이지는 html 언어로 작성합니다.
HTML은 Hypertext Markup Language의 약자인데 Markup Language에 주목해주시면 됩니다.
마크업 언어는 "자료의 구조를 표현하기 위한 언어"입니다.
웹페이지에 우리가 글넣고 그림넣고 박스넣고 버튼넣고 .. 자료를 입력하죠?
그 자료들이 어디에 배치되는지 그런 것들을 기록하기 위해 존재하는 언어가 바로 HTML이라고 보면 되겠습니다.
아무튼 여러분이 HTML 언어로 글넣고 그림넣고 하면 웹페이지가 되는 것입니다.
HTML 파일 기본 템플릿
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
HTML 문서는 .html로 끝나도록 저장하시면 되며
모든 HTML 문서는 위의 코드를 가지고 있어야 HTML 파일로 인식합니다.
<head> 내부엔 사이트 생성에 필요한 인코딩형식, 사이트제목, 필요한 CSS나 JS파일 등이 들어갈 수 있으며
<body> 내부엔 실제 웹사이트에서 보여줄 글, 그림 등을 적어주시면 됩니다.
HTML은 <태그>로 작성합니다.
<p>안녕</p> 이런 식의 태그들을 열고 닫은 후 내부에 글을 넣고 그림을 넣을 수 있습니다.
태그들은 종류와 용도가 매우 많이 존재합니다.
글을 작성하고 싶다면 글을 넣을 때 쓰는 태그를 사용하고,
버튼을 넣고 싶으면 버튼을 넣을 때 쓰는 태그를 사용하면 됩니다.
기본 태그 목록
<p>글 본문</p>
<h1>글 제목</h1>
<img src="이미지 경로">
<a href="">링크</a>
<button>버튼</button>
<ul><li>리스트</li></ul>
<ol><li>리스트</li></ol>① 태그를 열었으면 </태그명>으로 닫아야합니다. 닫지 않아도 되는 태그도 몇개 존재합니다. <img> 이런거요
② 특정 태그는 안에 href=" ", src=" " 이런 속성을 집어넣어서 추가정보를 기입가능합니다.
href는 클릭시 이동할 링크를 기입가능하고
src는 파일 경로를 기입가능합니다.
③ 용도에 맞는 태그를 사용해야합니다.
용도에 맞는 태그를 쓰는게 강제되는 사항은 아닙니다.
<p>버튼</p> 이렇게 만든 다음에 버튼처럼 꾸며도 전혀 문제될게 없습니다.
하지만 HTML은 마크업언어기 때문에 자료의 구조를 쉽게 파악할 수 있어야하는데 그럴 때 용도에 맞는 태그 사용하는게 도움이 되고
용도에 맞는 태그를 사용하면 더욱 '웹표준'에 맞는 웹을 만들어낼 수 있습니다.
이미지를 눌렀을 때 다른 곳으로 이동하게(링크) 만들고 싶다면?
링크를 만들 수 있는 <a></a> 태그에 글 넣는건 해보셨죠?
그럼 글 대신 그림을 집어넣을 수 있지 않을까요?
<a href="http://naver.com">
<img src="">
</a>위처럼 하면 가능합니다.
이런 식으로 HTML은 태그 안에 태그를 넣어줄 수도 있습니다.
'html' 카테고리의 다른 글
| 네모박스(box),레이아웃,float, display (0) | 2024.07.04 |
|---|---|
| 글자스타일 및 css (0) | 2024.07.04 |
| css 배경속성(background,position(좌표)) (0) | 2024.07.04 |
| 24.07.03> this, dom (0) | 2024.07.03 |
| 24. 07.02 7일차. git기초 , js자바배열 (0) | 2024.07.02 |