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>
<link rel="stylesheet" href="index05(실습).css">
</head>
<body>
<section><!-- margin 0 auto -->
<div class="innerimg"><!-- 포지션 -->
<img src="img/bgimg.png" alt="이미지">
</div>
<div class="content"><!-- 패딩left -->
<textarea>힌트: 이미지영역을 position:absolute를 사용합니다</textarea>
<div class="left"><!-- 플롯left -->
<input type="text">
<input type="text">
</div>
<div class="right"><!-- 플롯right -->
<button type="button">등록하기</button>
</div>
</div>
</section>
<section class="section">
<div class="innerimg">
<img src="img/bgimg.png" alt="이미지">
</div>
<div class="content">
<div class="left">
<h1>제목</h1>
<p>내용</p>
</div>
<div class="right">
<button type="button" >삭제</button>
<button type="button">수정</button>
</div>
</div>
</section>
</body>
</html>
css
*{
margin:0;
padding:0;
}
section{
margin: 0 auto;
border: 1px solid #777;
width:600px;
position:relative;
}
.innerimg{
position:absolute;
top:10px;
left:10px;
}
.content{
padding:10px;
padding-left:70px;
overflow:hidden;
}
textarea{
width:100%;
height: 150px;
box-sizing: border-box;
resize:none;
}
.left{
float:left;
}
.left input{
display:block;
padding:10px;
margin:5px;
}
.right{
float: right;
}
img{
width:50px;
}
'HTML·CSS' 카테고리의 다른 글
| 221223 HTML CSS 실습2 (0) | 2022.12.23 |
|---|---|
| 221223 HTML CSS 실습 (0) | 2022.12.23 |
| 221222 HTML CSS 그림자속성 (0) | 2022.12.22 |
| 221222 HTML CSS position:sticky (0) | 2022.12.22 |
| 221222 HTML CSS position:fixed (0) | 2022.12.22 |
