HTML (Hyper Text Markup Language)
Mark up
<시작태그> Content(내용) </끝태그>
-
head 태그
web페이지를 제작할 때 head 영역은 눈에 보이지 않는 기능을 호출하는 공간 -
body 태그
눈에 보이는 모든 내용들은 다 body 태크 안에 작성한다.
웹페이지와 소통하기 위해서는 반드시 태크로 문자를 작성 -
h태그 <h1~6> </h1~6>
제목을 만들기 위한 태그 -> h태그
h1 ~ h6 까지 존재 -> 숫자가 늘어 날 수록 글자 크기는 작아진다.
언제 ? h1(대제목) -> 보통 한페이지 한 번만
h2 ~ h6(소제목) -> 보통 중복해서 사용한다.
가장 많이 쓰는 범위 h1 ~ h4 까지! -
p 태그
문단을 작성할 때 사용하는 태그 -> paragraph
1번째 특징 = 문단을 작성하기 때문에 자동으로 한줄 줄박꿈
2번째 특징 = 위아래 약간의 공백이 생긴다.
언제사용? 여러 글자를 작성할 때 가장 먼저 p태그를 만든다. -
span 태그
문장을 작성할 때 사용하는 태크 -> span
특징 = 화면상에 아무런 변화가 없다. -> 크기도 그대로, 줄바꿈 x, 공백 x
문단안에서 특정 문장에 디자인을 주고 싶을 때 사용한다! -
br 태그
줄바꿈을 강제로 할려면
태그를 활용
특징 = 열린태그만 있는 홀태그 구조 -> 닫는 태그가 없다 -> 컨텐츠가 존재 X
이유 = 줄을 바꾸는 기능을 담당하기 때문에 글자를 쓸 공간이 필요 X
사용처 =태그 안에서 태그 등으로 문장을 작성할 때, 강제 줄바꿈이 필요할 때 만 쓰자
-
hr 태그
수평선을 그릴때 -
strong 태그, b 태그
글자크기는 그대로인데, 글자를 두껍게 만드는 태그 -> b태그
b태그와 strong태그 존재
공통점 : 눈으로 봤을 때 똑같이 글자가 두껍게 만들어진다.
차이점 : 스크린리더로 읽었을때 strong태그는 억양을 강하게 한다.(시각장애인을 위해서) -
em 태그, i 태그
글자를 기울어서 작성하는 이탤릭체 -> 논문, 참고문헌을 페이지에 작성할 때!
앞으로 개발하는 모든 사이트 -> 참고하는 모든 사이트에서 i태그가 등장하면
무조건 아이콘이구나 라고 생각하기! -
html 웹사이트는 기본적으로 탭키로만으로도 동작 가능
<!DOCTYPE html>
<html lang="en">
<head>
<!--
web페이지를 제작할 때 head 영역은 눈에 보이지 않는 기능을 호출하는 공간
-->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
눈에 보이는 모든 내용들은 다 body 태크 안에 작성한다.
웹페이지와 소통하기 위해서는 반드시 태크로 문자를 작성
-->
제목 : 안녕하세요!
<!--
제목을 만들기 위한 태크 -> h태크
h1 ~ h6 까지 존재 -> 숫자가 늘어 날 수록 글자 크기는 작아진다.
언제 ? h1(대제목) -> 보통 한페이지 한 번만 / h2 ~ h6(소제목) -> 보통 중복해서 사용한다.
가장 많이 쓰는 범위 h1 ~ h4 까지!
-->
<h1>안녕하세요!</h1>
<h2>안녕하세요!</h2>
<h3>안녕하세요!</h3>
<!--
문단을 작성할 때 사용하는 태그 -> paragraph
1번째 특징 = 문단을 작성하기 때문에 자동으로 한줄 줄박꿈
2번째 특징 = 위아래 약간의 공백이 생긴다.
언제사용? 여러 글자를 작성할 때 가장 먼저 p태그를 만든다.
-->
<p>첫번째 문단입니다. <span>여기만 파란색으로!</span> </p>
<p>두번째 문단입니다.</p>
<!--
문장을 작성할 때 사용하는 태크 -> span
특징 = 화면상에 아무런 변화가 없다. -> 크기도 그대로, 줄바꿈 x, 공백 x
문단안에서 특정 문장에 디자인을 주고 싶을 때 사용한다!
-->
<span>첫번째 문단입니다.</span>
<!--
줄바꿈을 강제로 할려면 <br>태그를 활용
특징 = 열린태그만 있는 홀태그 구조 -> 닫는 태그가 없다 -> 컨텐츠가 존재 X
이유 = 줄을 바꾸는 기능을 담당하기 때문에 글자를 쓸 공간이 필요 X
사용처 = <p>태그 안에서 <span>태그 등으로 문장을 작성할 때, 강제 줄바꿈이 필요할 때 만 쓰자
-->
<br/>
<span>두번째 문단입니다.</span>
<!--
글자크기는 그대로인데, 글자를 두껍게 만드는 태그 -> b태그
b태그와 strong태그 존재
공통점 : 눈으로 봤을 때 똑같이 글자가 두껍게 만들어진다.
차이점 : 스크린리더로 읽었을때 strong태그는 억양을 강하게 한다.(시각장애인을 위해서)
-->
<br>
<b>여기는 b태그로 작성했습니다!</b>
<br>
<strong>여기는 strong태그로 작성했습니다.</strong>
<!--
글자를 기울어서 작성하는 이탤릭체 -> 논문, 참고문헌을 페이지에 작성할 때!
앞으로 개발하는 모든 사이트 -> 참고하는 모든 사이트에서 i태그가 등장하면
무조건 아이콘이구나 라고 생각하기!
-->
<br>
<i>이탤릭체입니다!</i>
<br>
<em>em태그입니다</em>
</body>
</html>코드를 입력하세요