실습. Image Grid, 상단바 구현하기

목차

• Material Image Grid 구현하기
• 상단바 구현하기

Material Image Grid 구현하기

step 1. 기초 마크업, 기초 CSS

HTML

section.section-1.con-min-width>.con>.img-list-box + tab

CSS

/* 노말라이즈 시작 */
body, ul, li {
  margin:0;
  padding:0;
  list-style:none;
}
a {
  color:inherit;
  text-decoration:none;
}
/* 노말라이즈 끝 */

/* 라이브러리 시작 */
.con {
  margin-left:auto;
  margin-right:auto;
}
/* 라이브러리 끝 */

/* 커스텀 시작 */
:root {
  --site-width:700px;
}
.con {
  width:var(--site-width);
}
.con-min-width {
  min-width:var(--site-width);
  padding:0 10px;
}
body {
  background-color: #e2e1e0;
}
/* 커스텀 끝 */

Step 2. 이미지 그리드 리스트

HTML

section.section-1.con-min-width>.con>.img-list-box>ul.inline-grid>li.img-box*10>img[src="https://picsum.photos/id/1$$/500/700"]  + tab

CSS

/*위에 추가*/
.img-list-box > ul > li {
  width:20%;
}

Step3. 배경 이미지, after를 통한 고정비율 element

CSS

/*수정 및 추가*/
.img-list-box > ul > li {
  width:20%;
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
}

.img-list-box > ul > li::after {
  content:"";
  display:block;
  padding-top:100%;
}

Step4. 리스트 아이템 여백

CSS

/*수정 및 추가*/
.img-list-box > ul > li {
  width:calc((100% - (5 - 1) * 20px) / 5);
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  margin-top:20px;
  background-color:white;
}

.img-list-box > ul > li:not(:nth-child(5n)) {
  margin-right:20px;
}

.img-list-box > ul > li::after {
  content:"";
  display:block;
  padding-top:100%;
}

step5. 리스트 아이템 크기 키우기 한 줄에 3개

• 위에 5로 설정 되어있는 숫자 3으로 변경 
• site--width 변수 1200px로 변경

step6. hover, 그림자 적용

/*수정 및 추가*/
.img-list-box > ul > li {
  width:calc((100% - calc(3 - 1) * 30px) / 3);
  margin-top:30px;
  box-shadow:0 1px 2px rgba(0,0,0,0.3),
    0 1px 3px rgba(0,0,0,0.15);
  transition:box-shadow 1s;
  background-color:white;
}

.img-list-box > ul > li:hover {
  box-shadow:0 10px 10px rgba(0,0,0,0.3),
    0 14px 28px rgba(0,0,0,0.3);
}

 

상단바 구현하기

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">

<!-- 탑바 시작 -->
<header class="logo-bar con-min-width">
  <div class="con text-align-center">
    <a href="#" class="logo-bar__logo">
      <span>
        <i class="fab fa-jenkins"></i>
      </span>
      <span>
        <span>Develo</span><span>p</span><span>ers</span>
      </span>
    </a>
  </div>
</header>
<!-- 탑바 끝 -->

<!-- 메뉴바 시작 -->
<header class="menu-bar con-min-width">
  <div class="con">
    <nav class="menu-bar__menu-box-1">
      <ul class="inline-grid">
        <li><a href="#" class="block">HOME</a></li>
        <li><a href="#" class="block">ARTICLES</a></li>
        <li><a href="#" class="block">WRITE</a></li>
        <li><a href="#" class="block">ABOUT</a></li>
        <li><a href="#" class="block">SNS</a></li>
        <li><a href="#" class="block">FAQ</a></li>
        <li><a href="#" class="block">BRAND</a></li>
      </ul>
    </nav>
  </div>
</header>
<!-- 메뉴바 끝 -->

CSS

/* 폰트적용 시작 */
@font-face {
  font-family: 'LotteMartDream';
  font-style: normal;
  font-weight: 400;
  src: url('//cdn.jsdelivr.net/korean-webfonts/1/corps/lottemart/LotteMartDream/LotteMartDreamMedium.woff2') format('woff2'), url('//cdn.jsdelivr.net/korean-webfonts/1/corps/lottemart/LotteMartDream/LotteMartDreamMedium.woff') format('woff');
}

@font-face {
  font-family: 'LotteMartDream';
  font-style: normal;
  font-weight: 700;
  src: url('//cdn.jsdelivr.net/korean-webfonts/1/corps/lottemart/LotteMartDream/LotteMartDreamBold.woff2') format('woff2'), url('//cdn.jsdelivr.net/korean-webfonts/1/corps/lottemart/LotteMartDream/LotteMartDreamBold.woff') format('woff');
}

@font-face {
  font-family: 'LotteMartDream';
  font-style: normal;
  font-weight: 300;
  src: url('//cdn.jsdelivr.net/korean-webfonts/1/corps/lottemart/LotteMartDream/LotteMartDreamLight.woff2') format('woff2'), url('//cdn.jsdelivr.net/korean-webfonts/1/corps/lottemart/LotteMartDream/LotteMartDreamLight.woff') format('woff');
}

html {
  font-family: 'LotteMartDream', sans-serif;
}
/* 폰트적용 끝 */

/* 노말라이즈 시작 */
body, ul, li {
  margin:0;
  padding:0;
  list-style:none;
}

a {
  color:inherit;
  text-decoration:none;
}
/* 노말라이즈 끝 */

/* 라이브러리 시작 */
.con {
  margin-left:auto;
  margin-right:auto;
}

.inline-grid {
  font-size:0;
}

.inline-grid > * {
  font-size:1rem;
  display:inline-block;
  vertical-align:top;
  box-sizing:border-box;
}

.text-align-center {
  text-align:center;
}

.block {
  display:block;
}
/* 라이브러리 끝 */

/* 커스텀 시작 */
:root {
  --site-width:1200px;
}

.con {
  width:var(--site-width);
}

.con-min-width {
  min-width:var(--site-width);
  padding:0 10px;
}

/* 로고바 시작 */
.logo-bar__logo {
  font-size:5rem;
}

.logo-bar__logo > span:last-child {
  font-weight:bold;
  text-decoration:underline;
}

.logo-bar__logo > span:last-child > span:nth-child(2) {
  color:red;
}
/* 로고바 끝 */

/* 메뉴바 시작 */
.menu-bar {
  margin-top:30px;
}

.menu-bar__menu-box-1 > ul > li {
  width:calc(100% / 7);
}

.menu-bar__menu-box-1 > ul > li > a {
  text-align:center;
  padding:10px 0;
  font-weight:bold;
  font-size:1.3rem;
}

.menu-bar__menu-box-1 > ul > li:hover > a {
  color:red;
  text-decoration:underline;
}
/* 메뉴바 끝 */

/* 커스텀 끝 */