정리글 보기 | 강의 정리

<!DOCTYPE html>
<html lang="ko">
<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;
}

.con_wrap{
width: 1600px;
height: 600px;
margin: 0 auto;
}

.con{
width: 513.33333px;
float: left;
margin-right: 30px;
}

.con_3{
margin-right: 0;
}

.img_wrap{
height: 500px;
background-color: salmon;
}

.title{
font-size: 30px;
font-weight: 900;
/* margin-top: 15px;
margin-bottom: 15px; */

/* margin: 15px 0 15px 0; */

margin: 15px 0;
}

.tag_wrap{
width: 100%;
background-color: lightblue;
}

/* .tag{
width: 120px;
height: 45px;
border: 1px solid #808080;
float: left;
text-align: center;
line-height: 45px;
color: #808080;
} */

.tag{
border: 1px solid #808080;
float: left;
color: #808080;
padding: 6px 20px;
margin-right: 10px;
border-radius: 50px;
}

</style>

</head>
<body>

<div class="con_wrap">

<div class="con">
<div class="img_wrap"></div>
<h3 class="title">DESIGN</h3>
<div class="tag_wrap">
<div class="tag">ui</div>
<div class="tag">UXUI</div>
<div class="tag">Photo shop</div>
<div class="tag">Illustrator</div>
</div>
</div>

<div class="con">
<div class="img_wrap"></div>
<h3 class="title">DESIGN</h3>
<div class="tag_wrap">
<div class="tag">Figma</div>
<div class="tag">UXUI</div>
<div class="tag">Photo shop</div>
<div class="tag">Illustrator</div>
</div>
</div>

<div class="con con_3">
<div class="img_wrap"></div>
<h3 class="title">DESIGN</h3>
<div class="tag_wrap">
<div class="tag">Figma</div>
<div class="tag">UXUI</div>
<div class="tag">Photo shop</div>
<div class="tag">Illustrator</div>
</div>
</div>


</div>

</body>
</html>

#스타일시트 홈페이지 작업

CSS 스타일링

첨부 파일

댓글 / 답글