1. 디자인 파일을 받은 뒤 치수를 확인한다.
- 여백, 높이, 넓이 확인.
- 임의로 공간분할을 한다. <기준> : 블럭(박스)으로 나눈다.
2. 이미지와 텍스트를 구분한다.
- 이미지는 커팅
- 텍스트는
3. gif : 저용량.
jpg : 색이 많이 들어간 경우. 화질보정
png : 고품질, 배경무
4. 오른쪽 전체보기 영역은 공중에 띄운다. <- position: absolute
5. 왼쪽 영역은 float:left
css 주기전 코딩.
적절히 div를 주고 class를 준다.
<!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>
</style>
</head>
<body>
<div class="container">
<div class="board">
<h2>이룸소식</h2>
<div class="list">
<ul>
<li><a href="#">제목</a><span>21.12.06</span></li>
<li><a href="#">제목</a><span>21.12.06</span></li>
<li><a href="#">제목</a><span>21.12.06</span></li>
<li><a href="#">제목</a><span>21.12.06</span></li>
</ul>
</div>
<p class="more"><a href="#">전체보기</a></p>
</div>
<div class="board">
<h2>청년정책 새소식</h2>
<div class="list">
<ul>
<li><a href="#">제목</a><span>21.12.06</span></li>
<li><a href="#">제목</a><span>21.12.06</span></li>
<li><a href="#">제목</a><span>21.12.06</span></li>
<li><a href="#">제목</a><span>21.12.06</span></li>
</ul>
</div>
<p class="more"><a href="#">전체보기</a></p>
</div>
</div>
</body>
</html>
css를 적용해보자.
<!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{
margin:0; padding:0;
}
li{
list-style: none;
}
a{
text-decoration: none;
}
.container{
box-sizing: border-box;
margin:0 auto;
width:960px;
overflow:hidden;
background: rgb(216, 214, 214);
}
.board{
box-sizing: border-box;
float:left;
width:460px;
height:372px;
margin-right:20px;
border:1px solid red;
background: white;
}
.board .list ul li{
overflow: hidden;
}
.board .list ul li a{
float: left;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width:280;
}
.board .list ul li span{
float: right;
}
.text{
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
</style>
</head>
<body>
<div class="container">
<div class="board">
<h2>이룸소식</h2>
<div class="list">
<ul>
<li><a href="#">제목이 길어집니다.달이찬다.달이찬다.장기하.밥 먹</a><span>21.12.06</span></li>
<li><a href="#">제목이 길어집니다.달이찬다.달이찬다.장기하</a><span>21.12.06</span></li>
<li><a href="#">제목이 길어집니다.달이찬다.달이찬다.장기하</a><span>21.12.06</span></li>
<li><a href="#">제목이 길어집니다.달이찬다.달이찬다.장기하</a><span>21.12.06</span></li>
</ul>
</div>
<p class="more"><a href="#">전체보기</a></p>
</div>
<div class="board">
<h2>청년정책 새소식</h2>
<div class="list">
<ul>
<li><a href="#">제목이 길어집니다.달이찬다.달이찬다.장기하</a><span>21.12.06</span></li>
<li><a href="#">제목이 길어집니다.달이찬다.달이찬다.장기하</a><span>21.12.06</span></li>
<li><a href="#">제목이 길어집니다.달이찬다.달이찬다.장기하</a><span>21.12.06</span></li>
<li><a href="#">제목이 길어집니다.달이찬다.달이찬다.장기하</a><span>21.12.06</span></li>
</ul>
</div>
<p class="more"><a href="#">전체보기</a></p>
</div>
</div>
</body>
</html>
결과물은. 요렇게.
반응형
'STUDY > 멀티미디어콘텐츠과정' 카테고리의 다른 글
| #23 공간분할 후 실습 (0) | 2021.12.29 |
|---|---|
| #22 background url 주기 (0) | 2021.12.28 |
| #20 css 연습, 헤더 만들어 css적용 (0) | 2021.12.23 |
| #19 css 흐름대로 작성하기 (0) | 2021.12.22 |
| #18 CSS 레이아웃 - Position (0) | 2021.12.21 |
댓글