글 작성자: 택시 운전사
반응형

🖼️ Day5 - JavaScript로 Flexbox를 이용한 이미지 갤러리 만들기

JavaScript 30의 다섯 번째 프로젝트는 Flexbox를 이용한 이미지 갤러리 만들기 프로젝트이다.


😊 HTML 코드

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Flex Panels 💪</title>
    <link
      href="https://fonts.googleapis.com/css?family=Amatic+SC"
      rel="stylesheet"
      type="text/css"
    />
 
    <link rel="stylesheet" href="main.css" />
  </head>
  <body>
    <div class="panels">
      <div class="panel panel1">
        <p>Hey</p>
        <p>CAT</p>
        <p>Dance</p>
      </div>
      <div class="panel panel2">
        <p>Give</p>
        <p>CAT</p>
        <p>Receive</p>
      </div>
      <div class="panel panel3">
        <p>Experience</p>
        <p>CAT</p>
        <p>Today</p>
      </div>
      <div class="panel panel4">
        <p>Give</p>
        <p>CAT</p>
        <p>You can</p>
      </div>
      <div class="panel panel5">
        <p>Life</p>
        <p>CAT</p>
        <p>Motion</p>
      </div>
    </div>
    <script src="main.js"></script>
  </body>
</html>
 
cs

🎨 CSS 코드

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
html {
  box-sizing: border-box;
  background: #ffc600;
  font-family: "helvetica neue";
  font-size: 20px;
  font-weight: 200;
}
body {
  margin: 0;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}
.panels {
  min-height: 100vh;
  overflow: hidden;
  display: flex;
}
.panel {
  background: #6b0f9c;
  box-shadow: inset 0 0 0 5px rgba(255, 255, 255, 0.1);
  color: white;
  text-align: center;
  align-items: center;
  /* Safari transitionend event.propertyName === flex */
  /* Chrome + FF transitionend event.propertyName === flex-grow */
  transition: font-size 0.7s cubic-bezier(0.61, -0.19, 0.7, -0.11),
    flex 0.7s cubic-bezier(0.61, -0.19, 0.7, -0.11), background 0.2s;
  font-size: 20px;
  background-size: cover;
  background-position: center;
  flex: 1;
  justify-content: center;
  display: flex;
  flex-direction: column;
}
.panel1 {
  background-image: url(./img/cat1.jpg);
}
.panel2 {
  background-image: url(./img/cat2.jpg);
}
.panel3 {
  background-image: url(./img/cat3.jpg);
}
.panel4 {
  background-image: url(./img/cat4.jpg);
}
.panel5 {
  background-image: url(./img/cat5.jpg);
}
/* Flex Items */
.panel > * {
  margin: 0;
  width: 100%;
  transition: transform 0.5s;
  flex: 1 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
.panel > *:first-child {
  transform: translateY(0);
}
.panel.open-active > *:first-child {
  transform: translateY(-100%);
}
.panel > *:last-child {
  transform: translateY(0);
}
.panel.open-active > *:last-child {
  transform: translateY(100%);
}
.panel p {
  text-transform: uppercase;
  font-family: "Amatic SC", cursive;
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.72), 0 0 14px rgba(0, 0, 0, 0.45);
  font-size: 2em;
}
.panel p:nth-child(2) {
  font-size: 4em;
}
.panel.open {
  flex: 5;
  font-size: 40px;
}
@media only screen and (max-width: 600px) {
  .panel p {
    font-size: 1em;
  }
}
 
cs

CSS의 Flexbox를 이용하여 작성하였다. 중간의 flex 부분을 1에서 특정 행동 시 5 변경해서 다른 부분에 비해 5라는 크기를 차지하도록 코드를 짰다.

👨‍💻 JavaScript 코드

1
2
3
4
5
6
7
8
9
10
11
12
13
14
const panels = document.querySelectorAll(".panel");
function toggleOpen() {
  console.log("Hello");
  this.classList.toggle("open");
}
function toggleActive(e) {
  console.log(e.propertyName);
  if (e.propertyName.includes("flex")) {
    this.classList.toggle("open-active");
  }
}
panels.forEach(panel => panel.addEventListener("click", toggleOpen));
panels.forEach(panel => panel.addEventListener("transitionend", toggleActive));
 
cs

React에서 onClick 함수와 state를 이용한 styled-components의 변수 이용으로 이와 같은 코드를 구현했었는데, JavaScript에서는 class를 추가, 제거하면서 코드를 작성해야한다. 또한 addEventListener에 두번째 인자에는 첫번째 인자에 해당하는 이벤트가 실행되었을 때, 실행할 함수가 무엇인지이기 때문에, toggleOpen()이 아닌 toggleOpen으로 적어 함수의 참조만 넘겨준다


링크


반응형
저작자표시

'Web > JavaScript' 카테고리의 다른 글

웹 사이트(website)와 웹 애플리케이션(webapplication) 뭐가 다를까?  (0) 2019.02.10
[JavaScript] 🤳 JavaScript로 정규표현식을 이용한 검색창 구현하기  (0) 2019.02.10
[JavaScript] 💪 Array관련 Method 완전정복 1탄  (0) 2019.02.05
[JavaScript] 🎨 JavaScript로 CSS 업데이트하기  (0) 2019.02.04
[JavaScript] ⌚ JavaScript로 시계만들기  (0) 2019.02.03

티스토리툴바