오늘은 밑의 이미지와 같이 실제적으로 공간을 분할하고 코딩까지 해보는 실습이다.
가로로 길쭉한 공간의 경우, 가로축을 중심으로 분할을 하는데 깊이를 동일하게 생각하고 공간분할을 해서 분할 된 공간별로 div나, 태그로 구조를 짠다.
결과물..
<!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>갤러리</title>
<style>
html, body, ul, ol, li, p, h1, h2, h3, h4, h5, h6,dl, dd{margin:0; padding:0;}
li{list-style:none;}
a{
text-decoration: none;
}
#wrap{
background:#2678ce;
padding:90px 0;
}
.container{
width:1400px;
margin:0 auto;
overflow:hidden;
background:#2678ce;
}
.gallery{
position:relative;
float:left;
width:940px;
height:400px;
}
.vod{
float:right;
width:400px;
height:400px;
position:relative;
}
.more{
position:absolute;
top:0px;
right:0px;
}
.more a{
color:#fff;
padding-left: 15px;
background:url("images/icon_more_1.gif") no-repeat left center;
}
h2{
padding-bottom:30px;
color:#fff;
}
.gallery dl{
float:left;
width:300px;
background: white;
margin-right: 20px;
height: 330px;
}
.gallery dl:last-child{
margin:0px;
}
.gallery dl dd a{
display:block;
text-align: center;
}
.gallery dl .title a{
margin: 15px;
padding: 0 40px;
height: 40px;
color: black;
}
.gallery dl .date a{
color: black;
}
.vod_1{
width:400px;
height:330px;
}
</style>
</head>
<body>
<div id="wrap">
<div class="container">
<div class="gallery">
<h2>활동갤러리</h2>
<div>
<dl class="gal_1">
<dt><img src="images/gall_1.gif" alt="게시물제목"></dt>
<dd class="title"><a href="#">12월 문화특강주간 ♡ 플레이팅도마 만들기</a></dd>
<dd class="date"><a href="#">2021.12.12</a></dd>
</dl>
<dl class="gal_2">
<dt><img src="images/gall_2.gif" alt="게시물제목"></dt>
<dd class="title"><a href="#">12월 문화특강주간 ♡ 플레이팅도마 만들기</a></dd>
<dd class="date"><a href="#">2021.12.12</a></dd>
</dl>
<dl class="gal_3">
<dt><img src="images/gall_3.gif" alt="게시물제목"></dt>
<dd class="title"><a href="#">12월 문화특강주간 ♡ 플레이팅도마 만들기</a></dd>
<dd class="date"><a href="#">2021.12.12</a></dd>
</dl>
</div>
<p class="more"><a href="#">전체보기</a></p>
</div>
<div class="vod">
<h2>동영상 갤러리</h2>
<div>
<dlv class="vod_1">
<iframe width="400" height="330" src="https://www.youtube.com/embed/KfPuKD0llBA" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</dlv>
<p class="more"><a href="#">전체보기</a></p>
</div>
</div>
</div>
</body>
</html>
반응형
'STUDY > 멀티미디어콘텐츠과정' 카테고리의 다른 글
| #25 [영상제작] 콘텐츠제작 - 에펙 설정_1 (0) | 2022.01.03 |
|---|---|
| #24 달력만들기 (0) | 2021.12.30 |
| #22 background url 주기 (0) | 2021.12.28 |
| #21 CSS 연습, 받은 디자인 파일에서 부터의 작업 (0) | 2021.12.27 |
| #20 css 연습, 헤더 만들어 css적용 (0) | 2021.12.23 |
댓글