본문 바로가기

여러가지 정보/HTML CSS 와 블로그

HTML CSS 기초부터 배우기 7 (홈페이지 제작, 블로그 꾸미기)

반응형

HTML Paragraphs




한글로 말하자면 "단락" 태그로써, <p>로 정의 된다.


<HTML> 태그 구조에 기초적인 요소로써 말 그대로 보통 "본문"의 "단락"을 표현하는데 사용된다.


예를 들면 다음과 같다



1
2
<p> 이것은 paragrphs 이다. </p>
<p> 이것은 단락 태그 이다. </p>
cs



우리가 원고에 글을 쓰듯 보통 단락 앞뒤로는 여백이 자동으로 추가 된다.


단락 태그는 공백과, 띄어쓰기를 무시하는 속성을 가지고 있다.  예를 들어보자.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<p> 공백이                                                   겁나 많은 단락 태그 예시. </p>
<p> 수많은 줄이
 
 
 
 
 
 
 
 
 
 
 
 
존재 하는 단락 태그 예시. </p>
cs


위 태그가 브라우져에 표시 될 때는 다음과 같다.


ex)


공백이 겁나 많은 단락 태그 예시.

수많은 줄이 존재 하는 단락 태그 예시.



<br>태그


<br>태그는 끝 태그가 없는 태그로 줄 바꿈을 지원하는 태그이다.


위에서 배운데로 이 태그는 다른 태그의 요소로 들어 갈 수도. 독자적인 태그로도 사용이 가능 하다.


즉 줄 바꿈을 원하는 장소에 <br>을 써주면 바로 줄 바꿈이 된다.


1
<p>줄 바꿈 <br> 해보기 </p>
cs


ex) 줄 바꿈 

해보기

<pre> 태그


쉽게 말하면 <pre> 태그는 <p>태그와 다르게 써진 양식이 그대로 표현 된다.


1
<pre> 예        시      입         니          다  </pre>
cs


ex)


예        시      입         니          다  


HTML Style


웹 브라우저에 표시되는 요소의 색깔, 크기, 모양등 말 그대로 스타일에 관여하는 태그다.


기본적인 문법을 기준으로 사용하게 되는데 이는 다음과 같다


< 태그이름 style=" 값 " >


예로 < p > 태그의 스타일을 정한다면


<p style="값"> 이런식으로 작성한다.


여기 속성의 값은 CSS의 속성이다. 앞에서 말했듯 어떤 브라우져에 표시되는 골격을 캔으로 비유하자면 캔 자체에 대한 값은 HTML에 속하고 캔을 둘러싼 포장지는 CSS 값에 속한다 라고 이해하면 된다.


HTML 배경색


HTML요소의 배경에 대하여 정의할때 사용한다.


예를 들면 다음과 같다. <body>전체의 배경색을 검은색으로 한다면


1
2
3
4
5
6
7
<body style="background-color:black;">
 
<h1> This is Heading </h1>
 
<p> 이것은 단락문 입니다. </p>
 
</body>
cs


이렇게 쓰면 된다.

HTML 텍스트 색상


태그내에 존재하는 텍스트 색깔을 지정하는 방법이다.


<태그이름 style="color:blue;"> 문장 </태그이름>


예)

 

1

<h1 style="color:blue;">This is a heading</h1>

cs


HTML 텍스트 크기


마찬가지로 태그내의 텍스트 폰트의 크기를 지정할때 사용하는 방법이다


<태그이름 style="font-size:크기%;"> 문장 </태그이름>


예)


1
<h1 style="font-size:300%;">This is a heading</h1>
cs


HTML 텍스트 정렬


흔히 말하는 가운데 정렬, 앞 정렬, 뒤 정렬을 이야기 한다.


<태그이름 style="textalight:정렬;"> 문장 </태그이름>


예)


1
<h1 style="text-align:center;">Centered Heading</h1>
cs

HTML 텍스트 글꼴


글꼴을 설정하는 방법이다.

<태그이름 style="font-family:글꼴;"> 문장 </태그이름>

예)

1
<h1 style="font-family:verdana;">This is a heading</h1>
cs




날이 매우 덥내요. 다들 건강 조심하세요 :)


반응형