​​ #14 위치정렬 태그 배우기

#14 위치정렬 태그 배우기

수평정렬

 

왼쪽(left), 중간(center), 오른쪽(right)으로 정렬하는 것을 말하며 center태그는 단독으로도 가능하나 align은 단독적으로 사용되어질 수 없습니다.

align은 alignment의 준말로서 조정, 정렬, 일직선계열 등을 뜻하는 말입니다.

 

예))

<center>위치정렬태그 배우기, <p align="left">수평정렬</p>

 

출력물))

 

위치정렬태그 배우기,

수평정렬

 

 

html5에서는 align을 지원하지 않으므로 가능한한 text-align속성을 이용한 css의 사용이 권장되고 있습니다.

그럼 css에서의 align 속성을 정리해보면 다음과 같습니다.

가운데, 위 또는 아래에 정렬 할 객체가 CSS 속성 vertical-align을 사용 합니다.
객체가 왼쪽 또는 오른쪽으로 정렬하려면 CSS 속성 인 float를 사용하십시오 .

 

 

<속성값>
text-align: left     왼쪽 정렬
text-align: right     오른쪽 정렬
text-align: center   중앙 정렬
text-align: justify    균등정렬(왼쪽끝부터 오른쪽 끝까지 균일하게 배분정렬)

 

예))

<html>
<head>
<style>
 #box1 { text-align: right; }
 #box2 { text-align: left; }
 #box3 { text-align: center; }
</style>
</head>
<body>
 <div id="box1">오른쪽 정렬</div>
 <div id="box2">왼쪽 정렬</div>
 <div id="box3">중앙 정렬</div>
</body>
</html>

 

출력물))

오른쪽 정렬
왼쪽 정렬
중앙 정렬

 

 

text-align

 

티스토리 블로그에서 css에 스타일을 설정할 경우 예제하나만을 위해 지정하기는 다소 번거로우므로 body태그 내에서 개별적으로 구현하였습니다.

 

 

 

 

요소위주의 수평,수직정렬에 관하여

align 속성은 주변 요소에 따라 object 요소의 정렬을 지정합니다.
object 요소는 인라인 요소 (페이지에 새 행을 삽입하지 않음)입니다.
즉, 텍스트 및 기타 요소가 페이지 주위를 둘러 쌀 수 있습니다.
따라서 주변 요소에 따라 object 의 정렬을 지정하는 것이 유용 할 수 있습니다.

 

object align="left" 왼쪽 정렬

object align="right" 오른쪽 정렬

object align="middle" 중앙 정렬

object align="top" 상단으로 정렬

object align="bottom" 하단으로 정렬

 

<div>와 같이 블록 요소를 가로로 가운데에 배치하려면 margin: auto;
요소의 너비를 설정하면 해당 요소의 가장자리까지 늘어나지 않습니다.
요소는 지정된 너비를 차지하고 나머지 공간은 두 여백 사이에서 균등하게 분할됩니다.

 

예제))

 

<!DOCTYPE html>
<html>
<head>
<style>
.center {
    margin: auto;
    width: 60%;
    border: 3px solid #73AD21;
    padding: 10px;
}
</style>
</head>
<body>

<h2>중앙 정렬 요소</h2>
<p>수평중앙정렬 div와 같은 블록요소는, margin: auto; 를 사용합니다</p>

<div class="center">
  <p><b>주의: </b>!DOCTYPE이 선언되지 않는다면 margin:auto 는 IE8에서는 작동하지 않습니다.</p>
</div>

</body>
</html>

 

 

출력물))

 

중앙정렬 요소

 

'HTML > HTML 기초' 카테고리의 다른 글

#16 목록(리스트)을 나타내는 태그들 배우기  (0) 2018.12.07
#15 문자속성의 태그 배우기  (0) 2018.08.25
#13 div 태그 알아보기  (0) 2018.07.29
#12 font 태그 알아보기  (0) 2018.07.28

댓글

Designed by JB FACTORY