반응형
|
스타일시트 CSS 가운데 정렬하는 방법, text-align 과 margin 이용 |
CSS 를 이용해서 가운데 정렬하는 방법은 두가지가 있습니다. text-align 과 margin 속성을 이용하는 것입니다. 또한 가변적인 상황에서 중앙정렬을 하는 방법에 대해서도 알아 보겠습니다.
▼ 중앙정렬을 위하 text-align 속성의 값은 center 을 사용했습니다. 그리고 margin 은 왼쪽과 오른쪽을 auto 로 주게 되면 자동으로 글을 맞추게 되서 중앙정렬이 됩니다. 아래 전체소스는 상단에 text-align 을 이용해서 정렬하였고 아래는 margin 속성을 이용해서 맞추었습니다.
<!DOCTYPE HTML >
<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;
width:400px
}
.align-center { text-align: center; }
.align-justify { text-align: justify; }
.margin-center {
margin-left:auto;
margin-right:auto;
}
</style>
</head>
<body>
<div id="" class="align-center vi">align-center 중앙정렬</div>
<div id="" class="align-right vi">레드파쿠라는 물고기는 사람의 이빨과 흡사한 구강구조 때문에 인치어(人齒魚)로도 일컬어진다. 그런데 이 물고기에게 '고환사냥꾼(Ball cutter)'이라는 악명 높은 별명이 붙어있다. 실제 레드파쿠가 파푸아뉴기니에서 발가벗고 목욕하던 남성 2명의 고환을 홀랑 따먹고 달아났다는 해외토픽이 화제가 된 적이 있다. 레드파쿠와 유사한 종으로 피라니아가 있다.
</div>
<div id="" class="align-center vi">margin 중앙정렬</div>
<div id="" class="margin-center vi">레드파쿠라는 물고기는 사람의 이빨과 흡사한 구강구조 때문에 인치어(人齒魚)로도 일컬어진다. 그런데 이 물고기에게 '고환사냥꾼(Ball cutter)'이라는 악명 높은 별명이 붙어있다. 실제 레드파쿠가 파푸아뉴기니에서 발가벗고 목욕하던 남성 2명의 고환을 홀랑 따먹고 달아났다는 해외토픽이 화제가 된 적이 있다. 레드파쿠와 유사한 종으로 피라니아가 있다.
</div>
</body>
</html>
▼ 하지만 두개의 차이는 있습니다. 그림에서 보는 것 처럼 margin 은 내부에 데이터뿐만 아니라 div 도 화면중앙으로 맞추게 됩니다. text-align 과 차이가 있죠.
▼ 좀더 명확한 차이를 보실려면 영문이 들어간 텍스트를 보시면 됩니다. text-align:center은 텍스트 데이터 모두를 중앙정렬로 맞춥니다. 하지만 margin 의 auto 는 내부에 텍스트를 왼쪽 정렬로 맞추게 됩니다. 두개의 div 샘플을 비교하시면 쉽게 구분이 가능할겁니다.
반응형
'웹 프로그래밍 > 스타일시트 CSS' 카테고리의 다른 글
| 스타일 시트 CSS 가장 기본적인 내용과 스타일을 삽입하는 여러가지 방법 (1) | 2020.01.12 |
|---|---|
| 스타일 시트 CSS 이벤트 마다 적용할 수 있는 가상 클래스 사용하는 방법 (0) | 2020.01.10 |
| 스타일 시트 CSS 특정 스타일을 적용하기 위한 CLASS, ID 속성 사용법 (0) | 2020.01.05 |
| 스타일 시트 CSS 배경색, 이미지 지정하는 background 속성 알아보기 (0) | 2020.01.04 |
| 스타일시트 CSS text-align 을 이용한 정렬 방법 (1) | 2019.12.29 |
| 스타일시트 CSS margin 을 주는 방법 (2) | 2019.11.23 |
| 스타일 시트 CSS 리스트 속성으로 ul 태그를 메뉴로 만드는 방법 (0) | 2019.05.08 |
| 스타일 시트 CSS 목록 표시 list-style-image 속성 이미지와 텍스트가 정렬 안될 때 (0) | 2019.04.08 |
