본문 바로가기
  • 행복하게 오래오래 개발자로 살아가기
FrontEnd

<P>와 <BR> 태그 / <DIV> 와 <SPAN>

by yundev 2013. 8. 19.
반응형

아주 기초 중에 기초, 기본 중에 기초!

<P> 문단을 바꿀 때 사용

<BR> 줄을 바꿀 때 사용


<DIV>

- division의 약자. 레이어를 만들 때 가장 많이 사용하는 태그.

- 줄바꿈이 일어나 상하로 분리됨.

- 한줄 전체를 영역으로함. (가로의 길이가 100%를 차지함)

- block 요소. 

- 전체적인 레이아웃을 구성할 때 사용. 

- 그 사이에 특정한 공간을 할당하는 태그. 

- 문단 단위로 영역을 지정. 


<SPAN> 

- inline 요소.

- 줄바꿈이 생기지 않는다. 

- 텍스트의 스타일 등 레이아웃에 상관없이 특정 부분의 스타일을 지정할 때.

- 문장 단위로 텍스트 영역을 지정하는 것. 

- 줄 바꿈을 하지 않으며 한 줄로 표시.

- 안에 내용 만큼만 영역으로 차지.


*block 요소

- 한개의 독리된 덩어리라는 뜻. 정렬 방식에서 float 사용.

- 줄바꿈이 일어나 상하로 분리됨.

- 다른 블록 요소를 포함 

( 블록 레벨 요소 > 텍스트, 인라인 요소, 다른 블록레벨 요소)

- width, height 값을 가질 수 있다.

- 각 요소마다 독립된 가로 영역을 가진다.

- 가로 길이가 100%를 차지함.

<div>, <table>, <h1>~<h6>, <p>, <form>, <ul>, <ol>, <li>, <dl>, <dt>. <tr>. <td>. <th>


주의

1) <h1>~<h6>, <p> : 텍스트와 인라인 요소는 포함할 수 있다.  블록레벨요소는 포함하여 사용할 수 없음.


2) <ul>과 <ol>에는 <li>만 사용할 수 있다.


3) <tr>에는 <th> 또는 <td>만 사용할 수 있다.


인라인 요소

- 선형적인 것을 표현하는 element

- 행안의 일부라는 의미

- 텍스트 레벨 요소라고 부르기도함.

- text-align을 사용(ex. span)

- 줄 바꿈을 하지 않으며 한 줄로 표시

=> 박스 형태로 보여지지만 줄 바꿈이 일어나지 않고, 한줄로서 표현됨.

- 블록 레벨 요소 내부에서 사용

- 블록 레벨 요소를 포함하지 못함.

- 인라인 요소는 포함할 수 있음.

<span>, <a>, <br>, <addr>, <em>,<strong>,<sub>,<sup>,<img>,<input>,<lable>,<textarea>

주의 

- 블록레벨 요소안에 인라인레벨 요소는 들어갈 수 있지만 인라인 레벨 요소에 블록레벨 요소 들어갈 수 없다.




참고 사이트 : http://yongja.tistory.com/48 (레이아웃에 대한 친절한 설명도 있음!!!)


http://javaking75.blog.me/140160292268


반응형