반응형
|
스타일시트 CSS text-align 을 이용한 정렬 방법 |
CSS 를 이용해서 데이터를 정렬하는 방법에 대해 알아보겠습니다. 그중에서 가장 많이 사용하는 text-align 속성입니다. 그 중 글자가 많을 경우 양쪽 정렬인 justify 는 아주 유용합니다.
▼ 아래는 text-align 을 이용한 4가지 정렬 방법을 적용한 전체소스입니다. div 내부에 글을 넣고 text-align 속성값을 각각 left, center, right, justify 4지로 표현해 보았습니다. 그리고 justify 를 제대로 이해하기 위해 기본 정렬과 justify 적용한 정렬을 별도로 만들었습니다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
<title> 정렬 </title>
<style type="text/css">
.vi{
border-radius: 5px;
background-color: #2e5b86;
border-style: solid;
border-color: #5d5d5d;
border-width: 2px;
color: #FFFFFF;
margin-bottom: 5px;
padding:15px
}
.align-left { text-align: left; }
.align-center { text-align: center; }
.align-right { text-align: right; }
.align-justify { text-align: justify; }
</style>
</head>
<body>
<div id="" class="align-left vi">align-left 왼쪽정렬</div>
<div id="" class="align-center vi">align-center 중앙정렬</div>
<div id="" class="align-right vi">align-right 오른쪽정렬</div>
<div id="" class="align-justify vi">
align-justify 양쪽정렬<br/><br/>양쪽정렬이 어떻게 되는지 알아보기 위해 글을 길게 썼습니다.
양쪽 정렬이 어떻게 되는지 알아보기 위해 글을 길게 썼습니다.</div>
<div id="" class="vi">
기본정렬 <br/><br/>양쪽 정렬이 어떻게 되는지 알아보기 위해 글을 길게 썼습니다.
양쪽 정렬이 어떻게 되는지 알아보기 위해 글을 길게 썼습니다.</div>
</body>
</html>▼ 아래 그림은 div 에 들어가 있는 텍스트들의 위치 적용 결과입니다. 영어 단어의 의미대로 글자가 정렬되며 justify 는 양쪽 정렬을 의미합니다. 그러니까 글자의 양쪽 끝 공간을 동일하게 주기 위해서 글 간격이 조절되는 것입니다.
▼ 좀더 이해를 돕기 위해 양쪽 정렬과 기본 정렬의 오른쪽 끝으로 가보시기 바랍니다. 아래 그림처럼 안했을때와 했을 때의 차이가 있죠. 적용했을 때는 왼쪽과 공간이 동일하죠. 이렇게 긴 문장일수록 양쪽정렬을 해 주는 것이 훨씬 보게 좋습니다.
반응형
'웹 프로그래밍 > 스타일시트 CSS' 카테고리의 다른 글
| 스타일 시트 CSS 이벤트 마다 적용할 수 있는 가상 클래스 사용하는 방법 (0) | 2020.01.10 |
|---|---|
| 스타일 시트 CSS 특정 스타일을 적용하기 위한 CLASS, ID 속성 사용법 (0) | 2020.01.05 |
| 스타일 시트 CSS 배경색, 이미지 지정하는 background 속성 알아보기 (0) | 2020.01.04 |
| 스타일시트 CSS 가운데 정렬하는 방법, text-align 과 margin 이용 (1) | 2020.01.03 |
| 스타일시트 CSS margin 을 주는 방법 (2) | 2019.11.23 |
| 스타일 시트 CSS 리스트 속성으로 ul 태그를 메뉴로 만드는 방법 (0) | 2019.05.08 |
| 스타일 시트 CSS 목록 표시 list-style-image 속성 이미지와 텍스트가 정렬 안될 때 (0) | 2019.04.08 |
| 스타일 시트 CSS 목록 표시를 위한 list-style 속성 다루는 방법 (0) | 2019.04.02 |
