Hangman (3) - CSS

이 포스트는 Udemy에 올라온

Brad Traversy의 20 Web Projects With Vanila JavaScript 강의를 보고 정리하는 내용입니다!

https://www.udemy.com/course/web-projects-with-vanilla-javascript/

20 Web Projects With Vanilla JavaScript

 

 

 

 

1. body

body {
  background-color: #34495e;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 80vh;
  overflow: hidden;
  margin: 0;
}

배경색, 글자색 넣어주고

display:flex, flex-direction:column, align-items:center을 해서 elements 수직 정렬, 화면 중앙

height을 80vh로 쓰고 (나중에 notification 위해)

스크롤바 생기지 않게 overflow:hidden

기본 margin은 다 없애줬다.

 

- body의 height을 80vh으로 설정해서 밑에 다른 div들이 튀어나가있음 ㅎㅎ

 

 

 

 

2. game-container

.game-container {
  width: 450px;
  height: 350px;
  padding: 20px 30px;
  position: relative;
}

game-container의 너비는 450px, 높이는 350px

padding 위아래 20px 좌우 30px

position:relative인 이유는

game-container 속 다른 아이템들에 position:absolute;를 줘서

game-container를 기준으로 위치를 정할 것이기 때문

 

(body 높이를 80vh로 한데다 flow:hidden했기 때문에 다른 부분은 다 짤려서 안나옴..ㅎㅎㅎ)

 

 

 

 

 

3. figure-container

.figure-container {
  fill: transparent;
  stroke: #fff;
  stroke-width: 4px;
  stroke-linecap: round;
}

(저번 시간에도 했지만) svg로 그린 행맨 파트

원을 그렸을 때, 원을 채울 색은 transparent (투명? 그냥 테두리만 생기고 뒤 배경색과 같아질 것)

stoke line 속성은 라인 그렸을 때 색깔

stroke-width은 line 두께

stroke-linecap은 line 시작점, 끝점 모양 어떻게 할지. round로 하면 끝이 둥글어짐

 

 

 

 

 

4. wrong-letters-container

.wrong-letters-container {
  position: absolute;
  top: 20px;
  right: 20px;
  display: flex;
  flex-direction: column;
  text-align: right;
}

game-container 속 wrong-letters-container는

position:absolute를 해서

game-container을 기준으로 top:20px right:20px 떨어진 곳에 위치

 

wrong-letters-container 속 <div> 정렬을 위해

display:flex, flex-direction:column

text-align:right으로 해서 왼쪽으로 배치된 "wrong"이라는 단어를 오른쪽 끝에 붙였다.

 

 

 

 

 

.wrong-letters-container p {
  margin: 0 0 5px;
}

wrong-letters-container에서 "wrong"이 들어가는 <p>

위, 좌우 margin은 0이고 아래에만 margin 5px을 줬다.

 

.wrong-letters-container span {
  font-size: 24px;
}

이미 입력한 (틀린) 단어들이 들어가는 span

font를 키웠다.

 

 

 

 

 

5. word

.word {
  display: flex;
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
}

display:flex를 줘서 세로로 배치되어있던 div들을 한 줄로

 

position:absolute를 해서 game-container를 기준으로 배치할 수 있게.

 

game-container 기준으로 bottom에서 10px 위로

left:50%갔는데

hello라는 단어에서 시작인 h가 왼쪽에서 50% 간 곳에 위치하기 때문에

사용자가 보기에는 정중앙에 위치하지 않는다. 

그래서

transform:translateX(-50%)를 준다.

그러면 정중앙에 hello가 배치된다.

 

 

 

 

 

 

6. letter

.letter {
  font-size: 30px;
  height: 50px;
  width: 20px;
  border-bottom: 3px solid #2980b9;
  margin: 0 3px;
  display: flex;
  align-items: center;
  justify-content: center;
}

 

 

각 글자 크기를 30px로 키워준다

height:50px width:20px

