W3Schools Online Web Tutorials
W3Schools Free Online Web Tutorials
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
HTML
: 웹페이지를 만들어 주는 기본 언어
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html><!DOCTYPE html>
선언은 이 문서가 HTML5 문서임을 정의합니다 .
<html>요소는 HTML 페이지의 루트 요소입니다 .
<head>요소에는 HTML 페이지에 대한 메타 정보가 포함됩니다 .
요소 는 <title>HTML 페이지의 제목을 지정합니다(브라우저의 제목 표시줄 또는 페이지의 탭에 표시됨)
요소는 문서 의 <body>본문을 정의하며 표제, 단락, 이미지, 하이퍼링크, 표, 목록 등과 같이 보이는 모든 내용을 담는 컨테이너입니다.
<h1>요소는 큰 제목을 정의합니다 .
<p>요소는 단락을 정의합니다 .
<!DOCTYPE html>
<html>
<head>
<title> html 첫 수업 </title>
<hr>
</head>
<body>
<h1> html 첫 수업</h1>
<h2> html? <h2>
<p>
Hyper Text Markup Language <br>
웹페이지를 만드는 프로그램 언어<br>
웹페이지의 구조를 담당
명령어 (tag)로 구성 됨
</p>
<h2> 명령어 (tag)의 특징 </h2>
<P>
각 괄호 안에 들어가며 시작과 종료의 한 쌍으로 구성됨<BR>
대소문자 구별은 없으나 소문자로 작성<BR>
엔터는 의미 없고 스페이스바는 한 칸만 적용 됨.
</P>
<H2>body안에 들어가는 TAG들</H2>
<p>
p - 문단을 구성하는 tag <br>
br - 줄을 바꾸는 tag <br>
hr - 수평선을 만드는 tag <br>
hn(h1~h?) - 제목 글자 tag <br>
</p>
<hr>
<h3> hn(h1~h6) - 제목글자 tag </h3>
<h1>h1 tag입니다</h1>
<h2>h2 tag입니다</h2>
<h3>h3 tag입니다</h3>
<h4>h4 tag입니다</h4>
<h5>h5 tag입니다</h5>
<h6>h6 tag입니다</h6>
</body>
</html>
hn 6까지만 가능.
여기서 글씨 색이나 꾸미는 것은 CSS
※CSS
웹 스타일 지정을 위한 언어
<!DOCTYPE html>
<html>
<head>
<title>
html 첫 수업
</title>
</head>
<body>
<h1> html(웹문서)을 구성하는 필수 태그들 </h1>
<hr>
<p>
html ... /html - 웹 문서의 시작과 끝을 선언 <br>
head ... /head - 머리말 영역의 시작과 끝을 선언 <br>
title ... /title - 제목의 시작과 끝을 선언 <br>
body ... /body - 본문의 시작과 끝을 선언 <br>
</p>
<h2> 웹문서의 구조</h2>
<!--pre 태그는 공백을 그대로 살려줌 -->
<pre>
< html > - 웹문서의 시작
< head > - 머리말 영역의 시작
< title > ... / < title >
< /head > - 머리말 영역의 끝
< body >
< /body > - 본문의 끝
< /html > - 웹문서의 끝
</pre>
<hr>
<pre>
pre 태그는
공 백 을 소 스 그 대 로
나 타 냄
글 자 는 고정폭 글꼴로 나타 남
</pre>
<h3><! - - 주석 태그 - - ></h3>
<p> 화면에 나타나지 않고 소스 상에만 보이는 설명 등을 추가 </p>
</body>
</html>
< ! - - pre 주석 태그 - - >
명령도 가두는 태그임.
중간에 <hr> 넣어도 안먹힘! 작업 시, 주석을 보기 위해 넣는 태그.
<pre>
pre 태그는 공백 (엔터, 스페이스바)를 그대로 살려줌.
특수문자 tag
<h3><! - - 주석 태그 - - ></h3>
<p> 화면에 나타나지 않고 소스 상에만 보이는 설명 등을 추가 </p>
<hr>
<h3> 특수문자 태그들 </h3>
<p>
&로 시작하고 ; 으로 끝남 <br>
(결과) = (태그) <br>
< = &lt; <br>
> = &gt; <br>
& = &amp; <br>
= &nbsp; <br>
---------------------------------------------------------- <br>
© = &copy; <br>
™ = &trade; <br>
® = &reg;
</p>
< > 같은 괄호를 쓰고 싶지만, 컴퓨터가 명령어로 인식해서 사용하지 못함 => 이것을 '예약어' 라고 한다.
문자 그대로 쓰고 싶다면,
< : <
> : >
< , > 를 그대로 표현하고 싶다면,&를 붙여줘야한다.
&lt; &gt;
= 문자 하나의 공백 (스페이스바랑 같은 역할)
© ™®
'FrontEnd > HTML_CSS' 카테고리의 다른 글
| 0923 HTML - 링크 걸기 mailto: (0) | 2022.09.23 |
|---|---|
| 0916 HTML - 경로, 링크로 나타낼 수 있는 종류 (0) | 2022.09.16 |
| 0902 HTML - 기본 form 태그들.. (1) | 2022.09.02 |
| 0826 HTML - 필수 태그 , input type 값 (0) | 2022.08.26 |
| 0826 HTML - Colspan , Rowspan 속성 (0) | 2022.08.26 |
