HTML 주의사항
태그는 대소문자를 구분하지 않음(소문자 권장)
시작태그로 시작하면 반드시 종료태그로 종료(<br>태그와 같이 종료태그가 없는 경우도 있음)
문자의 공백은 한 개만 인식하기에 공백을 추가하기 위해서는 특수기호를 이용해야 함( )
HTML 기본 구조
<!DOCTYPE html> <!-- 문서유형 -->
<html lang="ko">
<head> <!-- 머리 -->
<!-- 문서의 각종 정보와 문서 자체에 대한 설명
<title>, <meta>, <link>, <style>, <script> 등 사용 -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body> <!-- 몸통 -->
<!-- 화면에 출력해서 보여주는 모든 정보/내용
head 들어가는 태그를 제외하고 모든 태그를 사용 -->
</body>
</html>
Text 태그
<h?></h?>
제목 입력시 사용하는 태그로 폰트의 크기가 h태그 뒤 숫자에 따라 정해짐
h1~h6까지 있음
<br>
문장을 줄 바꾸기(개행)할 때 사용
<hr>
페이지에 가로로 밑줄을 만들어 줄 때 사용
<p></p>
한 개의 단락을 만들 때 사용
자동으로 문장 개행 후 한 줄 공백을 줌
<pre></pre>
입력한 그대로 출력할 때 사용
띄어쓰기, 들여쓰기 줄 바꿈이 입력된 그대로 출력
<strong></strong> 또는 <b></b>
문장에서 문자를 강조하여 굵게 표시할 경우에 사용
화면 낭독기에서 <strong>태그는 해당 부분이 강조되었다고 알려주나, <b>태그는 알려주지 않음
그래서 중요한지 아닌지에 따라 구분해서 사용하면 편리함
<em></em> 또는 <i></i>
문자에 기울임을 주는 태그
화면 낭독기에서 <em>태그는 해당 부분이 강조되었다고 알려주나, <i>태그는 알려주지 않음
그래서 중요한지 아닌지에 따라 구분해서 사용하면 편리함
<blockquote></blockquote>
다른 블로그나 사이트의 글을 인용할 경우 사용
자동 들여쓰기가 되어 다른 텍스트와 구별 가능
블록태그
<q></q>
다른 블로그나 사이트의 글을 인용할 경우 사용
자동 들여쓰기가 되어 다른 텍스트와 구별 가능
인용문구에 "" 표시가 됨
인라인태그(한 줄짜리 짧은 인용문인 경우 사용하는 것이 좋음)
<mark></mark>
배경부분을 노란 형광펜 표시가 된듯하게 출력
Text태그 사용예시
<body>
<h1>text관련</h1>
<hr>
<!--h${h$태그입니다.}*6-->
<h1>h1태그입니다.</h1>
<h2>h2태그입니다.</h2>
<h3>h3태그입니다.</h3>
<h3>h3태그입니다.</h3>
<h2>h2태그입니다.</h2>
<h4>h4태그입니다.</h4>
<h5>h5태그입니다.</h5>
<h6>h6태그입니다.</h6>
<!-- 문단태그 -->
<p>명령·규칙 또는 처분이 헌법이나 법률에 위반되는 여부가 재판의 전제가 된 경우에는 대법원은 이를 최종적으로 심사할 권한을 가진다.
<br> <!--개행태그-->
국가는 농수산물의 수급균형과 유통구조의 개선에 노력하여 가격안정을 도모함으로써 농·어민의 이익을 보호한다.</p>
<p> 대통령은 국가의 원수이며, 외국에 대하여 국가를 대표한다. 형사피해자는 법률이 정하는 바에 의하여 당해 사건의 재판절차에서 진술할 수 있다. 국가는 농지에 관하여 경자유전의 원칙이 달성될 수 있도록 노력하여야 하며, 농지의 소작제도는 금지된다.</p>
<hr>
<!--특수문자-->
<!-- <p>"특수문자" & <tag></p> -->
<p>"특수문자" & <tag></p>
<hr>
<!-- PhrazeTag(문자관련된 것을 묶어서 통칭) : html5의 시맨틱태그 -->
<!-- 스크린리더에게 태그의 내용과 태그의 의미를 정확히 전달하기 위해 사용 -->
<em>기울여서 문자 강조 emphasized</em>
<strong>굵게 문자 강조</strong>
<del>취소선</del>
<ins>밑줄 긋기 inserted</ins>
<mark style="background-color: beige;">형광펜효과로 문자 강조</mark>
<strong><del><mark>동시에 여러 효과를 줄 수 있음</mark></del></strong>
<br>
<!-- pre-formatted 그대로 보여줘라 -->
<pre>
<code> <!--시각적으로는 비슷하지만 스크린 리더가 코드라고 알려줌-->
public void test() {
System.out.println("hello~ world");
}
</code>
</pre>
<!-- p>dfn 특정용어를 정의하는 태그 -->
<p>
<dfn>HTML(Hypertext Markup Language)</dfn>은 웹페이지의 구조를 지정하는 기술적인 언어입니다.
</p>
<!-- ul>li*2 -->
<ul>
<li>inline요소 : 요소가 개행되지 않고, 한 줄에 여러 요소를 나열할 수 있음</li>
<li>block요소 : 하나의 요소가 한 줄을 모두 차지함</li>
</ul>
</body>
글자 형태 관련 태그들
| <u></u> | 밑줄 / <hr>은 페이지 전체에 수평으로 줄을 표 시하지만 <u>는 해당 범위에만 수평줄을 표시 |
| <small></small> | 원 문자보다 작은 글씨로 표시 부가 정보 표현시 자주 사용 |
| <sub></sub> | 아래첨자 |
| <sup></sup> | 윗 첨자 |
| <s></s> | 취소선 |
| <addr></addr> | 약자표시와 함께 마우스가 문자에 있으면 출력 |
| <code></code> | 컴퓨터 인식을 위한 소스코드 <pre>태그 내부에 작성 |
| <kbd></kbd> | 키보드 입력이나 음성명령 같은 사용자 입력내 용 |
| <cite></cite> | 웹 문서나 포스트에서 참고할때 사용 이텔릭으로 표시(브라우저마다 상이) |
'프로그래밍 > HTML' 카테고리의 다른 글
| 09.11(form) (0) | 2020.06.11 |
|---|---|
| 09.10(link, 미디어 관련 태그) (0) | 2020.06.10 |
| 06.09(div와 span, iframe) (0) | 2020.06.09 |
| 06.08(table) (0) | 2020.06.08 |
| 06.05(목록관련 태그와 표관련 태그) (0) | 2020.06.05 |