학습 한 내용

e스포츠 게임 페이지를 마무리 하는 도면작업을 했다
e스포츠 영역이 가장 재미있고 눈이 즐거웠지만 벌써 마무리가 되었다
다른 웹페이지 실습보다 눈이 즐거웠고 새로운 내용들도 있다보니 할만했다
이번 실습도 다른 내용은 많이 없고 반복적인 내용들이지만 새롭게 배운 내용들도 있다 그래서 더 재미가 있던거 같다

border-bottom-right-radius: 4px; 인데 물론 border-radius 는 수없이 사용 했었다 거기서 범위만 설정을 해주는 것인데 bottom -> right 순으로 가기에 아래에서 오른쪽 부분만 radius:4 px을 적용 시키는 것이다.
이렇게 적용을 시키면
이런 식으로 오른쪽 아래부분에만 radius가 적용 되는것을 볼 수 가있다
물론 이정도는 당연히 응용할수 있고 생각할 수 있지만 그래도 한번더 확신을 가지자는 생각으로 개발일지에 적게 되었다

이 부분도 마찬가지로 오랜만에 나오는 hover이지만 hover라는 것 자체가 마우스를 가져다 댔을때의 속성을 적는 것이기에 cursor: pointer; 와 백그라운드 컬러를 사용하면 마우스를 가져다 댔을 시 마우스 커서가 pointer로 바뀌게 되고 배경 색깔은 yellow 로 바뀌게 된다.

학습 한 내용 (오디오)

이제는 수 없이 해왔었던 내용들을 복습하는 내용이 였다.
기본적으로 새로운 페이지를 작업 할 때엔 초기화작업을 먼저 한다 css 디자인 작업을 할때 자동으로 나온다

이렇듯 바로바로 container 부터 시작해서 flex~ 부분까지 전부 초기화 작업을 먼저 시작하다 보니 당연히 디자인 작업에선 상당한 속도로 도면작업이 가능하다
container 자체가 보물창고로 생각하고 필요할때 마다 보물창고에서 꺼내 쓸 수 있기 때문에 당연히 편하고 속도도 올라가는 이유이다

최근에 했던 내용이다 시피 상단부분이 무조건적으로 고정이 되어 있어야 하므로
position은 당연히 fixed이고 z-index도 99999; 로 바로 지정해주는 것을 볼수있고 머릿속에 바로 드는 생각이기도 하다
강사님께서도 깜빡 했듯이 width:100%; 는 꼭 잊지말고 적어주자 저거 하나로 위에 초기화작업 했던 것들이 문제인가 싶기도 하면서 지웠다 쓸 수 있기때문에 한번에 할때 조신하고 신중하게 작업을 해야겠다

홈 이라는 글자를 클릭했을 때 밑에 border값이 나와야 하는데 나오지 않는다

여기서 보면 left ,right, bottom 값을 지정해줬는데 포지션 값으로 3차원을 이용 하여 left: -4.5px; ,right: -5.5px;, bottom: -17px; 의 속성값을 적을 시엔 지정했던 공간에서 더 공간을 늘릴 수 있다
즉 position의 3차원 특징을 사용했을 땐 왼쪽 오른쪽 위 아래 로 공간을 늘릴 수가 있다 이 내용은 처음 듣기도 하고 처음 배우기도 해서 나름 쉽기도하고 자주 이용 하고 싶었지만 강사님께서는 잘 사용하시지 않으시고 참고만 하라고 하셔서 그렇게 하기로 했다.