HTML 바둑판 형식 div 태그 정렬 샘플 예제 몇가지(div 왼쪽, 오른쪽, 가운데 정렬)
좋은 내용의 글을 작성하려고 하는 데 최근에 정말 많이 바쁜 것 같습니다. 언젠가 지금 하는 일들이 손에 익고 개인적인 실력이 더 늘어난다면 좀 더 유용한 글을 작성할 수 있을 것 같습니다.
여러 개의 div 태그를 이용해 전체 태그 안에 있는 div 태그들은 가운데 정렬하고 전체 div 태그 자체를 왼쪽, 가운데, 오른쪽으로 정렬하는 샘플 예제 div를 몇 가지 작성해 보려고 합니다.
개인적으로도 많이 사용하게 될 것 같아 기록을 남기는 의미도 있고 필요한 분들에게 도움이 되길 바라며 간단히 작성하였습니다.
글만으로는 어떤 내용인지 조금 헷갈리실 수 있으니 div 태그들의 이미지와 소스 코드를 첨부하였습니다. 작성한 코드가 완벽하진 않아도 필요하신 분들이 있다면 도움이 되는 내용이 있기를 바랍니다.
간단히 설명해 드리자면 영역을 나누기 위해 9개의 div 태그가 있으며 전체를 감싸는 div 태그가 한 개 있습니다. 메인 div 태그의 영역을 지정하였고 각각의 div 태그들도 영역을 나누었기에 3 x 3 형태로 div를 나눌 수 있었습니다.
전체 영역을 지정한 후 안에 있는 div 태그들은 블록 요소로 지정하였기 때문에 전체 div 크기가 넘어가게 되면 자동으로 아래 영역에 배치됩니다.
HTML에서는 블록이라는 요소로 지정하게 지정한 요소의 공간을 넘어가게 되면 자동으로 다음 영역에 배치됩니다.
가장 먼저 왼쪽으로 정렬된 상태에서 총 9개의 div 태그를 정렬했을 때 이미지입니다.
가장 안쪽에 있는 div 들을 감싸고 있는 바깥 div에 특별한 영역을 지정하지 않았기 때문에 기본적으로 왼쪽 정렬이 됩니다.
div 왼쪽 정렬 3 x 3 소스 코드 입니다.
<html>
<head>
<meta charset="UTF-8">
<title>DIV</title>
<style>
.main_title{
text-align: center;
}
.main_list {
width: 700px;
}
.list_start {
text-align: center;
}
.list_detail {
display: inline-block;
width: 220px;
height: 260px;
border: 1px solid;
margin-bottom: 5px;
}
.paging_start{
text-align: center;
}
</style>
</head>
<body>
<!-- 리스트 불러오기 -->
<div class="main_list">
<!-- 상단 제목 -->
<div class="main_title">
<p>DIV 영역을 나눠보자.</p>
</div>
<!-- 리스트 -->
<div class="list_start">
<div class="list_detail"><p>1</p></div>
<div class="list_detail"><p>2</p></div>
<div class="list_detail"><p>3</p></div>
<div class="list_detail"><p>4</p></div>
<div class="list_detail"><p>5</p></div>
<div class="list_detail"><p>6</p></div>
<div class="list_detail"><p>7</p></div>
<div class="list_detail"><p>8</p></div>
<div class="list_detail"><p>9</p></div>
</div>
<!-- 하단 리스트 번호 -->
<div class="paging_start">
<div>1 2 3 4 5 </div>
</div>
</div>
</body>
</html>
div 태그들을 가운데 정렬 후 웹페이지에 보게 되는 이미지입니다.
대부분 비슷한 소스 코드 형태이지만 가장 안쪽 div를 감싸고 있는 바깥 div를 text-align:center; 로 지정하게 되면 div가 화면 중앙에 위치하게 됩니다.
div 가운데 정렬 3x3 소스 코드 입니다.
<html>
<head>
<meta charset="UTF-8">
<title>DIV</title>
<style>
.main_title{
text-align: center;
}
.main_list {
width: 700px;
margin: 0 auto;
}
.list_start {
text-align: center;
}
.list_detail {
display: inline-block;
width: 220px;
height: 260px;
border: 1px solid;
margin-bottom: 5px;
}
.paging_start{
text-align: center;
}
</style>
</head>
<body>
<!-- 리스트 불러오기 -->
<div class="main_list">
<!-- 상단 제목 -->
<div class="main_title">
<p>DIV 영역을 나눠보자.</p>
</div>
<!-- 리스트 -->
<div class="list_start">
<div class="list_detail"><p>1</p></div>
<div class="list_detail"><p>2</p></div>
<div class="list_detail"><p>3</p></div>
<div class="list_detail"><p>4</p></div>
<div class="list_detail"><p>5</p></div>
<div class="list_detail"><p>6</p></div>
<div class="list_detail"><p>7</p></div>
<div class="list_detail"><p>8</p></div>
<div class="list_detail"><p>9</p></div>
</div>
<!-- 하단 리스트 번호 -->
<div class="paging_start">
<div>1 2 3 4 5 </div>
</div>
</div>
</body>
</html>
div 태그들을 오른쪽 정렬 했을 때 소스 코드와 이미지입니다.
마찬가지로 비슷한 형태이지만 div 태그들을 전체적으로 감싸고 있는 main_list 태그를 float 속성을 이용해 오른쪽 정렬했습니다.
div 오른쪽 정렬 소스 코드 입니다.
<html>
<head>
<meta charset="UTF-8">
<title>DIV</title>
<style>
.main_title{
text-align: center;
}
.main_list {
width: 700px;
float: right;
}
.list_start {
text-align: center;
}
.list_detail {
display: inline-block;
width: 220px;
height: 260px;
border: 1px solid;
margin-bottom: 5px;
}
.paging_start{
text-align: center;
}
</style>
</head>
<body>
<!-- 리스트 불러오기 -->
<div class="main_list">
<!-- 상단 제목 -->
<div class="main_title">
<p>DIV 영역을 나눠보자.</p>
</div>
<!-- 리스트 -->
<div class="list_start">
<div class="list_detail"><p>1</p></div>
<div class="list_detail"><p>2</p></div>
<div class="list_detail"><p>3</p></div>
<div class="list_detail"><p>4</p></div>
<div class="list_detail"><p>5</p></div>
<div class="list_detail"><p>6</p></div>
<div class="list_detail"><p>7</p></div>
<div class="list_detail"><p>8</p></div>
<div class="list_detail"><p>9</p></div>
</div>
<!-- 하단 리스트 번호 -->
<div class="paging_start">
<div>1 2 3 4 5 </div>
</div>
</div>
</body>
</html>
이렇게 div 영역을 개인적으로 원하는 모습이 나오도록 나름대로 div 영역 샘플 코드를 작성해 봤습니다.
class 중 list_detail 부분이 조금 눈에 거슬리긴 하지만 개인적으로 필요한 곳에서 유용하게 자주 사용할 수 있을 것 같습니다.
아무래도 웹에서는 아직 div 태그를 이용해 활용할 수 있는 것들이 많다 보니 필요한 분이 있을 것 같기도 합니다.
필요하신 분들은 참고하세요.