그리고 각 글자들 아래 border-bottom.

이때 width를 안주면, 원래 글자의 길이에 따라 div의 크기가 달라지고,

그래서 아래 border-bottom 선 길이가 달라진다.

(가령, l은 width가 짧고 n은 width가 넓어서 라인 길이가 일정하지 않고 어떤 건 길고 어떤 건 짧게 나온다. )

그래서 그 길이를 맞춰주기 위해 width:20px로 통일.

 

 

margin을 줘서 각 글자들이 띄워지게 만들었다.

 

display:flex, align-items:center, justify-content:center을 해서

hello라는 글자가 붕- 떠있거나 한 쪽으로 치우치지 않고 중앙에 잘 배치되도록.

 

 

 

 

 

7. pop-up container

.popup-container {
  background-color: rgba(0, 0, 0, 0.3);
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

배경색 검정색이지만 opacity:0.3으로

position:fixed, top:0, bottom:0, left:0, right:0으로 하면

화면 전체 뒤 덮음

 

그리고 display:flex, align-items:center, justify-content:center을 줘서

popup-container 속 진짜 popup창이 화면 중앙에 위치하도록

 

 

어두워진 배경이 화면 전체를 뒤덮고 popup창이 중앙에 위치

popup창 스타일까지 끝나면 popup container는 display:none으로 바꿔줘야한다!

 

 

 

 

 

8. popup

.popup {
  background: #2980b9;
  box-shadow: 0 15px 10px 3px rgba(0, 0, 0, 0.1);
  padding: 20px;
  border-radius: 5px;
  text-align: center;
}

 

배경색, 박스 쉐도우 넣어주고

padding 넣어서 box 크게 만들고

border-radius로 모서리를 약간 둥글게

text-align:center해서 버튼도 중앙에 배치

 

 

 

 

 

 

 

 

9. popup button

.popup button {
  cursor: pointer;
  background: #fff;
  color: #2980b9;
  margin-top: 20px;
  padding: 12px 20px;
  border: 0;
  font-size: 16px;
}

.popup button:active {
  transform: scale(0.98);
}

.popup button:focus {
  outline: 0;
}

 

 

사용자가 버튼을 누르는 순간 작아졌다가 다시 커지는 효과주고 싶을 때는

:active라는 pseudo selector를 써서

transform:scale(0.98)을 주면 된다.

 

그러면 버튼을 누르는 순간 작아지는데 그 상태가 유지되는게 아니라 다시 커짐

(그래서 실제 버튼 누른 것 같은 느낌적 느낌적 느낌을 주는)

 

 

그리고 버튼을 누르면 button이 focused된 상태 아니겠음?

(마치 input이나 textarea 같은 곳에 키보드로 입력하려고 focus한 것처럼)

그때 못생긴 outline이 버튼에도 생긴다(이미지 참고)

 

outline:0 효과 지운 상태. 저렇게 검정색 테두리가..

 

 

 

focus된 상태에서 저 검정색 테두리 없애고 싶다면 당연히

:focus peudo selector 이용해서 outline:0을 주면 된다.

 

 

깔끔깔끔

 

 

 

이제 pop창 다 꾸몄으니

popup-container를 display:none으로 바꿔서

일단 사라지게 만들고.

 

이미 입력한 단어를 다시 입력하는 경우 화면 아래에서 등장할

notification을 꾸며본다!

 

 

 

 

 

 

 

 

10. notification-container

.notification-container {
  background-color: rgba(0, 0, 0, 0.3);
  padding: 15px 20px;
  position: absolute;
  bottom: -50px;
  transition: transform 0.3s ease-in-out;
}

.notification-container p {
  margin: 0;
}

아예 화면 아래로 사라지게

 

.notification-container.show {
  transform: translateY(-50px);
}

javascript에 의해 동적으로 show라는 클래스가 추가되면 화면에 나타나게

(근데 부드럽게 나타나게 하려고 위해 transition 효과를 줬다.)