중앙 정렬 레이아웃
중앙 정렬 하고싶은 데이터 태그에 width + margin: 0 auto
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
margin: 0 auto;
width: 900px;
}
</style>
</head>
<body>
<h1>Lorem ipsum</h1>
<h2>Lorem ipsum dolor sit amet consectetur...</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elitLorem ipsum dolor sit amet consectetur adipisicing elitLorem ipsum dolor sit amet consectetur adipisicing elit</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elitLorem ipsum dolor sit amet consectetur adipisicing elitLorem ipsum dolor sit amet consectetur adipisicing elit</p>
</body>
</html>
Lorem ipsum
Lorem ipsum dolor sit amet consectetur...
Lorem ipsum dolor sit amet consectetur adipisicing elitLorem ipsum dolor sit amet consectetur adipisicing elitLorem ipsum dolor sit amet consectetur adipisicing elit
Lorem ipsum dolor sit amet consectetur adipisicing elitLorem ipsum dolor sit amet consectetur adipisicing elitLorem ipsum dolor sit amet consectetur adipisicing elit
'HTML／CSS／JS' 카테고리의 다른 글
| [JS] 현재 시간 출력, if문 오전 오후 구분하기 (date(),getMonth(),getHours(),if,else) (0) | 2022.10.18 |
|---|---|
| [HTML5] 14. 글자 생략 (ellipsis) (0) | 2022.10.18 |
| [HTML5] 12. 수평 정렬 레이아웃 (overflow, hidden,float) (0) | 2022.10.18 |
| [HTML5] 10. 배경/ 글자 속성 (background,font-family,text-decoration 등) (0) | 2022.10.17 |
| [HTML5] 09. 가시속성 display (none,block,inline,inline-block) (0) | 2022.10.17 |
중앙 정렬 레이아웃
중앙 정렬 하고싶은 데이터 태그에 width + margin: 0 auto
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
margin: 0 auto;
width: 900px;
}
</style>
</head>
<body>
<h1>Lorem ipsum</h1>
<h2>Lorem ipsum dolor sit amet consectetur...</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elitLorem ipsum dolor sit amet consectetur adipisicing elitLorem ipsum dolor sit amet consectetur adipisicing elit</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elitLorem ipsum dolor sit amet consectetur adipisicing elitLorem ipsum dolor sit amet consectetur adipisicing elit</p>
</body>
</html>
Lorem ipsum
Lorem ipsum dolor sit amet consectetur...
Lorem ipsum dolor sit amet consectetur adipisicing elitLorem ipsum dolor sit amet consectetur adipisicing elitLorem ipsum dolor sit amet consectetur adipisicing elit
Lorem ipsum dolor sit amet consectetur adipisicing elitLorem ipsum dolor sit amet consectetur adipisicing elitLorem ipsum dolor sit amet consectetur adipisicing elit
'HTML／CSS／JS' 카테고리의 다른 글
| [JS] 현재 시간 출력, if문 오전 오후 구분하기 (date(),getMonth(),getHours(),if,else) (0) | 2022.10.18 |
|---|---|
| [HTML5] 14. 글자 생략 (ellipsis) (0) | 2022.10.18 |
| [HTML5] 12. 수평 정렬 레이아웃 (overflow, hidden,float) (0) | 2022.10.18 |
| [HTML5] 10. 배경/ 글자 속성 (background,font-family,text-decoration 등) (0) | 2022.10.17 |
| [HTML5] 09. 가시속성 display (none,block,inline,inline-block) (0) | 2022.10.17 |
