-
2020.10.12 #TILTIL(today I learned) 2020. 10. 13. 09:02
오늘 학원에서 마진 병합 현상이라는 것을 배웠다. 블럭 요소로 이루어진 부모 자식 중 자식에 margin-top or bottom을 주면 부모에 마진을 준 것 같은 결과가 나온다. 만약 자식에 20px margin-top을 준다면 부모 자식 사이에 마진이 생기는 것이 아니라 부모가 margin-top: 20px; 적용되서 위로 떨어진다. 이를 해결하기 위해서는 아래와 같다
1. margin대신 padding 사용
2. 부모에게 자식과 구분할 수 있는 경계를 준다.
- border-top: 1px soild transparent;
- padding-top: 1px;
3. 부모나 자식 중에 float를 줘서 마진병합현상을 미연에 방지한다.
마진 병합 현상은 처음 들어봤는데 나도 코딩하면서 해당 문제를 겪은 적이 있어서 이를 해결하는 방법을 알게 되어 너무 좋았다.
오늘은 이벤트 게시판을 만들었다.
HTML
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>이벤트</title>
<link rel="stylesheet" href="css/default.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<main>
<div class="event_list">
<ul>
<li>
<a href="">
<div class="img"><img src="images/img.png" alt=""></div>
<em>마감</em>
<div class="info">
<strong>힘펠 공식 블로그 방문자 200만이 되었습니다.</strong>
<p>
<span>이벤트기간</span>
2018.11.07~2018.11.21
</p>
</div>
</a>
</li>
<li>
<a href="">
<div class="img"><img src="images/img.png" alt=""></div>
<em>마감</em>
<div class="info">
<strong>힘펠 공식 블로그 방문자 200만이 되었습니다.</strong>
<p>
<span>이벤트기간</span>
2018.11.07~2018.11.21
</p>
</div>
</a>
</li>
<li>
<a href="">
<div class="img"><img src="images/img.png" alt=""></div>
<em>마감</em>
<div class="info">
<strong>힘펠 공식 블로그 방문자 200만이 되었습니다.</strong>
<p>
<span>이벤트기간</span>
2018.11.07~2018.11.21
</p>
</div>
</a>
</li>
<li>
<a href="">
<div class="img"><img src="images/img.png" alt=""></div>
<em>마감</em>
<div class="info">
<strong>힘펠 공식 블로그 방문자 200만이 되었습니다.</strong>
<p>
<span>이벤트기간</span>
2018.11.07~2018.11.21
</p>
</div>
</a>
</li>
<li>
<a href="">
<div class="img"><img src="images/img.png" alt=""></div>
<div class="info">
<strong>힘펠 공식 블로그 방문자 200만이 되었습니다.</strong>
<p>
<span>이벤트기간</span>
2018.11.07~2018.11.21
</p>
</div>
</a>
</li>
<li>
<a href="">
<div class="img"><img src="images/img.png" alt=""></div>
<em>마감</em>
<div class="info">
<strong>힘펠 공식 블로그 방문자 200만이 되었습니다.</strong>
<p>
<span>이벤트기간</span>
2018.11.07~2018.11.21
</p>
</div>
</a>
</li>
</ul>
</div>
<p class="aaa">가로스크롤박스</p>
<div class="paging">
<ul>
<li class="first"><a href=""><span class="hide">첫페이지</span></a></li>
<li class="prev"><a href=""><span class="hide">이전페이지</span></a></li>
<li><a href="" class="on">1</a></li>
<li><a href="">2</a></li>
<li class="next"><a href=""><span class="hide">다음페이지</span></a></li>
<li class="last"><a href=""><span class="hide">마지막페이지</span></a></li>
</ul>
</div>
<div class="search">
<select>
<option>제목</option>
</select>
<input type="search">
<button>검색</button>
</div>
</main>
</body>
</html>
CSS
body { padding: 50px;}
main { width: 1196px;}
.event_list ul { display: flex; flex-flow: row wrap; align-content: flex-start;}
.event_list li { flex:0 1 25%; padding: 0 0 34px;}
.event_list li a { display: block; position: relative; width: 271px; height: 382px; line-height: 1;border:1px solid #ddd;}
.event_list li a .img { overflow: hidden; position: relative; width: 271px; height: 272px; border-bottom: 1px solid #ddd;}
.event_list li a .img img { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}
.event_list li a .info { padding: 29px 10px 0;}
.event_list li a .info strong { display: block; overflow: hidden; width: 100%; white-space: nowrap; text-overflow: ellipsis; font-size: 18px; color:#222;}
.event_list li a p { padding: 20px 0 0;font-size: 13px; color:#888;}
.event_list li a p span { color:#ed1846; font-size: 15px;}
.event_list li a em { position: absolute; right: 9px; top: 9px; z-index: 2; width: 60px; height: 60px; border-radius: 100%; background: rgba(0,0,0,.5); color:#fff; text-align: center; line-height: 60px;}
.paging { padding: 28px 0 60px;}
.paging ul { display: flex; justify-content: center;}
.paging a { display: block; width: 42px; height: 42px; text-align: center; line-height: 42px; font-size: 15px; color:#555;}
.paging a:hover,
.paging a.on { background: #ed1846; color:#fff;}
.paging li { margin: 0 7px;}
.paging .first { margin: 0 16px 0 0;background: url(../images/prev-first.png) no-repeat center;}
.paging .prev { margin: 0 6px 0 0;background: url(../images/paging-prev.png) no-repeat center;}
.paging .next { margin: 0 0 0 6px;background: url(../images/paging-next.png) no-repeat center;}
.paging .last { margin: 0 0 0 16px;background: url(../images/next-last.png) no-repeat center;}
.paging .first a:hover,
.paging .prev a:hover,
.paging .next a:hover,
.paging .last a:hover { background: none;}
.search { padding: 20px 0;border-top:1px solid #ccc; border-bottom: 1px solid #ccc; text-align: center; font-size: 0;}
.search * { margin: 0 5px; height: 53px; border: 1px solid #ccc;}
.search select { width: 148px;}
.search input { width:258px;}
.search button { width:150px; border: none; background: #ed1846; color:#fff;}
결과
'TIL(today I learned)' 카테고리의 다른 글
2020.10.14 #TIL (0) 2020.10.15 2020.10.13 #TIL (0) 2020.10.13 2020.10.07 #TIL (0) 2020.10.08 2020.10.06 #TIL (0) 2020.10.07 2020.09.29 #TIL (0) 2020.09.29