태터데스크 관리자

도움말
닫기
적용하기   첫페이지 만들기

태터데스크 메시지

저장하였습니다.

[왕초보 홈페이지 만들기 강좌 ①] HTML이란 무엇인가?
http://blog.hostit.co.kr/82

[왕초보 홈페이지만들기 강좌 ②] 나모 웹 에디터란 무엇인가?
http://blog.hostit.co.kr/83

[왕초보 홈페이지 만들기 강좌 ③] 기본적인 HTML 문서의 구조
http://blog.hostit.co.kr/105

[왕초보 홈페이지 만들기 강좌 ④] HTML 태그의 기초를 익혀보자! 기본 HTML 태그
http://blog.hostit.co.kr/118

[왕초보 홈페이지 만들기 강좌 ⑤] 동방신기 사진 넣기, 이미지 넣기, 글자 정렬, 문장 정렬

http://blog.hostit.co.kr/130




홈페이지는 html 문서로 이루어져있다고 저번 강좌에서 말씀드렸죠?
다른 문서들처럼, html 문서도 글과 그림/동영상/음악 등으로 구성되어 있어요.
오늘은 홈페이지의 내용을 이룰 글자를 다루는 법에 대해서 잠깐 알아볼 거에요.


1. <h> 태그

제목을 표시할 때 쓰는 태그로, 문자의 크기를 정할 수 있습니다.
제목이므로 기본적으로 '굵게'가 선택되어 있어요.
<h1>부터 <h6>까지 있고, 숫자가 클수록 크기는 작아집니다~
(나중에 배울 <font size>와는 반대랍니다 :D)


2. <b>, <i>, <u> 태그

각각 문자를 굵게, 이탤릭체로, 그리고 밑줄을 쳐서 보여주는 태그들입니다
문자를 강조하고 싶을 때 유용하게 쓸 수 있어요~


3. <big>, <small> 태그

문자의 크기를 주변 문자보다 크게, 또는 작게 만들 수 있지요.



4. <p> 태그

한 문단의 시작을 알리는 태그입니다. <p>와 </p>로 둘러싸인 문자열은 하나의 문단이 되겠죠? 


5. <br> 태그

문자열을 한 줄 띄어주는 태그입니다.
<br><br>이라고 쓰면 두 줄을 띌 수 있겠죠?




그러면 직접 실습하면서 익혀볼까요~?
강좌 ③에서 만들었던 홈페이지에 아래와 같이 작성해 보아요 :D





그러면 아래와 같이 보이게 되죠 :D





그럼 문자 태그의 꽃이라고 할 수 있는 <font> 태그에 대해서 알아볼까요~

1. <font size>
ex) <font size = "6"></font>

글씨의 크기를 조절하는 데에 사용합니다.
숫자로 1부터 7까지 있고, 7이 가장 큰 사이즈입니다.
<h> 태그와 반대죠?


2. <font color>
ex) <font color = "red></font>

글씨의 색을 나타내 줄 때 쓰는 태그입니다.
영어로 써도 되고, 색상코드로 써도 됩니다.
blog.naver.com/leewonguu?Redirect=Log&logNo=60065743161 페이지에 색상 코드표가 나와 있더라구요~
참고하세요 :D






3. <font face>
ex) <font face = "궁서체"></font>

기본 글씨체가 아닌, 내가 지정하는 글씨체로 글자를 보여주는 속성입니다.
그런데 만약 내 홈페이지를 방문한 사람의 컴퓨터에 해당 글씨체가 없다면
그냥 기본 글씨체로 보여지게 됩니다~




그럼 또 다시 실습으로 알아볼까요~



속성은 한개씩 쓸수도, 여러 개를 한꺼번에 쓸 수도 있습니다.
다만 끝나고 나서는 </font> 태그로 닫아주는 것, 잊지 마세요!
닫아주지 않으면 속성을 적용하고 싶지 않은 글자에도 영향을 미칠 수 있어요 ㅠㅠ






 

여러분도 원하는 결과물을 얻으셨나요?
예쁜 홈페이지를 만들기 위한 준비 과정이라고 생각하고 열심히 연습해 두세요~!




www.hostit.co.kr

Posted by 호스트잇