| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | |||
| 5 | 6 | 7 | 8 | 9 | 10 | 11 |
| 12 | 13 | 14 | 15 | 16 | 17 | 18 |
| 19 | 20 | 21 | 22 | 23 | 24 | 25 |
| 26 | 27 | 28 | 29 | 30 | 31 |
- 반복문
- 하이퍼링크
- 배열
- node prompt
- 인스타그램만들기
- 쉽게설치
- 리액트네이티브배포
- DOM
- 프로그래밍
- jQuery
- 코딩야학
- 웹코딩
- 폼태그
- BOM
- vue.js설치법
- 코딩
- 주니어 개발자
- 리액트훅
- html
- JavaScript
- 레이아웃
- 뷰 설치법
- css
- 비동기
- 자바스크립트
- form태그
- 동기
- JS
- 프론트엔드
- 두잇리액트네이티브
- Today
- Total
이진욱의코딩
css로 가로 세로 가운데 정렬하기 본문
이번시간에는 이때까지 배웠던 내용을 바탕으로 한 번 해보겠습니다.
한 번에 코드를 적어서 할 수도 있지만 하나하나 설명을 위해 따로 코드를 적어보겠습니다.
<html>
<head>
<title>CSS Align Center</title>
<style>
.container{
width: 70%;
background: green;
height: 70%; /* 높이를 적어주어야 한다 */
margin: 40px auto;
}
</style>
</head>
<body>
<div class="container">
</div>
</body>
</html>여기서 height의 값을 적지 않으면 웹에 나타나지 않습니다.
margin값을 auto로 가운데 정렬한 모습입니다.
그 다음 div class를 outer, inner로 적습니다. 순서대로 적으셔야 됩니다. 그리고 style태그에 가서
각각 높이, 넓이등을 적어줍시다. outer은 부모와 사이즈가 맞게 width와 height값을 100%로 맞추고
inner은 cell로 표현하기 위해 display를 table-cell로 적습니다.(하나의 셀처럼 작동하기 위함) 수직정렬을 하기 위해
vertical-align을 middle로 줍니다.그러면 수직에서 가운데 정렬이 됩니다. 가로에서 가운데정렬하기 위해 text-align을 center로 줍니다. 여기까지 하고 내용을 한 번 적어서 확인해 봅시다.
<html>
<head>
<title>CSS Align Center</title>
<style>
.container{
width: 70%;
background: green;
height: 70%; /* 높이를 적어주어야 한다 */
margin: 40px auto;
}
.outer{
display: table;
width: 100%;
height: 100%;
}
.inner{
display: table-cell;
vertical-align: middle;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<div class="outer">
<div class="inner"> <!-- 순서를 맞춰서 적어주어야 한다. -->
hello
</div>
</div>
</div>
</body>
</html>
그 다음으로는 그릇을 만들어 내용을 체계적으로 담을 수 있게 만들어 봅시다.
.centered{
background:hotpink;
position: relative;
display: inline-block;
width: 50%;
color:black;
padding: 1em; /* 하나의 글씨크기의 좌우 여백을 주기위해서 */
}
</style>
</head>
<body>
<div class="container">
<div class="outer">
<div class="inner"> <!-- 순서를 맞춰서 적어주어야 한다. -->
<div class="centered">
hellodiv class를 centered를 주고난 뒤 다시 style에 가서 옵션을 줬습니다.
이제 마무리작업을 해봅시다.
아까 적었던 코드에서 뱃지를 하나 추가시켜 봅시다.
앞서 했던 것처럼 div class에 badge를 적으시고, style태그에 옵션을 부여합니다.
<html>
<head>
<title>CSS Align Center</title>
<style>
.container{
width: 70%;
height: 70%; /* 높이를 적어주어야 한다 */
background: green;
margin: 40px auto;
}
.outer{
display: table;
width: 100%;
height: 100%;
}
.inner{
display: table-cell;
vertical-align: middle;
text-align: center;
}
.centered{
background:hotpink;
position: relative;
display: inline-block;
width: 50%;
color:black;
padding: 1em; /* 하나의 글씨크기의 좌우 여백을 주기위해서 */
}
.badge{
position: absolute;
right: -30px;
top: -15px;
background:chartreuse;
width: 60px;
height: 30px;
line-height: 30px;
}
</style>
</head>
<body>
<div class="container">
<div class="outer">
<div class="inner"> <!-- 순서를 맞춰서 적어주어야 한다. -->
<div class="centered">
<p>hello</p>
<div class="badge">
new
</div>
</div>
</div>
</div>
</div>
</body>
</html>
완성형 코드입니다. 뱃지값이나 안에 적힌 다른 text값의 위치같은 것들은 사용자가 코드값을 바꿔서 하시면 됩니다.
이런식으로 창을 늘였다가 줄여도 텍스트나 이미지등이 깨지지 않고 창에 따라 변화하는
반응형웹을 한 번 만들어 봤습니다.
