[blog.css]
.container {
width: 800px;
margin-left: auto;
margin-right: auto;
}
.left {
width: 70%;
height: 100%;
/* background: beige; */
float: left;
}
.right {
width: 30%;
height: 100%;
/* background: lightgray; */
float: left;
}
.blog-profile {
width: 60px;
margin: 5px;
float: left;
}
.blog-name {
width: 80%;
height: 100%;
float: left;
}
[blog_layout.html]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF=8">
<title>Document</title>
<link href="css/blog.css" rel="stylesheet">
</head>
<body>
<div class="container">
<!--왼쪽 부분-->
<div class="left">
<!--블로그 프사, 이름 등 정보-->
<div>
<img src="lion.jpg" class="blog-profile">
<div class="blog-name">
<h3 style="margin: 5px;">이름</h3>
<p style="margin: 5px;">1시간 전</p>
</div>
</div>
<!--블로그 본문-->
<div style="clear: both; margin-left: 15px; margin-top: 70px;">
<h3>오리가 많은 베르사유 정원</h3>
<p>오리가 엄청 많아서 그런지 오리똥냄새가 진동하는 베르사유 정원 그치만 예쁘긴 함
앉아있었는데 오리가 내 앞에서 풀을 미친듯이 뜯어먹었다. 내 샌드위치 줄 뻔</p>
</div>
</div>
<!-- 오른쪽 사진 -->
<div class="right">
<img src="versailles.jpg" style="width: 100%">
</div>
</div>
</body>
</html>': ) Web > 웹 스터디' 카테고리의 다른 글
| [HTML, CSS 실습] Table 레이아웃을 이용해 쇼핑 카트 화면 만들기 (2) | 2023.11.19 |
|---|---|
| [HTML, CSS 실습] Contact Form 만들기 (1) | 2023.11.17 |
| [HTML, CSS] 레이아웃 만들기 (float, inline-box) (0) | 2023.11.16 |
| VSCode git이랑 연결하기 / git에 올리기 (1) | 2023.11.09 |
| CSS 기초 - <div>로 만든 상자에 그림자 넣기 (0) | 2023.11.09 |
