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문서의 경로나 다른 사이트 홈페이지 경로를 설정하는 속성이다.
'Note' 카테고리의 다른 글
| [엑셀] Excel 기초편 (0) | 2022.05.05 |
|---|---|
| [디자인] 웹색상코드 사이트 (0) | 2021.01.08 |
| [타이포그래피] 스테판 사그마이스터(Stefan sagmeister) (0) | 2020.12.07 |
| [색채학] 색채 이미지에 따른 심리 (0) | 2020.12.06 |
| [디자인] 현대디자인사 / 유럽디자인사 (0) | 2020.12.05 |
