< / > 클론 코딩-Wordle(게임)__HTML & CSS_1

여러분 혹시 Wordle이라는 게임을 알고 있나?

저도 슈퍼코딩 선생님덕에 알게 되었다.

https://www.nytimes.com/games/wordle/index.html

Wordle - A daily word game

이 링크로 가시면 워들 게임을 진행할 수 있다.

이 게임은 5자의 알파벳으로 구성된 단어를 찾는 게임이다.

처음에 mouse라고 입력을 했는데 저렇게 회색으로 나온다는 것은

정답 단어에 해당 알파벳이 하나도 안 들어간다는 거다.(똥손.....)

 

정답에 들어있지만 자리가 안맞으면 누렇게 나오고

자리까지 맞으면 초록색으로 나온다.

결국 나는 못 ...........

정답은 매일 바뀐다고 하더라

 

그래서 갑자기 왜 게임 얘기를 하냐라고 의아해 할거 같다

이번에 클론 코딩 하려는 게 바로 이 게임이다.

이거처럼 완벽하게는 힘들겠지만 

이번 클론 코딩은 html이랑 css 뿐 아니라 자바스크립트까지 활용해서

기능 구현도 되는 클론 코딩을 하려고 한다.

 

 

먼저 완성본을 보자 

 

오늘은 이렇게 html과 css만을 이용해서 만들었다.

아무런 기능이 없다.

기능적인 부분에서는 만들고 다시 올리겠다.

 

다시보니까 내가 가로 칸을 6개를 만들었더라

다음에 5개로 수정해서 올리겠다.

 

만드는 방법이다.

저번에 올렸던 포스팅과 비슷하다.

2023.06.21 - [개발공부] - < / > 클론 코딩-당근마켓__HTML & CSS (feat. 슈퍼코딩)

< / > 클론 코딩-당근마켓__HTML & CSS (feat. 슈퍼코딩)

먼저 큰 구역을 나눈다.

header : 상단 메뉴, 제목, 기타 버튼

main : 알파벳이 입력될 곳

footer : 키보드

 

아이콘은 저번에 올린 포스팅에 있는 Heroicons와 이번에 새로 알게 된https://icon-icons.com/ko/

이 사이트에서 퍼왔다. 아이콘을 어떻게 넣는지 궁금하신 분들은 저번 포스팅

2023.06.22 - [개발공부] - 무료 아이콘 공유 사이트를 참고하면 되겠다.

 

아 그런데 이번 사이트는 Heroicons처럼 주소 형식으로 복사가 되는 게 아니다.

svg 이미지를 다운로드하여서 쓰는데 

작업 중인 폴더에 직접 받아서 불러와서 쓰면 된다.

필요하면 이것의 사용법도 나중에 올리겠다.

 

이번 작업에 중점은 div의 배열이다.

main에 있는 네모 상자들이나 footer에 있는 키보드 각 각의 버튼은 모두

하나하나가 div이다.

 css에서

  display: flex;

  justify-content: center;

  align-items: center;

를 이용해 각 div들을 배치하고

각 각의 div사이의 간격은 이번에 새로 배우게 된

  gap: 5px;

이 녀석을 써서 하면 된다.

근데 이 gap이라는 녀석도 상위 태그에서 써야 한다.

display: flex; 마찬가지다.

 

이번 클론코딩을 만들면서 가장 성가셨던 게 있다.

 

footer부분을 화면 가장 아래에 고정하고 싶은데

  position: absolute;

  bottom: 0;

이렇게 하니까 계속 왼쪽으로 쏠리더라

 

왜 그런 건지 계속 생각해 보니까

답이 나왔다.

div는 안의 내용만큼 크기가 커진다.

즉 키보드의 너비만큼만 커지기에 

footer {

  position: absolute;

  bottom: 0;

  width: 100vw;

}

이렇게 너비를 줬다.

(이후 flex를 이용해 중앙으로 이동하면 된다.)

아 100 뒤에 vw는 보이는 부분의 100%라고 생각하면 될 거 같다

너비니까 w

높이면?

 

그리고 매번 느끼는 거지만 html을 잘 짜놔야 다 머지 작업들이 편해지는 거 같다.

 

 

 

결론은

 

 

 

 

아 디아 하고 싶다.