[HTML] 기본 문서 작성(1)

💻/웹

[HTML] 기본 문서 작성(1)

ruhz 2020. 10. 17. 03:31

HTML 기본

<!DOCTYPE html>
<html>
    <!--head : 문서제목, 자바스크립트 코드, CSS 스타일 정의, 메타데이터 정의-->
    <head>
    	
        <!--title: 창 상단의 제목 정의-->
        <title></title>
    
    </head>

    <!--body : 문서의 본문 텍스트, 이미지, 표, 자바스크립트 코드, 동영상 등-->
    <body>
    
        <!--태그이름, 속성1(속성이름=속성값), 속성2, ...-->
        <!--*이름, 속성 대소문자 구분 X, 속성에 공백은 표준이 아님-->
        <img src='scene.png' width="100" height="80">
        
    </body>
</html>

html, head, body, title은 필수 태그이다.

기본 태그들

<h1>, <h2>, ... <h6> : 문단 제목을 다는 태그
<p> : 단락을 나누는 태그
<hr> : 수평선 긋는 태그
<br> : 줄바꿈 태그
<pre> : 원래는 태그가 아닌 줄바꿈이나 여러개의 빈 칸은 빈 칸 하나로 처리하지만, 그대로 출력

특수문자, 기호

÷ : 나누기 연산자
√ : 루트
  : 빈칸
< : 부등호
" " : 따옴표 등

텍스트 꾸미기

<b> : 진하게
<strong> : 중요한
<em> : 강조
<i> : 이탤릭으로 강조
<small> : 한 단계 작은 문자
<del> : 가운데 선
<ins> : 밑줄
<sup> : 윗첨자
<sub> : 아랫첨자
<mark> : 하이라이팅

<body>
	<p><b>다음은 </b><u>html 문서의 글꼴 태그</u>를 응용하여 만든 예제입니다</p>
	<p>안녕<sub>하세요</sub> <b><i>웹프로그래밍</i></b> 과목에 오신걸 <b>환영합니다.</b></p>
	<p><sup>다음 화면과</sup> 같이 보이도록 <small>글꼴 태그</small>를 <s>적절히 사용하여</s> 작성하시오.</p>
</body>

블록 태그, 인라인 태그

태그는 크게 두 종류로 나뉘는데 그것이 블록태그와 인라인 태그이다. 블록태그는 항상 새 라인에서 시작하며, 양 옆에 다른 콘텐츠를 배치하지 않고 한 라인을 독점 사용한다. 인라인 태그는 이런 블록태그 안에 삽입되어 블록의 일부로 출력된다. 대표적인 예로, 블록태그는 <div>, 인라인 태그는 <span>이 있다.

메타 데이터

데이터를 설명하는 데이터이다. 이미지라면 이미지의 폭, 높이 해상도, 오디오라면 재생시간, 채널 수 등이 있을 수 있다. <base>, <link>, <script>, <style>, <title>, <meta> 등은 메타 데이터를 담기 위한 태그들이고, <head>에 작성한다(단, script는 필요 시 body에도 작성).

<base> : 웹 페이지 들의 기본 URL과 출력될 윈도우 지정
<link> : 외부 자원을 연결할 때 사용
<meta> : 다양한 메타 데이터 표현

<!--base 태그 예시-->
<a href="http://hhlab.tistory.com/score/math.html">수학</a>
<a href="http://hhlab.tistory.com/score/science.html">과학</a>
다음과 같이 수정할 수 있다.
<base href="http://hhlab.tistory.com/score/">
<a href="math.html">수학</a>
<a href="science.html">과학</a>

<!--link 태그 예시-->
<link type="text/css" rel="stylesheet" href="mystyle.css">

<!--meta 태그 예시-->
<meta name="author" content="hhlab">
<meta name="keywords" content="웹, HTML, CSS">
<meta charset="UTF-8">

'💻 > 웹' 카테고리의 다른 글

[웹] 우수 디자인 참고 (0)	2021.04.15
[HTML] 기본 문서 작성(2) (0)	2020.10.17
[웹] VS Code 설치, 단축키 (0)	2020.10.17
[웹] 웹, 웹의 역사 (0)	2020.10.17
[웹] 프론트 엔드 (0)	2020.10.16

현재글[HTML] 기본 문서 작성(1)

라즈베리파이, 머신러닝, Besu, 텐서플로우, 문제해결전략, db, 조립PC, Github, 임베디드, 파이썬, 백준, 블록체인, 딥러닝, 인공지능, Hyperledger, 강화학습, 완전탐색, 알고리즘, 데이터베이스, 영상처리,

Today :
Yesterday :

일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

hhlab.tistory.com