학습 한 내용

네이버 게임 왼쪽 영역을 실습 하는 학습을 했다 내용 자체는 이때 까지 배운내용과 비슷하므로 강사님께서도 반복적인 학습을 추천하는 모습이셨다 그러다 보니 반복적인 학습을 통해 많은 것을 배우고 있다

overflow: hidden; 을 적기 전에는 border-radius: 12px이 적용이 되지 않는 것을 볼 수 있다 이유로는 안에 있는 이미지 때문인데 border-radius; 까지 적용된 이 영역을 벗어나는 모든 오브젝트들을 히든처리를 해야 이미지에 태두리가 생긴다. 실제로는 이미지 자체에 태두리가 생기는게 아니라 이미지를 감싸고 있는 부모의 부모의 영역에 overflow:hidden; 을 적용 했기 때문에 border-radius가 적용된 영역을 벗어나는 오브젝트 들은 전부다 감춰 버렸기 때문에 이미지도 육안으로는 적용된 것처럼 보인다 실제로는 이미지 자체에 적용된건 아니다

css를 조금 더 쉽게 작성하기 위하여 초기화 작업 중
이렇게 미리 css에 작성을 했다 나중에 html 도면 작업할 때 필요할 시 class="game-section" 을 추가만 해준다면 백그라운드부터 시작해서 패딩값까지 모두 적용이 되기때문에 container 역할을 한다고 생각하면 된다 이 처럼 하나하나 다 작성하는 것 보다 초기화 작업 때 미리 컨테이너 역할을 정해주고 필요 할때 마다 꺼내먹듯이 사용하면 확실하게 시간도 절약되고 이해하기도 쉽다.

학습 후 소감

css도면 작업이 쉽지 않았지만 이제는 많이 실력도 올랐고 반복적으로 학습하다 보니 상당한 효과가 있다 코로나도 다시 심해지고 있고 날씨도 더워서 어디 가지도 못할 땐 역시 집에 틀어박혀서 공부하는게 가장 현명하다 조금 나가서 놀고도 싶지만 돌아다니기가 무섭다
강사님께서도 대구AI스쿨 관리자분들께서도 코로나 조심하시고 건강하시길 기도하며 월요병 없이 이번 한주 잘 마무리 하셨으면 합니다 모두 사랑합니다