📌 학습한 내용

네이버 게임 실습

전체 코드 : 💾

<복잡한 변수명이 생겨나는 이유>

Angular, React, Vue 와 같은 도구(자바스크립트 프레임워크)들에서 사용하는 CSS를 작성하는 방법(CSS-in-JS) 때문이다.

CSS-in-JS : 자바스크립트를 기반으로 해 CSS를 적용하는 법

해당 도구들을 활용해 디자인을 적용하면 랜덤하게 숫자&알파벳 조합으로 클래스 명을 완성시킴.

상단 영역

box-shadow : 해당 영역에 그림자 삽입
(참조 사이트 : https://cssgenerator.org/box-shadow-css-generator.html)
border-radius를 적용시키기 위해 overflow: hidden; 값을 줌
placeholder 속성값 색상 변경
- 디폴트 색은 회색
- ::placeholder 가상 선택자 사용

  #game-header nav .right .search-wrap input::placeholder {
	color: rgb(192, 189, 225);
}

position: absolute;를 사용한 영역에 대해서는 x축 중앙정렬(margin: 0 auto)이 되지 않는다.
transition : 속성을 서서히 변화시키는 속성.

📌 학습내용 중 어려웠던 점

html 파일 실행 중, 브라우저를 100% 이상으로 확대하면 요소들이 짤려서 나타나는 오류 발생

📌 해결방법

우선 개발자 도구를 이용해, 바탕이 되는 game-container에 가로가 고정(width: 1280px;)되어 있는 반면, container의 부모 요소(game-header)는 가로를 100%로 받고 있어 공백이 생기게 되는 것을 확인했다. (이 부분이 브라우저를 확대를 하면서 점점 더 크게 보이게 됨) 강사님은 이에 두 가지 솔루션을 제시해 주셨는데, 1) 부모의 값을 고정하거나 2) game-container의 값을 상대값으로 지정하라고 하셨다. 하지만 두 가지 방법 모두 본래 오류가 해결되는 대신 다른 오류가 생겼다.

1) 부모값(game-header) 고정

#game-header { width: 1300px; }

-> <header> 값만 달라서 <main>과 틀어짐

1-2) <main>에도 width: 1300px;을 줬지만 축소시 같이 줄어듦 (당연, 브라우저 비율을 축소해 width 값이 1300px이 넘어가면 공백이 생김)

2) game-container 값을 상대값으로 지정

.game-container {
    width: 100%;
    margin: 0 auto;
}

-> 당장 100% 브라우저 비율에서는 해결 가능, 하지만 100%에서 비율을 확대/축소 시, 요소들을 flex 속성으로 배치했기 때문에 전체적으로 완전히 틀어짐.

👉 여기서 전체 요소들(태그들)의 가장 위쪽에 있는 부모는 결국 <body>임을 상기함

+) <body>에 min-width: 1300px적용 => 해결

-> 최소 크기를 지정하게 되면 짧아서 생기는 공백을 없애줌. flex를 쓰면서 부모 자식 크기 설정을 상대와 절대를 섞어쓸 때는 주의해야 함.

📌 학습소감

강의를 따라하는 시간은 많이 줄어든 데 반해 스스로 해보려다 시간이 지체되는 경우가 늘었다. 하지만 그만큼 배우는게 늘어서 즐겁다. 이제는 오류를 찾아내는 것도 도가 텄다고 할 수 있고, 해당 오류를 이리 저리 시행착오를 겪으며 풀어나가는 과정에서 재미를 느낄 수 있게 되었다. 아직까지 별거 아닐지 모르는 오류일지 모르지만, 해결했을 떄의 쾌감은 나를 더욱 너머로 이끌어 준다. 화이팅! 😆

Author And Source

이 문제에 관하여(210805 개발일지), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@jiyoon_jeong2005/210805-개발일지

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

210805 개발일지