학습 한 내용

정말 많이보는 웹페이지인 트위치를 도면작업해보는 실습 시간이다
트위치 자체는 애니메이션 효과도 많고 페이지자체가 좀 어려워 보였는데다가 해외 사이트다 보니 html 코드가 더 어려울 거라 생각했다 강사님께서도 말씀하시다 시피 해외사이트라 신규 코드를 많이 사용했다고 하셨다 코드자체가 어려운 코드들이 많기에 강사님께서도 눈대중으로 임의의 코드나 수치 등 사용한게 많이 보였다

수치같은 경우 rem으로 표기되있는 부분이 상당히 많았다 그러기에 강사님께서도 눈대중으로 살펴보기보단 pxtoem.com 사이트에 들어가면 em을 px로 변환할 수 있다 물론 rem 하고 em 하고 별로 차이가 안난다고 하셨기에 그대로 사용했다 그래도 해외사이트가 워낙 html코드를 숨겨놨기에 어려운 부분들이 많았다

혼자서 했다면 많이 헷갈렸을 것이다 일단 header부분이 스크롤을 내려도 상단에 고정되어 있어야 하므로 position으로 fixed를 사용한다 fixed를 적용시키다 보니 레이아웃이 전부 틀어지고 만다 그래서 사용하는게 width:100%; 랑 같이 사용해줘야 레이아웃이 안틀어지고 잡히게 된다
강사님께서 설명을 해주시면서 실습하다보니 충분히 이해했다고 생각할 수도 있겠지만 설명해주시기 전에 먼저 fixed를 적용시켰는데 레이아웃이 틀어지는 걸 보고 어떻게 대처해야할지 몰랐었다. 그러기에 이번을 계기로 절대 잊으면 안되겠다 width: 100%;가 짝꿍처럼 따라온다는 것을..