<!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>
.clearfix::after {
content: '';
display: block;
clear:both;
}
.container {
background: yellow;
border: 2px solid #000;
text-align: center;
font-weight: bold;
width: 80%;
padding: 2%;
/* box-sizing: border-box; */
}
.green {
background: green;
float: left;
width: 40%;
padding: 1%;
}
.coffee {
background: gray;
float:right;
width: 40%;
padding: 1%;
}
.green,.coffee {
border: 2px solid #000;
font-weight: normal;
}
div h1{
padding-bottom: 10px;
}
</style>
</head>
<body>
<div class="container clearfix">
<h1>녹차와 커피</h1>
<div class="green">
<p>녹차는 은은한 향을 좋아하는 사람들이 애용하는 차이다. 녹차를 마실 줄 모르는 사람들은
티백들을 모두 뜯어 주전자에 넣고 끊이기도 하는데 강한 차의 향기도 견디기 힘들겠지만
보관도 힘들고 그때그때 방금 끓인 듯한 맛을 느끼지 못하게 되며 진한 카페인 덕에 밤에
잠들기도 힘들 것이다.</p>
</div>
<div class="coffee">
<p>커피는 독한 향을 좋아하는 사람도 매우 좋아하며 심한 경우 태어나기 전부터 커피를 마신
듯 강한 중독 증세를 보이는 경우가 많다. 심지어 원두를 씹어서 향에 자신을 담그는 사람도
있고 설탕, 시럽 등 다른 조미를 절대로 허락하지 않는 오직 커피맛만을 고집하는 마니아들
이 늘고 있다.</p>
</div>
</div>
</body>
</html>
<!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>
.container {
width: 600px;
background: pink;
margin: 30px auto 0;
border: 5px solid #caa;
padding: 20px;
}
.container h1 {
font-size: 1.5em;
font-weight: 700;
text-align: center;
margin-bottom: 20px;
}
.container div {
width: 45%;
padding: 10px;
}
.container .green {
background: #dda;
float: left;
}
.container .coffee {
background: #ba7;
float: right;
}
.container div p {
text-align: justify;
line-height: 1.4;
text-indent: 7px;
}
.clearfix::after {
content: '';
display: block;
clear: both;
}
</style>
</head>
<body>
<div class="container clearfix">
<h1>녹차와 커피</h1>
<div class="green">
<p>녹차는 은은한 향을 좋아하는 사람들이 애용하는 차이다. 녹차를 마실 줄 모르는 사람들은
티백들을 모두 뜯어 주전자에 넣고 끊이기도 하는데 강한 차의 향기도 견디기 힘들겠지만
보관도 힘들고 그때그때 방금 끓인 듯한 맛을 느끼지 못하게 되며 진한 카페인 덕에 밤에
잠들기도 힘들 것이다.</p>
</div>
<div class="coffee">
<p>커피는 독한 향을 좋아하는 사람도 매우 좋아하며 심한 경우 태어나기 전부터 커피를 마신
듯 강한 중독 증세를 보이는 경우가 많다. 심지어 원두를 씹어서 향에 자신을 담그는 사람도
있고 설탕, 시럽 등 다른 조미를 절대로 허락하지 않는 오직 커피맛만을 고집하는 마니아들
이 늘고 있다.</p>
</div>
</div>
</body>
</html>
'CSS입문' 카테고리의 다른 글
| CSS_position_22.04.12(Tue) (0) | 2022.04.12 |
|---|---|
| CSS_박스띄우기(실습3)_22.04.12(Tue) (0) | 2022.04.12 |
| CSS_박스띄우기(실습)_22.04.12(Tue) (0) | 2022.04.12 |
| CSS_박스나열(중첩,마진 계산하기)_연습문제_22.04.11(mon) (0) | 2022.04.11 |
| CSS_박스 띄우기_중첩레이아웃(float)_22.04.11(mon) (0) | 2022.04.11 |