우선 첫번째로 수평 정렬 하는 방법은 text-align: center; 를 하면 된다.
수직 정렬에 대한 4가지 방법을 소개한다.
1) line-height를 이용한 방법 ( 텍스트 가운데에 오게하기 )
line-height 는 줄바꿈을 의미하는 css 이다. 코드를 통해 보자.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>연습</title>
<style>
* { margin: 0; padding: 0;}
.box1 {
width: 100px; height: 100px;
border: 1px solid black; text-align: center;
line-height: 100px;
}
</style>
</head>
<body>
<div class="box1">가운데 정렬</div>
</body>
</html>line-height의 값을 height의 값과 동일하게 주면 가운데로 오게 된다. 이 때 font마다 조금의 차이가 있으니
height의 크기에서 +- 2px 정도 눈으로 보면서 맞추면 좋다.
2) display : table을 이용한 방법
이 방법은 table형태로 바라 보고 수직정렬을 하는 것이다. 코드를 보자
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>연습</title>
<style>
* { margin: 0; padding: 0;}
.wrap {
width: 100px;
height: 100px;
display: table;
border: 1px solid black;
}
.box1 {
width: 100px; height: 100px;
display: table-cell;
vertical-align: middle; // table-cell 이 되면 vertical-align:middle 가능
text-align: center;
}
</style>
</head>
<body>
<div class="wrap">
<div class="box1">가운데 정렬</div>
</div>
</body>
</html>이 방법은 언제쓰는가?
line-height 방법은 텍스트가 1줄인 경우에는 가운데 정렬이 가능하다. 하지만, 두줄이상이 되면 가운데 정렬이 아닌 텍스트가 박스를 벗어나게 된다. 그렇기 때문에 텍스트가 2줄 이상일 때는 line-height 방법을 사용하지 못한다. 그럴 때는 이 방법과 뒤에나오는 방법을 사용하면 된다.
단점으로는 하나의 텍스트를 가운데 정렬하는데에 두개의 박스를 생성해야하는 단점이있다.
3) margin,padding을 이용한 방법
이것도 위의 table 방법과 비슷하게 두개의 박스를 생성해야하는 단점이 있다.
1. margin 으로 하는 방법.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>연습</title>
<style>
* { margin: 0; padding: 0;}
.wrap {
width: 100px; /* 부모요소도 마찬가지로 height 값 주지 않고 자식에 따라 변하게함.*/
border: 1px solid black;
}
.box1 {
width: 100px;
margin: 100px 0; /* height 값을 주지 않고 margin값으로 가운데오게함.*/
text-align: center;
background-color: #303030;
color: white;
}
</style>
</head>
<body>
<div class="wrap">
<div class="box1">가운데 정렬</div>
</div>
</body>
</html>
위의 margin을 padding으로 바꿔도 가운데 정렬은 가능하다.
4) position 을 이용한 방법
position 요소를 이용해서 가운데 정렬하는 방법이 있다.
position은 relative, absolute, static, fixed 등 이있다. 최근에는 sticky 라는 것도 추가되었다.
Position에 대해서 간단하게 설명하고 수직정렬하는 방법을 작성하겠다.
- position은 화면위에 붙이는 스티커라고 생각하면 된다. -
position
- static -> 그냥 기본 속성이 static 이다. position 값을 주지 않는 모든 박스들은 static이다. z-index 값을 줄 수 없음. top, left 값도 줄 수 없음.
- relative -> relative는 자신의 위치에 기준하여 top, left 등으로 움직일 수 있다. top:10px 하면 자신이 위치한 곳에서 10px 아래로 이동하게 된다. 하지만 relative는 꼭 absolute의 기준점으로 사용하길 권장함
- absolute -> absolute는 부모의 위치를 기준으로 top, left 등 움직일 수 있다. 여기서 부모의 position 값은 relative or absolute fixed 등이 올 수 있다. ( absolute 가 부모여도 그위치를 기준으로 움직임. 가장 근처의 relative를 찾아서 그 것을 기준으로 움직이는거 아님)
- fixed -> top ,left 등을 사용할 수 있으며 정해준 위치에 고정되어 스크롤 되어도 화면에 붙어있어서 따라온다.
자 그럼 이제 코드를 보자.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>연습</title>
<style>
* { margin: 0; padding: 0;}
.wrap {
width: 200px;
height: 200px;
border: 1px solid black;
position: relative;
}
.box1 {
width: 98px;
height: 98px;
border: 1px solid red;
position: absolute;
text-align: center;
top: 50%;
left: 50%;
}
</style>
</head>
<body>
<div class="wrap">
<div class="box1">가운데 정렬</div>
</div>
</body>
</html>
가운데 정렬이 잘 되었는가? 아니다. position: absolute 후
top: 50%, left: 50% 를 하면 왜 가운데 정렬이 안될까? 그것은 기준이 가운데가 아니라 기준이 왼쪽 위이기 때문이다.
그래서 50% 50% 이동해도 저 기준점이 가운데에 오게 되는 것이다. 박스를 가운데에 오게 하려면 코드를 추가해야한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>연습</title>
<style>
* { margin: 0; padding: 0;}
.wrap {
width: 200px;
height: 200px;
border: 1px solid black;
position: relative;
}
.box1 {
width: 98px;
height: 98px;
border: 1px solid red;
position: absolute;
text-align: center;
top: 50%;
left: 50%;
/*
margin-top: -50px;
margin-left: -50px; margin값을 주거나 transform으로 변경을해줘야함.
*/
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="wrap">
<div class="box1">가운데 정렬</div>
</div>
</body>
</html>이런식으로 box1의 크기의 절반에 해당하는 만큼 이동시켜줘야 박스의 가운데로 오게된다.
이런식으로 박스가 가운데로 오게된다. 텍스트 정렬은 line-height를 이용하면 가운데 정렬이 쉽게 될것이다.
또한 박스의 크기를 콘텐츠의 크기만큼 맞춘다면 글자가 가운데오도록하는 효과를 가져올 수 있을 것이다.
아래의 경로를 이용해서 직접 코드를 타이핑해보면서 확인하면 좋을거같습니다!
https://www.w3schools.com/html/tryit.asp?filename=tryhtml_intro
Tryit Editor v3.7
Page Title My First Heading My first paragraph.
www.w3schools.com
틀린 부분이 있다면 지적해주시면 감사하겠습니다.
'코딩 > HTML' 카테고리의 다른 글
| HTML 파일을 여는 가장 쉬운방법들 (0) | 2020.04.27 |
|---|---|
| HTML a태그를 이용한 티스토리활용 (0) | 2019.11.20 |
| HTML 편집기 아톰(Atom) 설치 및 사용 (0) | 2019.10.05 |
