728x90
부스트코스의 예제를 바탕으로 실습한 부분입니다.
html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width==device-width, initial-scale=1.0">
<title>반응형 웹</title>
<link rel="stylesheet" href="../reset.css">
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="wrap">
<!-- 헤더 부분 -->
<header>
<!-- a링크 및 h1으로 로고 선언 -->
<a href="#" class="logo"><h1>LOGO</h1></a>
<!-- 모바일메뉴(햄버거) 제작을 위한 a링크 선언 -->
<a href="#" class="gnb_menu">gnb menu</a>
<!-- 전체 메뉴 선언 -->
<nav>
<a href="#">MENU1</a>
<a href="#">MENU2</a>
<a href="#">MENU3</a>
<a href="#">MENU4</a>
<a href="#">MENU5</a>
<a href="#">MENU6</a>
<a href="#">MENU7</a>
<a href="#">MENU8</a>
</nav>
</header>
<!-- 섹션으로 분리 -->
<section>
<!-- 리스트 영역 -->
<ul class="list">
<li>
<!-- 전체를 감싸는 a태그 선언 -->
<a href="#" class="inner">
<!-- 이미지 영역 -->
<div class="thumb">
<img src="thumb.png" alt="썸네일이미지">
</div>
<!-- 텍스트 영역 -->
<div class="title">
타이틀을 길게 써보도록 하겠습니다. 썸네일보다 길게
</div>
</a>
</li>
<li>
<a href="#" class="inner">
<div class="thumb">
<img src="thumb.png" alt="썸네일이미지">
</div>
<div class="title">
타이틀입니다.
</div>
</a>
</li>
<li>
<a href="#" class="inner">
<div class="thumb">
<img src="thumb.png" alt="썸네일이미지">
</div>
<div class="title">
타이틀입니다.
</div>
</a>
</li>
<li>
<a href="#" class="inner">
<div class="thumb">
<img src="thumb.png" alt="썸네일이미지">
</div>
<div class="title">
타이틀입니다.
</div>
</a>
</li>
<li>
<a href="#" class="inner">
<div class="thumb">
<img src="thumb.png" alt="썸네일이미지">
</div>
<div class="title">
타이틀입니다.
</div>
</a>
</li>
<li>
<a href="#" class="inner">
<div class="thumb">
<img src="thumb.png" alt="썸네일이미지">
</div>
<div class="title">
타이틀입니다.
</div>
</a>
</li>
<li>
<a href="#" class="inner">
<div class="thumb">
<img src="thumb.png" alt="썸네일이미지">
</div>
<div class="title">
타이틀입니다.
</div>
</a>
</li>
<li>
<a href="#" class="inner">
<div class="thumb">
<img src="thumb.png" alt="썸네일이미지">
</div>
<div class="title">
타이틀입니다.
</div>
</a>
</li>
<li>
<a href="#" class="inner">
<div class="thumb">
<img src="thumb.png" alt="썸네일이미지">
</div>
<div class="title">
타이틀입니다.
</div>
</a>
</li>
<li>
<a href="#" class="inner">
<div class="thumb">
<img src="thumb.png" alt="썸네일이미지">
</div>
<div class="title">
타이틀입니다.
</div>
</a>
</li>
</ul>
</section>
<!-- 푸터는 하나로만 선언 -->
<footer>
Copyright © NAVER Corp. All Rights Reserved.
</footer>
</div>
</body>
</html>css
@charset "UTF-8";
/* a 전체 데코레이션 삭제 */
a{
text-decoration: none;
}
/* float해제를 위한 overflow 선언 */
header{
overflow:hidden;
background-color: pink;
padding: 20px;
}
/* 로고는 left로 */
.logo{
float:left;
font-size: 20px;
color:#fff;
}
/* 메뉴는 right로 */
nav{
float:right;
}
/* 폰트 디자인 선언 */
nav a{
padding: 0 5px;
font-size: 20px;
color:#fff;
}
/* float해제를 위한 overflow 선언 및 최대가로 길이 선언 */
section{
overflow: hidden;
max-width: 900px;
margin: 50px auto;
}
/* inner에서 준 마진의 전체 좌우상하 삭제를 위한 마진 설정 */
.list{
margin: -5px;
overflow:hidden;
}
/* 5개씩 나열임으로 20% 선언 및 float 선언 */
.list li{
float:left;
width: 20%;
}
/* 양쪽 마진 5px 씩 주어 총 10px 적용 */
.inner{
display:block;
margin: 5px;
border:1px solid #000;
}
/* 이미지는 전체영역을 차지하게 설정 */
.thumb img{
width: 100%;
height: auto;
vertical-align: middle;
}
/* 말줄임을 위한 전체 설정 */
.title{
overflow:hidden;
padding: 5px 0;
text-align:center;
font-size: 14px;
color:#555;
white-space: nowrap;
text-overflow: ellipsis;
}
/* 모바일 메뉴(햄버거) pc버전에서 보이지 않게 display none 설정 */
.gnb_menu{
display: none;
}
/* 푸터 영역 */
footer{
height: 50px;
line-height: 50px;
text-align:center;
background-color:#ccc;
font-size: 14px;
color:#000;
}
/* 태블릿 가로모드 적용*/
@media screen and (max-width: 768px), screen and (max-height: 768px) and (orientation: landscape){
/* 헤더 색상변경 */
header{
background-color: lightseagreen;
}
/* 로고 부분 float 해제 및 a태그에 블럭요소를 주고 중앙 정렬 */
.logo{
width: 100px;
float: none;
display: block;
margin: 0 auto;
font-size: 40px;
text-align: center;
}
/* 메뉴영역 넘치는 부분 스크롤 및 float 해제 */
nav{
margin-top: 20px;
float: none;
white-space: nowrap;
overflow-x: auto;
overflow-y: hidden;
}
nav a{
font-size: 25px;
}
/* 마진 값 조절 */
.list{
margin: -4px;
}
/* 넓이 조절 */
.list li{
width: 25%;
}
/* 마진 값 조절 및 타이틀의 위치조절을 위한 포지션 설정*/
.inner{
position: relative;
margin: 4px;
}
/* 타이틀 앱솔루트 설정 및 아래에 위치하게 위치값 조절 */
.title{
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: 10px 0;
background: rgba(0, 0, 0, 0.2);
color: #fff;
}
/* 푸터영역 */
footer{
background-color: lightcoral;
color: #fff;
}
}
/* 모바일 버전 가로모드 적용*/
@media screen and (max-width: 375px), screen and (max-height: 375px) and (orientation: landscape){
header{
padding: 10px 0;
}
/* 전체 메뉴 숨김 및 스타일링 및 포지션 설정 */
nav{
display: none;
position: absolute;
top: 60px;
left: 0;
bottom: 0;
width: 200px;
background-color: lightslategray;
margin: 0;
z-index: 10;
}
/* 각 메뉴 일자로 만들고 스타일 */
nav a{
display: block;
padding: 20px 10px;
font-size: 20px;
border-bottom: 1px solid #fff;
}
/* 모바일메뉴(햄버거) 생성(그라데이션) 및 위치값 조절 */
.gnb_menu{
position: absolute;
top: 12px;
left: 12px;
display: block;
width: 40px;
height: 35px;
font-size: 1px;
color: transparent;
background: linear-gradient(#fff 50%, transparent 50%);
background-size: 100% 14px;
}
/* 메뉴 전체 영역 넓이 조절 */
.list li{
width: 100%;
}
section{
margin: 0;
}
/* a태그 전체에 테이블 선언 */
.inner{
display: table;
table-layout: fixed;
width: 100%;
margin: 0;
border: none;
border-top: 1px solid #000;
}
/* 각 포함된 요소 cell선언 */
.thumb{
display: table-cell;
width: 100px;
}
/* 각 포함된 요소 cell선언 및 포지션 초기화 및 스타일*/
.title{
display: table-cell;
position: relative;
right: auto;
left: auto;
bottom: auto;
top: auto;
padding: 8px;
background-color: #fff;
color: #000;
text-overflow: inherit;
white-space: inherit;
text-align: left;
}
}
생각보다 부스트코스에서 나와 다르게 짠 코드가 많이 보였다. 동영상 강의를 보기전에도 충분히 구현이 가능하였지만 나의 코드보다 이 코드가 훨씬 더 확장성도 좋았고 군더더기 없이 깔끔했다.
내가 짠 코드는 이거보다 1.5 배는 길었다. 더 열심히 공부해야겠다는 생각이 든다.
반응형 코드에서의 배치 및 변형 margin 의 활용 및 포지션의 초기화 등 많은 것들이 도움 된 코드이다.
이 코드를 100% 이해한다면 다른 반응형 예제도 쉽게 할 듯하다.
728x90
'HMTL & CSS' 카테고리의 다른 글
| 파일첨부 소스코드 (0) | 2020.09.02 |
|---|---|
| 체크박스 예시 소스 코드 (0) | 2020.09.01 |
| 레이어팝업 만들기 [ Layer Popup ] (0) | 2020.09.01 |
| 달력 UI제작 (웹접근성 코드) (0) | 2020.08.28 |
| 썸네일 이미지 목록 - 2 (0) | 2020.08.24 |