아주 기초 중에 기초, 기본 중에 기초!
<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
'FrontEnd' 카테고리의 다른 글
<a> 속성의 target값 (0) | 2013.08.19 |
---|---|
앵커와 핫 스폿 (0) | 2013.08.19 |
<META> 태그를 이용하여 HTML 문서 정보를 정의하는 방법 (0) | 2013.08.19 |
[자바스크립트] 주민등록번호 유효성 검사 (0) | 2013.08.01 |
[자바스크립트] 한글만 입력 안되게 (0) | 2013.08.01 |