코딩에 들어가기 전 세부적으로 계획하는 습관을 들이자.
작은것이라도 계획할 줄 알아야 나중에 큰 프로젝트를 진행할때도 차질없이 진행할 수 있다.
그리고, 자바스크립트로 동적인 웹사이트를 만들기 이전에는
정적인 것으로 구현해놓고 차근차근 바꿔 나가는 것이 구현에 있어 유리하다.
오늘은 html, css, javascript를 활용해 페이지를 구현해보는 것을 연습했다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Online Shopping</title>
<link rel="stylesheet" href="style.css" />
<script src="src/main.js" defer></script>
<script src="data/data.js" defer></script>
</head>
<body>
<!--logo -->
<img src="img/logo.png" class="logo"></img>
<!--button-->
<div class="btnlist">
<Button class="btn">
<img src="img/blue_t.png" alt="tshirt" class="imgbtn">
</Button>
<Button class="btn">
<img src="img/blue_p.png" alt="pants" class="imgbtn">
</Button>
<Button class="btn">
<img src="img/blue_s.png" alt="skirt" class="imgbtn">
</Button>
<Button class="btn colorBtn blue">Blue</Button>
<Button class="btn colorBtn yellow">Yellow</Button>
<Button class="btn colorBtn pink">Pink</Button>
</div>
<!--item-->
<ul class="items">
<li class="item">
<img class="itemImg" src="img/pink_t.png" alt="tshirt">
<span class="itemDescript">male, large</span>
</li>
</ul>
</body>
</html>먼저 뼈대부터 잡고 들어간다.
크게 로고, 버튼, 아이템 세 파트로 나눠서 구성했다.
여기에 차례대로 아이템들을 배치했다.
참고로, css에서 root를 통해 변수 선언을 한다면, 일관성 있는 디자인을 만들 수 있는 것을 알게 됐다.
또한, 한 클래스내에서 띄어쓰기를 사용한다면 여러개의 이름을 붙일 수 있는 것도 알게 됐다.
먼저 바디태그에 전체적으로 백그라운드를 깔아주고
디스플레이 플렉스를 통해 중앙에 배치해줬다.
그리고 높이에 100vh를 적용해 어떤 창에서든 100% 공간을 차지할 수 있도록 구성했다.
그리고 로고에 커서 포인트와 트랜지션 효과를 적용해줬다.
이때 모든 값들은 root에서 선언한 변수를 들고와서 적용해준다.
이런식으로 hover를 이용해서 마우스에 반응하게 했고
각 컨테이너에게 적용해줬다.
참고로 변수를 적용하지 않고 다른 값을 주는 함수도 새롭게 알게 됐다.
그리고 개인적으로 가장 쓸모있다고 생각한 기능을 또 알게됐다.
일정 컨테이너에서만 스크롤 이벤트가 발생하는 방법에 대해 궁금했었는데
overflow y: scroll을 적용하면 가능했다.
그리고 다음 시간에는 자바스크립트를 통해 해당 컨테이너에 무작위로 데이터를 배치할 예정이다. 이를 가능하게 하려면 json에 대한 공부가 더 필요했다.
예습
json은 클라이언트와 서버가 통신할 수 있또록 도와주는 포맷이다.
자바스크립트와 비슷하게 object 개념으로 적혀있어, key와 value로 구성돼있다.
json을 사용하는 이유는 크게 6가지다.
1. 데이터를 주고 받을때 사용할 수 있는 가장 간단한 포맷
2.텍스트를 기반으로 작성해 가벼움
3. 읽기 편하다.
4. js와 비슷하다.
5. 서버와 통신할때 직렬화가 가능하다.
6. 프로그래밍 언어와 플랫폼에 상관없이 사용가능하다.
이같은 이유로 json을 사용한다고한다.
