티스토리 뷰

IT 이야기/프로그래밍

[HTML 쉽게 이해하기 강좌 #3] HTML의 기본 태그에 대해 알아보기

하늘과 나b 2011. 6. 30. 16:54

[HTML 쉽게 이해하기 강좌 #3]
 

HTML의 기본 태그에 대해 알아보기


 줄 바꿀때는 <br>태그  

먼저 <br>태그에 대해서 알아보도록 하겠습니다. HTML 태그 중의 하나인 <br>태그는 우리가 엔터키를 눌러서 줄을 바꾸는 것과 같은 기능을 합니다. 즉 <br>태그는 줄을 바꿔주는 태그입니다.



<br>태그 : 줄을 바꾸는 역할


html>
    <head>
        <title>New Document</title>
    </head>
 
    <body>
        서울 특별시
        부산 광역시

        대전 광역시
    </body>
</html>

  

 문단을 나타낼 때는  

문단을 나타낼 때는 <p>, <div>, <span> 태그를 사용합니다. 

- <p>, <div> 태그는 줄바꾸기 기능을 포함하고 문단 정렬(왼쪽, 가운데, 오른쪽 정렬)이 가능합니다

- <span> 태그는 줄바꾸기 기능이 없으며 style 속성을 통해 문단 내 글자의 색상, 글꼴, 크기 등을 지정할 수 있습니다.

 


* <p>와 <div> 태그의 속성

 속성 속성 값 및 설명 
align  문단의 정렬을 left, center, right로 설정 가능합니다 

* <span> 태그의 속성

 속성 속성 값 및 설명 
style  색상(color), 글꼴(font-family), 글자크기(font-size) 등을 지정할 수 있음.

아래의 소스를 통해 위의 태그들을 써보도록 하겠습니다.

 

<html>
<head>
    <title>문단지정 태그 테스트</title>
</head>
 
<body>
월산 대군의 시조 감상
<p align="left">
추강에 밤이 드니

물결이 차노매라
</p>
 
<div align="center">
낙시 드리치니

고기 아니 무노매라
</div>
<span style="color:blue ; font-size=20; font-family:궁서">
무심한 달빗만 싯고

븬 배 저어 오노라
</span>
</body>
</html>

위의 소스를 실행하면 아래와 같이 나옵니다. 여러분도 한번 해보세요^^


'IT 이야기 > 프로그래밍' 카테고리의 다른 글

[강의] HTML5란? HTML5 자세하게 알아보기  (2) 2011.10.23
C언어 강좌 - 함수 fopen()의 모든 것!  (5) 2011.10.19
POST 방식과 GET 방식의 차이  (0) 2011.10.17
모바일 홈페이지로 자동 이동시키는 소스  (2) 2011.09.21
[HTML 쉽게 이해하기 강좌] 2단 레이아웃 한 방에 만들기  (4) 2011.07.04
[HTML 쉽게 이해하기 강좌 #2] - HTML 시작하기  (0) 2011.06.30
[프로그래밍 사이트 추천] 웹에서도 프로그래밍 할 수 있다? 없다? 결론은 있다!  (1) 2011.06.23
[프로그래밍 Tip] 프로그램 소스코드를 공개하는 사이트 모음!  (0) 2011.06.01
[C#] MDB(Access) 파일을 읽어 Excel에 넣고 Excel 실행 예제 [출처] MDB(Access) 파일을 읽어 Excel에 넣고 Excel 실행 예제  (0) 2011.05.31
[C#] 무료 기술 서적 - Inside C# (한글 번역본) 다운로드  (1) 2011.05.31
공유하기 링크
댓글