!DOCTYPE태그
HTML 파일이라면 제일 첫 줄에 위치해야 하는 선언문.
모습은 태그와 비슷하지만 HTML 태그가 아님, 이 HTML파일이 무슨 버전의 HTML인지를 알려줌.
(e.g. <!DOCTYPE>는 HMTL5)
HTML태그
<!DOCTYPE>을 제외하고 모든 HTML 엘리먼트(elements)는 <html>``</html>으로 감싸져 있음.
브라우저가 html태그를 만나면, html이 시작됐는지 인지하고 요소를 그릴 준비를 함
head태그
<head>태그는 메타데이터를 포함하기 위함.
HTML 문서의 title, style, link, script에 대한 데이터로 화면에 표시되지 않음.
▶ 소스
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
</head>
</html>▶ 설명
<meta charset="utf-8">: 한글, 일본어, 중국어가 포함된 페이지라면 utf-8 이라는 값으로 문자 인코딩을 추가해줘야 함.<meta name="viewport" content="width=device-width">: 디바이스의 가로 크기가 곧 웹페이지의 가로와 같다는 의미로, 모바일에서 웹사이트가 최적화되게 잘 보이려면 추가해야하는 정보.<title>repl.it</title>: 브라우저 탭에 보이는 페이지의 이름.
meta태그
<meta>태그는 description, keywords, author, 기타 메타데이터 정의에 사용.
메타데이터는 브라우저, 검색엔진, keywords 등에 의해 사용된다
charset 어트리뷰트는 브라우저가 사용할 문자셋을 정의
▶ 소스
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<p>안녕하세요</p>
<p>Hello</p>
<p>こんにちは</p>
<p>你好</p>
<p>שלום</p>
<p>สวัสดี</p>
</body>
</html>▶ 결과
title태그
<title>태그는 문서의 제목을 정의
브라우저의 탭에 표시됨
▶ 소스
<head>
<title> 타이틀이야 </title>
</head>style태그
<style>태그는 HTML문서를 위한 style정보를 정의
CSS관련 정보로 별도로 css파일로 정의가능함.
▶ 소스
<head>
<style>
body{
backgroun-color: yellow;
color: blue;
}
</style>
</head>▶ 결과
link태그
<link>태그는 외부 리소스와 연계 정보를 정의.
HTML과 외부CSS등의 파일과 연계에 사용
▶ 소스
<head>
<meta charset="utf-8">
<title>문서 제목</title>
<link rel="stylesheet" href="style.css">
</head>script태그
<script>에는 client-side-Javascript 즉, 자바스크립트 관련 내용을 정의
▶ 소스
<head>
<meta charset="utf-8">
<script>
document.addEventListener('click', function () {
alert('Clicked!');
});
</script>
</head>body태그
<body>태그는 항상 <head>태그 다음에 위치해야함
<body>태그 내부에는 화면에 보여져야할 레이아웃대로 가종 태그들이 존재
h1, h2, h3, h4, h5 태그
주로 제목같은 텍스트를 보여줄때 사용하는 태그
h1에서 h5까지 있으며, 숫자가 올라갈 수록 글씨 크기가 점점 작아짐
▶ 소스
<body>
<h5>자기소개</h5>
<h1>오늘의 수업 내용</h1>
<h2>중요한 태그들..</h2>
</body>▶ 결과
span태그
<span>태그는 주로 텍스트를 넣음
개행이 되지 않고 글자 그래도만 출력하여 보여짐.
inline 엘리먼트
▶ 소스
<span>이름: 김개발</span>
<span>직업: 프론트앤드 개발자</span>▶ 결과
p태그
<p>태그 또한 주로 텍스트를 기입.
paragraph의 줄임말로 주로 문단을 통채로 넣음.
block 엘리먼트
▶ 소스
<p>tag들 파헤치기!!</p>
<p>아자!!</p>▶ 결과
br태그
<br>태그는 (강제)개행 즉 line break을 지정한다.
<br>태그는 빈 엘리먼트로 종료태그가 없다
▶ 소스
<!DOCTYPE html>
<html>
<body>
<p>This is<br>a para<br>graph with line breaks</p>
</body>
</html>▶ 결과
pre태그
<pre> 태그는 형식화된(preformatted) text를 지정한다. 그래서 그 text 그대로 브라우저에 출력한다
소스
<!DOCTYPE html>
<html>
<body>
<p>HTML은 1개 이상의 연속된 공백(space)과 1개 이상의 연속된 줄바꿈(enter)을 1개의 공백으로 표시한다.</p>
<pre>
var myArray = [];
console.log(myArray.length); // 0
myArray[1000] = true; // [ , , ... , , true ]
console.log(myArray.length); // 1001
console.log(myArray[0]); // undefined
</pre>
</body>
</html>▶ 결과
hr태그
<hr>태그는 수평줄을 삽입하여 개행한다
▶ 소스
<!DOCTYPE html>
<html>
<body>
<h1>HTML</h1>
<p>HTML is a language for describing web pages.</p>
<hr>
<h1>CSS</h1>
<p>CSS defines how to display HTML elements.</p>
</body>
</html>▶ 결과
q태그
<q>태그는 짧은 인용문(quotation)을 지정한다.
브라우저는 인용부호(큰따옴표/quitation marks)로 q요소를 감싼다
▶ 소스
<!DOCTYPE html>
<html>
<body>
<p>Browsers usually insert quotation marks around the q element.</p>
<p>WWF's goal is to: <q>Build a future where people live in harmony with nature.</q></p>
</body>
</html>▶ 결과
blockquote태그
<blockquote>태그는 긴 인용문 블록을 지정한다.
브라우저는 blockquote 엘리먼트를 들여쓰기한다. 또한 CSS를 활용하여 다양한 style 적용이 가능하다.
▶ 소스
<!DOCTYPE html>
<html>
<body>
<p>Browsers usually indent blockquote elements.</p>
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</blockquote>
</body>
</html>▶ 결과
a태그
<a>태그는 클릭하면 화면이 이동.
어트리뷰트(attribute, 속성) href에 이동해야할 주소를 기입.(태그는 href 속성사용)
▶ 소스
<a href="https://www.w3schools.com/tags/tag_div.asp" target="_blank">div 태그?</a>
▶ 결과
div태그
<div>태그는 웹사이트에서 여러 태그들을 묶어서 섹션을 나눌 때 사용.
<div>를 사용하는 이유
-
비슷한 부분끼리 그룹지어주기 위해
-
디자인에 맞게 레이아웃을 분리하기위해
-
각
<div>에 class나 id라는 어트리뷰트를 부여하여 css 스타일을 적용하기위해
