HTML 이란?
(Hypertext Markup Language)
마크업 언어로 문서의 틀, 구조를 구성하는 언어이다.
TAG
!를 입력하고 tab 또는 enter를 누르면
왼쪽 위의 사진과 같이 기본적인 html 코드가 나옵니다.
<title> : 인터넷 창의 제목 표시를 나타냅니다.
<h1> ~ <h6> : 제목을 의미합니다. (크고, 굵게) (h1 > h6)
기본적으로 block level element 속성을 가집니다.
<a href=""> : 하이퍼링크 (hypertext reference) 를 의미합니다.
<target="_blank"> : 하이퍼링크 클릭 시 새 창을 열어서 링크를 연결합니다.
<title="“> : 링크에 커서를 올려놓으면 설명박스가 나옵니다.
<p> : 문단 나누기입니다. 앞 문단과 뒷 문단 사이에 빈 줄이 나옵니다.
<strong> : 텍스트 진하게 (<b> 보다 <strong> 사용을 권장합니다.)
<u> : 텍스트 밑줄
<em> : 텍스트 기울이기 (<i> 보다 <em> 사용을 권장합니다.)
<ol> (= ordered list) 리스트를 숫자로 순서 매기면서 구분합니다.
<ul> (= unordered list) 리스트를 순서 매기지 않고 구분합니다.
<li> (= list) 목록, 리스트이고, 부모 tag인 <ol> 또는 <ul>가 있어야 합니다.
<img src=""> : 이미지를 삽입할 때 사용합니다.
<!----> : html의 주석표시입니다.
(단축키 window : ctrl + / )
(단축키 macOS : command + / )
Summary (요약)
밑의 코드는 앞의 내용을 합쳐놓은 코드입니다.
<!DOCTYPE html> <!-- html로 작성된 코드이다. -->
<html lang="en"> <!-- <html> : 가장 높은 tag -->
<head> <!-- 제목, 주제, 목록 -->
<meta charset="UTF-8"> <!-- utf-8로 저장되어있다. -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css"> <!-- 링크(style.css를 적용시킨다.) -->
<title>Document</title> <!-- 인터넷 창의 제목표시 -->
<style> <!-- HTML에서 CSS코드를 입력할 수 있음 -->
body { background-color : tomato; } <!-- 하지만 HTML과 CSS가 섞이기에 비효율적임 -->
</style>
</head>
<body>
<h1>h1</h1> <!-- 제목(크고, 굵게) (h1 > h6) -->
<h2>h2</h2>
<h3>h3</h3>
<h4>h4</h4> <!-- <a href=""> (= hypertext reference) 하이퍼링크 -->
<h5>h5</h5> <!-- <target="_blank"> 하이퍼링크 클릭시 새 창을 열어서 링크를 연결함 -->
<h6>h6</h6> <!-- <title=""> 마우스를 올려놓으면 설명박스가 나옴 -->
</body>
<a href="https://www.w3schools.com/html/html_intro.asp"
target="_blank" title="HTML's specification">What is HTML?</a> <br>
<p>
<strong>123</strong> <br> <!-- <strong> 진하게, <br> 줄바꿈 -->
<u>456</u> <!-- <u> 밑줄, -->
</p> <!-- <p> 문단 나누기 -->
<p>
<em>apple</em> <!-- <em> 기울이기 -->
banana
</p>
<ol>
<li>a</li> <!-- <li> (= list) 리스트, 목록 -->
<li>b</li> <!-- <li>는 부모 tag인 <ol> 또는 <ul>가 있어야 합니다.-->
</ol> <!-- <ol> (= ordered list) 리스트를 숫자로 순서 매기면서 구분함 -->
<ul> <!-- <ul> (= unordered list) 리스트를 순서매기지 않고 구분함 -->
<li>Coffee</li>
<li>Tea</li>
</ul>
<!-- div, span : 아무런 의미가 없는 tag -->
<div>div1</div> <!-- div : block level element의 성격을 가짐 -->
<span>span1</span> <!-- span : inline element 성격을 가짐 -->
</body>
</html>
TAG를 알아보는 시간이었습니다.
틀린 내용은 댓글로 알려주시면 감사하겠습니다.
