my work
<!DOCTYPE html>
<html>
<head>
<title>Forest Zoo</title>
<style>
body {
background-image: url(images/bg.png);
}
div {
margin: 100px auto;
width: 400px;
height: 100px;
text-align: center;
/*1. font-size: 0; 섹션요소가 다 사라짐.*/
/* 2. display: inline-block; 이걸 적용하니 textalign이 이상하게 적용되네요?ㅠ*/
/*vertical-align 으로 요소 간격을 없앨 수 있음*/
}
.grass {
margin: -5px auto 0 auto;
}
.grid {
background-color: rgb(131, 91, 63);
color: white;
width: 280px;
padding: 10px;
margin: -5px auto 0 auto; /*이게 아닌거같은데...*/
text-align: left;
border-bottom: 10px solid rgb(57, 27, 11);
border-bottom-left-radius: 25px;
border-bottom-right-radius: 25px;
}
</style>
</head>
<body>
<div>
<img src="images/animal09.png" />
<img class="grass" src="images/green.png" />
<section class="grid">
<h1>Squirrel</h1>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus
et magnis dis parturient montes, nascetur ridiculus mus. Donec quam
felis, ultricies nec
</p>
</section>
</div>
</body>
</html>
<!-- div, article, section 적절한 시멘틱태그사용이 헷갈립니다 흑흑 -->
good work
<!DOCTYPE html>
<html>
<head>
<title>Forest Zoo</title>
<style>
h1,
p {
margin: 0;
}
img {
vertical-align: top;
}
body {
background-image: url(images/bg.png);
background-position: center top;
}
.wrapper {
width: 300px;
margin: 100px auto;
text-align: center;
}
.grid {
background-position: center top;
background-image: url(images/green.png);
background-color: #9c6134;
background-repeat: repeat-x;
text-align: left;
color: white;
padding: 60px 20px 40px;
border-bottom: 10px solid rgba(0, 0, 0, 0.2);
border-radius: 10px 10px 40px 40px;
}
.grid h1 {
margin-bottom: 20px;
}
.grid p {
color: bisque;
}
</style>
</head>
<body>
<div class="wrapper">
<img src="images/animal09.png" />
<div class="grid">
<h1>Squirrel</h1>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus
et magnis dis parturient montes, nascetur ridiculus mus. Donec quam
felis, ultricies nec
</p>
</div>
</div>
</body>
</html>
유지 보수 용의하게 사용하기!
**학습하기
vertical-align:
background-position:
background-repeat
border-bottom: 10px solid rgba(0, 0, 0, 0.2);
'Front-end > HTML CSS' 카테고리의 다른 글
| box model 활용과제 (0) | 2022.03.29 |
|---|---|
| Inheritance 상속, Initial Value 초기값Tag, (0) | 2022.03.28 |
| *CSS 기초 (0) | 2022.03.26 |
| *HTML 기초 (0) | 2022.03.26 |
| HTML 기초/CSS box-model (0) | 2022.03.25 |
