본문 바로가기

[디자인] HTML 태그

2020. 12. 8.
HTML 태그의 기본 요소

 

<html>
<head>
<title>내용</title>
</head>
<body>
본문내용​
</body>
</html>

HTML문서의 시작 부분
문서의 머리 시작 부분
문서의 제목
문서의 머리 끝 부분
본문의 시작 부분
본문내용
본문의 끝 부분
HTML문서의 끝 부분

  

* 인터넷 서버에 따라 한글이 지원되지 않을 수도 있으므로 홈페이지는 영문으로 저장하는 것이 좋습니다.

확장자는 반드시 .html이나 .htm을 사용해야 합니다.

 

    

배경 색상과 텍스트 색상 지정하기

 

*<body bgcolor="컬러값" text="컬러값"> ; 문서의 배경 색상과 텍스트 색상을 지정할 수 있다.

ex) body bgcolor="#0000ff" text="ccccoo"

 

 

*<body background="이미지 경로"> ; 문서의 배경 이미지를 지정할 수 있다.

ex) <body background="flower.jpg">

 

*<body link="컬러값" alink="컬러값" vlink="컬러값" > ; 하이퍼링크 색상 지정을 원하는 컬러로 바꿀 수 있다.

ex) <body link="#006666" vlink="#999900" alink="#cc0000">

 

문서의 여백 설정하기

 

*<body leftmargin="수치값" topmargin="수치값"> ; 문서의 여백을 지정할 수 있다.

ex) <body leftmargin="100" topmargin="100">

 

<p>태그와 <br>태그

 

*텍스트 내용<br>, <p>텍스트 내용</p> ; 텍스트의 줄 바꿈과 문단 바꿈을 지정하는 태그

<br>은 한줄, <p>는 두줄

 

문자모양 만드는 태그

 

*기본 문자모양 변환 태그

 

<b>텍스트</b>텍스트를 강조하고 두껍게 쓰고자 할 때

<i>텍스트</i>텍스트를 오른쪽으로 약간 기우는 글로 표현할 때

<u>텍스트</u>텍스트를 밑줄이 그어지는 내용으로 표현할 때

<strong>텍스트</strong>텍스트를 진하거나 두껍게 쓰고자 할 때

<s>텍스트</s>텍스트를 중간쯤에 줄을 그어서 표현할 때

<em>텍스트</em>텍스트를 이탤릭체로 표현하고자 할 때

<sup>텍스트</sup>텍스트를 위첨자로 표현하고자 할 때

<sub>텍스트</sub>텍스트를 아래첨자로 표현하고자 할 때

<big>텍스트</big>텍스트를 한 단계 큰 글씨로 표현할 때 

 

<pre>태그로 문장을 그대로 인식하기

*<pre>텍스트 내용</pre> ; 입력한 텍스트를 내용 그대로 출력합니다.

 

문자의 속성을 바꾸어 주는 <font>태그

 

*<font size="수치값" color="컬러값" face="글꼴"></font> ; 입력한 텍스트의 사이즈, 색상, 글꼴을 바꿔준다.

 

<html>

<head>

<title> 문자의 속성을 바꾸어 주는 'font' 태그 </title>

</head>

<body bgcolor="#FFFFFF" text="#000000">

<font size="1">문자의 속성을 바꾸어 보자</font>.<br>

<font size="2">문자의 속성을 바꾸어 보자.</font><br>

<font size="3">문자의 속성을 바꾸어 보자.</font><br>

<font size="4">문자의 속성을 바꾸어 보자.</font><br>

<font size="5">문자의 속성을 바꾸어 보자.</font><br>

<font size="6">문자의 속성을 바꾸어 보자.</font><br>

<font size="7">문자의 속성을 바꾸어 보자.</font><br>

</body>

</html>

 

 

제목체로 사용되는 <h>태그

*<hn>텍스트내용</hn> ; 텍스트를 제목체로 바꿔 준다.

 

 

문단 정렬에 관한 태그

 

*<p align="left", "center", "right">텍스트 내용</p>

 

문단을 정렬한다. left(좌측정렬), center(가운데 정렬), right(우측정렬)로 화면상에서 정렬한다.

 

목록. 선. 이미지 태그 순서 있는 목록 만들기

*<ol type=1,A,a,I,i>

<li>항목1</li>

<li>항목2</li>

<li>항목3</li>

</ol>

결과 값에서 항목1, 항목2, 항목3, ...의 내용에 번호가 붙는다. 단 항목을 표시하는 <li>태그의</li>는 생략해도 무방하다.

즉, 시작하는 태그인 <li>태그만 사용해도 된다.

 

선그리기 hr(horizontal rule의 약자)

*<hr align="left, center, right" noshade size="수치값" width="수치값"> ; align의 속성은 수평선을 정렬하고자 할때 사용한다.

 그리고 noshade는 수평선에 음영 효과를 주지 않을 때 사용, size는 수평선의 두께, width는 수평선의 넓이를 나타낼 때 사용한다.

 

이미지 삽입하기

*<img src="이미지 파일의 경로명"> ; 이미지를 삽입할 수 있다.

 

이미지 크기 조절하기

*<img src="이미지의 경로명" width="수치값" height="수치값"> 

 이미지의 크기를 조절할 수 있다. 픽셀로 표현하는 방법과 %로 표현하는 두 가지의 방법이 있다. 

 

이미지 정렬하기

*<img src="이미지의 경로명" align="left, right, top, middle, bottom, baseline">

align속성은 텍스트와 이미지를 함께 정렬하기 위해서 사용되는 개념이다.

예를 들어 align="right"라고 한다면 텍스트는 왼쪽에 이미지는 오른쪽에 나타나게 된다.

 

이미지에 테두리 만들기와 설명글 넣기

*<img src="이미지의 경로명" border="수치값" alt="설명글"> 

 border속성의 수치는 올려줄수록 이미지의 테두리가 두꺼워진다.

 alt의 속성을 입력해주면 웹브라우저의 화면에서 이미지 위에 마우스를 올려놓았을 때 2초 정도 후에 설명 글이 뜬다.

 

하이퍼링크하기

*<a>~</a> : 하이퍼링크를 의미하는 태그로 단독으로 사용할 수 없고 반드시 경로를 나타내는 속성과 함께 사용해야 한다.

*<a href="경로/URL">~</a>: 하이퍼 링크를 설정할 HTML문서의 경로나 다른 사이트 홈페이지 경로를 설정하는 속성이다.

 

댓글