header ads

블로그 테마 Html 태그 들여다 보기 ver1

구글 블로그 테마 항목을 선택하고 맞춤 설정 항목에 HTML 편집을 선택하면 현재 사용하는 테마를 만든 HTML 언어가 나타난다. 테마에 사용된 HTML 언어의 태그들에 대한 개략적인 뜻을 정리해 보고자 한다.

HTML의 기본 구조

<html>, <head>, <title>, <body> 4 부분으로 되어있다.

<html>
내용
<head>
내용
<title> 내용  </title>
내용
</head>
<body>
내용
</body>
</html>

html 태그와 속성 설명

1) 주석문(작성자의 설명문) : <!-- 내용 -->

2) bgcolor : 문서의 배경색을 지정

3) background : 문서의 배경 이미지를 지정

4) <br> : 문서의 줄을 바꾸는 태그

5) <p> : 문단을 나눌 때. 줄을 바꾼 후 한 줄을 공백으로 만들어 줍니다.

6) align : 정렬 - left(왼쪽), alignright(오른쪽), aligncenter(가운데)

7) &nbsp : 공백이 한번 생긴다. 

8) <center> ~ </center> : 텍스트, 이미지, 테이블 등을 가운데로 정렬

9) <hr> : 수평 라인을 출력

<hr width = 30% size=10 align="left" noshade color>

width: 브라우저의 너비에 대한 비율이나 픽셀 수로 수평선 길이 지정.
size: 두께를 픽셀 수로 지정 

10) <hn> 태그 : Headline의 약자 제목을 지정하는 데 사용. 글자 크기 6단계로 지정 가능. n은 숫자 1에서 6까지 대입 된다.

<h1> 제일 큰 제목 </h1>, <h2>내용</h2>, <h3>내용</h3>, <h4>내용</h4>, <h5>내용</h5>, <h6>제일 작은 제목</h6>

11) <font> : 글자 형태 지정. <font>와</font> 사이의 텍스트만 지정된다.

size: 글자 크기 변경

face: 글꼴 이름을 지정

color: 글자의 색상 지정

title: 글꼴의 설명 텍스트 저장

<font color="red"> 내용 </font> <br>

12) text: 문서 전체의 텍스트 색상 지정

<body text = "red"> 내용 </body>

13) <ul> : 순서가 없는 목록 작성.

disc: 검은 원
cicle: 흰 원
squre: 사각형

<ul type="disc">
<li> 눈
<li> 코
</ul>

14) <ol> : 순서가 있는 목록

기호 대신 번호 또는 영문자, 로마 숫자를 순서대로 표시.

15) <dl> : 정의 목록

16) <img> : 이미지 삽입 또는 관리.

src: 이미지 파일 경로 지정

align: 이미지 정렬 방식

alt: 이미지 설명 문장

width: 이미지 폭 : 숫자 지정 (픽셀 값) 또는 n% 값으로 확대, 축소

height: 이미지 높이 : 숫자 지정  (픽셀 값) 또는 n% 값으로 확대, 축소

border: 이미지 테두리 두께 : 숫자 지정

hspace: 이미지 좌우 여백 지정 : 숫자 지정 (픽셀 값)

vspace: 이미지 상하 여백 지정 : 숫자 지정 (픽셀 값)

html 언어를 잘 사용하는 전문가들에게는 기본적인 태그 들이고 쉽겠지만 블로그를 개설하고 html을 처음 접하는 초보자들은 대략 난감합니다. 수정 안 하고 사용하면 되겠지만 그래도 간략히 정리해 보려 합니다.