HTML day1
| HTML | 텍스트 태그 |
HTML(HyperText Markup Language)
HTML은 간단히 웹문서를 만드는 언어하고 할 수 있다. 웹사이트의 구조를 담당하고 웹사이트 문서에 제목, 문단, 이미지, 동영상들을 정의하고 의미를 부여하는 언어이다. html 문서를 작성하다보면 에러를 확인하고 싶어질 때가 있을 것이다. 그러나 html은 에러를 보여주지 않기 때문에 명확한 코드 작성이 요구된다.
* Markup Language : 특별한 기호나 표기를 사용하여 글의 서식과 스타일을 정해주는 언어로 프로그래밍 언어는 아니다.
HTML의 특징
- 문서를 작업할 수 있는 편집기라면 어떤 것이든 사용이 가능
- 확장명은 .html
- 대소문자를 구별하지 않음(단, 소문자로 작성하는 것을 추천)
- 띄어쓰기, 줄바꿈을 구별하지않고 태그가 별도로 존재함
구조
<html>
<head>
<!--문서의 정보, 화면에 도출X-->
</head>
<body>
<!--실제 브라우저에서 보이는 정보-->
<!-- html의 주석을 표현하는 방법이다.-->
</body>
</html>
* html 태그 : 문서의 시작과 끝을 표시
* head 태그 : 문서의 메타 정보를 정의
* body 태그 : 실제 사용자에게 보여질 화면 구현
<html>
<head>
<title>문서의 제목</title>
</head>
<body>
첫번째 HTML 문서입니다.
</body>
</html>
텍스트 태그
제목 태그 <hn>
- 다양한 크기의 제목을 표현할 수 있는 태그
- 가장 큰 <h1> 태그부터 가장 작은 <h6>태그까지 제목을 표현
- 블록(block) 태그
- 검색엔진은 각 웹사이트의 내용을 h태그를 통해 키워드를 수집
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>제목 태그</title>
</head>
<body>
<h1>제목</h1>
<h2>제목</h2>
<h3>제목</h3>
<h4>제목</h4>
<h5>제목</h5>
<h6>제목</h6>
</body>
</html>
문단 태그 <p>
- 내용상 끊어서 구분할 수 있는 부분 - 블록(block) 태그 // 한줄을 다 사용하는 태그
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>문단 태그</title>
</head>
<body>
<p>내용상 끊어서 구분할 수 있는 부분</p><p>블록(block) 태그</p>
<p>문단을 아래로 내립니다.</p>
문장을 아래로 내릴게요<br>
글씨를 적어볼게요<br>
</body>
</html>
서식 태그 <strong>
- 텍스트를 굵게 표현하고 싶을 때 사용
- <b> 태그와 표현이 동일하지만 <b>태그는 단순히 텍스트를 진하게 표시
- 실제로 페이지 내에서 중요한 부분을 브라우저에게 알려주는 역할
- 웹 접근성에서 사용(리더기에서 강한 발음, 시각장애인에게 사용)
<em>
- 텍스트를 이탤릭체로 표현하고 싶을 때 사용
- <i> 태그와 표현이 동일하지만 <em>태그는 단순히 텍스트를 진하게 표시
- 실제로 페이지 내에서 중요한 부분을 브라우저에게 알려주는 역할
- 웹 접근성에서 사용(리더기에서 강한 발음, 시각장애인에게 사용)
<mark>
- 텍스트에 하이라이팅(형광) 효과를 적용시켜줍니다.
<del>
- 취소선
- 텍스트 중앙에 가로줄을 만들어 텍스트를 지운 것과 같은 효과를 줌
<ins>
- 강조선
- 텍스트 밑에 선을 그어 텍스트의 강조 효과를 줌
<sup>, <sub>
- <sup> 태그는 위첨자에 사용하고, <sub> 태그는 아래첨자에 사용
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>서식태그</title>
</head>
<body>
<h2>서식 태그</h2>
<h3>b태그와 strong 태그의 차이</h3>
<p>b태그는 <b>단순히 글자가 굵게</b> 표현됩니다.</p>
<p>strong 태그는 <strong>중요한 글자를 굵게</strong> 표현합니다.</p>
<h3>i태그와 em 태그의 차이</h3>
<p>i태그는 <i>단순히 글자가 이탤릭체</i> 표현됩니다.</p>
<p>em 태그는 <em>중요한 글자를 이탤릭체</em> 표현합니다.</p>
<h3>mark 태그를 이용한 하이라이팅</h3>
<p>mark 태그를 이용하면 <mark>중요한 부분</mark>을 하이라이팅합니다.</p>
<h3>del 태그를 이용한 삭제 효과</h3>
<p>del 태그는 글자를 마치 <del>지운 것 처럼</del> 표현합니다.</p>
<h4>ins 태그를 이용한 밑줄 효과</h4>
<p>ins 태그를 이용하여 <ins>중요한 글자</ins>에 밑줄을 사용할 수 있습니다.</p>
<h3>sub 태그ㄹ와 sup 태그를 이용한 첨자</h3>
<p>X<sup>2</sup> + Y<sup>3</sup> = Z</p>
<p>물을 나타내는 화학식은 H<sub>2</sub>O 입니다.</p>
</body>
</html>
웹 접근성
정상적인 웹 컨텐츠 사용이 가능한 일반 사용자부터 고령자, 장애인 같은 신체적, 환경적 조건에 제한이 있는 사용자를 포함해 모든 사용자들이 동등하게 접근할 수 있도록 웹 컨텐츠를 제작하는 방법을 말한다.