WEB의 핵심 = “연결”!
-HTML : 언어의 구조를 잡아주는 것
- HTML은 Hyper Text(연결 기능이 있는 문서) Markup Language의 약자입니다.
- HTML은 웹 페이지를 만들기 위한 표준 마크업 언어입니다.
- HTML은 웹 페이지의 구조를 설명합니다.
- HTML은 일련의 요소(tag)로 구성됩니다.
- HTML 요소는 브라우저에 내용을 표시하는 방법을 알려줍니다.
- HTML 요소는 "이것은 제목입니다", "이것은 단락입니다", "이것은 링크입니다" 등과 같은 콘텐츠 조각에 레이블을 지정합니다.
-CSS : 웹페이지의 스타일을 꾸미는 것 “The language for styling web pages******”******
-JavaScript : 프로그래밍. 동적의 기능 “The language for programming web pages”
-HTML + CSS : 웹 페이지 만들 수 있음
- 웹사이트→HTML 홈→learn HTML→직접해보기
<명령어></명령어> : tag
- HTML 소개
- 선언 <!DOCTYPE html>은 이 문서가 HTML5 문서임을 정의합니다.
- 요소 <html>는 HTML 페이지의 루트 요소입니다.
- 요소 <head>에는 HTML 페이지에 대한 메타 정보가 포함되어 있습니다.
- 요소 <title>는 HTML 페이지의 제목을 지정합니다(브라우저의 제목 표시줄이나 페이지의 탭에 표시됨).
- 요소 <body>는 문서의 본문을 정의하고 제목, 단락, 이미지, 하이퍼링크, 표, 목록 등과 같이 보이는 모든 내용을 담는 컨테이너입니다.
- 요소 <h1>는 큰 제목을 정의합니다.
- 요소 <p>는 단락을 정의합니다.
HTML 요소란 무엇입니까?
HTML 요소는 시작 태그, 일부 콘텐츠 및 종료 태그로 정의됩니다.
< tagname > 내용... < /tagname >
HTML 요소는 시작 태그에서 종료 태그까지의 모든 것입니다.
< h1 > 첫 제목 < /h1 >
< p > 첫 단락. < /p >
HTML 페이지 구조
- HTML 페이지 구조의 시각화
-tag의 시작과 끝은 항상 짝으로 표시.
HTML 입문자는 메모장으로 하는게좋다.
-자동완성이 안되서 직접 써보는 장점이 있다.
[필수 tag]
<html> //웹 사이트 열기
<head> //머릿글 -- 화면 노출 목적이 아님
<title> 제목 </title> //문서 전체를 대표하는 제목 (Tap 제목)
</head>
<body> //본문 -- 화면 노출 목적
</body>
</html>
-html 코드쓸 땐 소문자로 ← 가독성 위해
-code 작성할때, 띄어쓰기는 한칸만 적용되고, 줄바꿈(enter)는 적용불가 → 전용 명령어가 있음
-tag는 용도에 맞게 사용해야함 (글자크기, 글자색상 - css)
<br> : 줄바꿈tag (line break) // 문단의 마지막 문장은 줄바꿈을 할 필요가 없다 -> 문단끝나면 자동 한 줄 비움
<h1> </h1> : 제목글자tag //3가지가 바뀜 >> 글자크기, bold체, 위 아래 한 줄 비움
<h2> </h2> : 소제목글자tag // <h1></h1> 보다 글자가 작음
<p> </p> : 문단tag //문단 하나가 끝나면 아래 한 줄 비움
<hr> : 수평선tag(horizon) //수직선은 없음
<html>
<head>
<title> html 첫 시간 </title>
</head>
<body>
<h1> html 첫 시간 </h1>
<h2> html이란? </h2>
<p>
웹문서를 만드는 언어 <br>
구조를 담당함 <br>
명령어를 tag라하며, 각괄호에 들어가고
대소문자 구별은 안함 - 소문자 권장사항 <br>
시작tag와 종료tag의 한 쌍으로 구성됨
</p>
<p>
줄바꿈 적용 불가, <br>
띄우기는 한 칸만 적용 됨 <br>
</p>
</body>
</html>
제목글자 <hn> </hn>tag (n=1~6)
<h1> h1 tag 입니다 </h1>
<h2> h1 tag 입니다 </h2>
<h3> h1 tag 입니다 </h3>
<h4> h1 tag 입니다 </h4>
<h5> h1 tag 입니다 </h5>
<h6> h1 tag 입니다 </h6>
<h7> h1 tag 입니다 </h7>
<h8> h1 tag 입니다 </h8>
<hn> </hn> tag는 무한정tag가 아니라 한계가 있다.
n=1~8까지 시도해보니 n은 1~6번까지 한계가 있는 것을 알 수 있음
n=7,8은 아래 한 줄 띄움도 안되는 것을 알 수 있음
pre 태그
<pre> </pre> : 문단 안에 공백(들여쓰기) 적용 but, 글꼴이 바뀜 -> 간단한 편집에만 사용
<!-- 주석 내용 --> : 주석, 소스가 길수록 가독성을 위해 주석을 추가해줌. tag 넣어도 적용안됨
글자를 변화시키는 태그들
-서식은 주로 CSS에 들어감
-글자 크기는 줄이는 것 밖에 안됨
<b> bold체로 바꿀 내용 </b> : **볼드 (의미가 없음)**
<strong> bold체로 강조할 내용 </strong> : **중요한 의미의 볼드체**
<i> 이텔릭체로 바꿀 내용 </i> : *이텔릭체*
****<em> 이텔릭체로 강조할 내용 </em> : *중요한 의미의 이텔릭체*
*****bold != strong (정보의 무게 차이)
*i != em (정보의 무게 차이)
<small> </small> : 글자 크기를 작게
<sup> </sup> : 윗첨자
<sub> </sub> : 아랫첨자
<mark> </mark> : 형광펜 // 노란색뿐. 다른색은 CSS
윗, 아랫첨자 tag를 사용하면 화학식과 수식도 표현할 수 있다.
~문제~<br>
1. 화학식 :
O<sub>3</sub>
CO<sub>2</sub>
H<sub>2</sub>O <br>
2. 수식 : 30km<sup>2</sup>
2cm<sup>3</sup>
<h4> O? X? </h4>
<p>
1. <mark><b> mark bold </b></mark> =( O ) <br>
2. <mark><b> mark bold </mark></b> =( X ) <br>
3. <b><mark> mark bold </b></mark> =( X ) <br>
4. <b><mark> mark bold </mark></b> =( O ) <br>
</p>
<h4> O? X? </h4>
<p>
1. <mark><b> mark bold </b></mark> =( O ) <br>
2. <mark><b> mark bold </mark></b> =( X ) <br>
3. <b><mark> mark bold </b></mark> =( X ) <br>
4. <b><mark> mark bold </mark></b> =( O ) <br>
</p>
[2,3번이 틀린이유]
-결과는 문제없어 보이지만, 코드에 문제가 있음 (같은 게 아님)
-순서는 상관없지만, 꼬이면안됨. tag는 감싸야함!
<p><b>1. bold</b> = (O) </p>
<b><p>2. bold</p> = (X) </b>
시 응용
<h2>시 응용</h2>
<h3>풀꽃</h3>
<pre> 나태주</pre>
<p> 자세히 보아야 예쁘다 <br>
오래 보아야 사랑스럽다 <br>
<b><mark><i> 너도 그렇다 </i></mark></b> </p>
특수문자 ‘<’, ‘>’쓰기
-html문서에서 ‘<’ 와 ‘>’는 용도가 정해져있어서 아무데나 쓸 수 없음.
but, 특수문자 <’ 와 ‘>’로 쓰고 싶다면 다른 명령어를 사용해야함
특수문자 '<', '>' 사용하기
특수문자 예약어 '**<**' : <
특수문자 예약어 '>' : >
<html> --- html문서의 시작을 선언
<head> --- 머리말의 시작을 선언
<title> /title --- 문서의 제목
</head> --- 머리말의 끝을 선언
<body> --- 본문의 시작을 선언
</body> --- 본문의 끝을 선언
</html> --- html문서의 끝을 선언
외워야하는 특수문자들
1. ‘<’, ‘>’
예약어 < = < <br>
예약어 > = > <br>
위 코드의 왼쪽은 불안정한 코드기 때문에
< = < <br>
> = > <br>
로 바꿔줘야함
2. &
예약어 & : &
&amp; = & <br>
3. : non-breaking space
공백
공 백 <br>
-spacebar 없이 공백 생김
-글자높이의 공백이 생김
-줄바꿈 없는 공백(nbsp) 넣기
4.©, ®, ™
&copy; = © <br>
&reg; = ® <br>
&trade = ™ <br>
특수문자 태그들
< = < <br>
> = > <br>
& = & <br>
&lt; = < <br>
&gt; = > <br>
&amp; = & <br>
<br>
<!--<Title>-->
<Title><br>
<!--Coffee&Tea-->
Coffee&Tea <br>
<!--공 백-->
공 백 <br>
</p>
<p>
&copy; = © <br>
&reg; = ® <br>
&trade = ™ <br>
Symbol 찾기
-https://www.w3schools.com/ → HTML Entities/ HTML Symbols → 예약어 알려줌
W3Schools 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
