[HTML] align 속성 사용방법

이번 글에서는 html 에서 표를 정렬하는 속성인 text-align 과 vertical-align 에 대하여 다루겠습니다

 

 

# align 정의

  align은 '일렬로 나란히 하다' 또는 '정렬하다'라는 뜻을 가진 영단어입니다. html 에서 사용하는 태그는 아니나, 스타일 시트를 통하여 html에 연결하는 CSS에서 사용되는 속성입니다. text-align 은 표의 수평방향 정렬의 방식을 left, middle, right 로 지정하여 왼쪽 가운데 오른쪽 정렬중에서 선택하는 속성입니다. vertical-align은 top, middle, bottom을 지정하여 위, 가운데, 아래 정렬중에서 선택하는 속성입니다.

• 우리는 이 2가지 정렬 속성중에서 하나씩을 선택하여 총 6개의 9개의 큐브 속에서 우리의 정보가 위치할 영역을 정하는 것입니다. 

 

# align 속성 사용방법

  아래 사진은 align 속성이 적용되지 않은 html 이며 간단한 4 x 4 형태의 표를 가져왔습니다. 

html 사진 1

  아래 사진은 위 html 편집기로 구현된 웹페이지 내부에 삽입되어 있는 표입니다. 표를 살펴보시면 표 내부 박스안에 들어가 있는 입력값들이 전부 왼쪽으로 정렬되어 있는것을 보실 수 있습니다.

• align을 별도로 설정하지 않으면 아래 사진과 같이 수평방향은 왼쪽으로, 수직 방향은 가운데로 정렬된 상태로 구현됩니다.

html 사진 2

 

  그러면, 이제 align 속성을 설정해 보겠습니다.

.table table {
	display: inline-block;
	margin-left: 0px;
  text-align: center;
}

html 사진 3

  위 코드 블럭을 적용한 결과 위 사진과 같이 모든 텍스트가 가운데로 정렬된 표가 되었습니다.

 

 

 

여기까지 html 에서 표를 정렬하는 속성인 text-align 과 vertical-align 에 대하여 다루었습니다