📌 학습한 내용
네이버 게임 실습
전체 코드 : 💾
<복잡한 변수명이 생겨나는 이유>
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를 쓰면서 부모 자식 크기 설정을 상대와 절대를 섞어쓸 때는 주의해야 함.
📌 학습소감
강의를 따라하는 시간은 많이 줄어든 데 반해 스스로 해보려다 시간이 지체되는 경우가 늘었다. 하지만 그만큼 배우는게 늘어서 즐겁다. 이제는 오류를 찾아내는 것도 도가 텄다고 할 수 있고, 해당 오류를 이리 저리 시행착오를 겪으며 풀어나가는 과정에서 재미를 느낄 수 있게 되었다. 아직까지 별거 아닐지 모르는 오류일지 모르지만, 해결했을 떄의 쾌감은 나를 더욱 너머로 이끌어 준다. 화이팅! 😆
