728x90
반응형
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
display: flex;
width: 1200px;
height: 100%;
}
li
.second {
outline: 1px solid red;
width: 520px;
height: 520px;
background-image: url(/css-example-main/연습문제이미지/cat.jpg);
}
.first-container {
display: flex;
flex-direction: column;
width: 400px;
height: 520px;
}
.first {
margin-bottom: 20px; /* 각 ul 요소 간의 간격 */
background-color: aqua;
width: 400px;
height: 520px; }
.picture {background-image: url(/css-example-main/연습문제이미지/c1.jpg);}
</style>
</head>
<body>
<div class="container">
<div class="first-container">
<ul class="first">
<li>
<div class="picture"><a href=""></a></div>
<div>
<h1>DESCRIPTION</h1>
<p>dddddddddd</p></div>
</li>
</ul>
<ul class="first">
<li>
<div class="picture"><a href=""></a></div>
<div>
<h1>DESCRIPTION</h1>
<p>dddddddddd</p></div>
</li>
</ul>
<ul class="first">
<li>
<div class="picture"><a href=""></a></div>
<div>
<h1>DESCRIPTION</h1>
<p>dddddddddd</p></div>
</li>
</ul>
<div class="second"><a href=""></a></div>
</div>
</div>
</body>
</html>
이걸로 이런 그림의 배치를 짜려고 하는데 이게 되질 않는다..
사진이 나오질 않음..
728x90
반응형
'코딩을해보자 > 프론트엔드' 카테고리의 다른 글
| 비 전공자 프론트 엔드 1달 해본 후기 (8) | 2024.09.24 |
|---|---|
| 프론트앤드 코딩용 (1) | 2024.09.19 |
| 비전공자 초보자가 보는 프론트 앤드 수업 근황 (0) | 2024.08.22 |
| 복습 겸 적어보는 프론트 앤드 수업 3일 차(각종 연결 및 불러오기 과정) (0) | 2024.08.22 |
| 티스토리 html만 이용해서 css적용해보기. (0) | 2024.08.06 |