220725 TIL 무지성 100문제 풀기

CSS 게임 마라톤

오늘 올라온 과제는 이전과 마찬가지로 CSS 게임들을 클리어하는 거였다.

하지만 이번에는 이전에 했던 게임 3가지 종류 CSS Diner, Flexbox Froggy, Grid garden와 더불어 5개의 게임이 더 추가가 되었다.

총 8개.. 과제 이름이 CSS 게임 마라톤인 이유다.

8개의 CSS게임들을 다 클리어해야만 다음 과제인 웹페이지 만들기를 할 수 있다.

 

그래도 8개 중 3개는 이전에 반복하면서 많이 했던 게임들이니까 금방 하겠지 생각하고 기분 좋게 시작했다.

목표는 일과시간 안에 게임을 끝내고, 저녁에는 마카오 뱅크 웹페이지 만들어서 1차 완성하고 자는 걸 목표로 했다.

 

근데 게임을 진행하면 할수록 이거 생각보다 시간 많이 걸리겠다는 것을 느꼈다.

Guess CSS 게임할 때였는데 이 게임은 CSS 주제 5개에 대한 퀴즈를 맞히는 게임이었다.

주제 5개는 Flexbox, Position, Selectors, Display, Grid와 관련된 문제들이 나온다.

이 문제의 특이점은 다른 게임들과 달리 스테이지가 없었다..

5문제씩 풀 때마다 각 주제를 맞췄는지 표시해주는 화면과 함께 continue버튼이 있길래 continue버튼을 계속 눌렀다.

이 게임의 끝이 어디지?라는 생각으로 무지성으로 계속 풀다가 100문제 풀면 끝나지 않을까? 생각을 하고 100문제까지 풀어봤지만 끝이 나지 않았다.. 그러다 동료분이 이 게임은 끝이 없다고 말해주셨다.. endless라고...... 

 

100문제가 끝 일 줄 알고 진짜 무지성으로 풀고 있었다..  이후에 공지된 이 게임의 통과 조건은 15문제 연속으로 맞추면 통과였다.

100문제 풀떄 position 문제를 제일 많이 틀렸었는데 이거 무지성으로 풀었다가는 15문제는 연속으로 절대 못 맞출 거 같았다. 그래서 position개념을 공부하고 가는 게 훨씬 빠를 것 같아서 position을 공부했다.

 

Position

• css의 position은 문서에 요소들을 배치하는 방법들이다.

static(정적 위치)

요소의 위치를 결정하는 가장 기본적인 방법(기본값)이다. static으로 설정된 요소들은 top, bottom. right, left, z-index 어떠한 속성에 영향을 받지 않는다. 

 

fixed(고정 위치)

position을 fixed로 설정하면 뷰포트를 기준으로 요소를 배치해준 화면에 고정을 시킨다. 이 말은 브라우저의 스크롤을 내려도 배치해준 자리에서 움직이지 않는다. 이런 요소들은 우리가 흔히 브라우저에서 메뉴바를 볼 수 있다. 스크롤을 아무리 내려도 메뉴바는 상단에 고정되어 있다. 이런 메뉴바들을 만들 때 fixed가 사용된다.

 

absolute(절대 위치)

absolute로 설정하면 위치가 설정된 부모 요소를 기준으로 위치를 설정한다. 근데 부모 요소의 위치가 지정되어 있지 않다면 문서의 body 요소를 기준으로 위치를 설정한다.

 

relative(상대 위치)

relative는 자신을 기준으로 배치한다. 자신의 기준은 원래 위치 즉, static일 때의 위치를 기준으로 배치를 한다. top, bottom, left, right의 값에 따라 얼마큼 떨어져서 배치할지 결정을 한다. 

 

계속 실패를 맛봤던 position문제도 개념을 어느 정도 공부하고 가니까 무지성으로 풀었을 때와 비교하면 정답률이 많이 올랐다.

겨우 15문제를 연속으로 맞춰서 통과할 수 있었다.

저기 저 보이는 endless를 못봤다..

 

css게임 8개를 다 클리어했을 때는 9시였다. 게임하는데 뭐 얼마나 걸리겠어했던 나의 생각과는 다르게 게임의 양과 난이도가 생각보다 높았다.. 특히 Grid attack  이 게임은 어렵기도 하고 문제도 80문제나 됐다. 제일 오래 걸린 문제..

계획은 게임을 6시에 끝내고 웹페이지 만드는 거였는데... 이제 웹페이지 만들기 시작한다..

오늘 웹페이지 1차 완성은 못 할 수도...? 일단 지금부터라도 빨리 웹 페이지 만들러 가자