학습 한 내용

트위치 콘텐츠 영역을 도면작업하는 실습을 했다
콘텐츠 영역의 공간을 대충 만들어 봤는데 left-area 부분과 nav 부분때문에 레이아웃이 겹치는 생겨놨다 그래서 콘텐츠 영역을 position: absolute를 사용했고 left-area 부분이 240px의 공간을 차지하고 있기 때문에 left:240px을 사용했고 nav부분엔 50px을 차지했기에 top:50px을 사용했다
그럼에도 불구하고 여전히 스크롤 자체가 브라우저 전체를 기준으로 스크롤이 발생하기에
content 내부에다가 overflow-y: auto; 를 넣어줘서 y축 기준으로만 필요한 상황에서 스크롤을 발생 시키겠다는 의미를 부여한다. 그러므로 스크롤 자체가 콘텐츠 내부에서만 발생한다

content-banner 부분의 공간을 만들어주고 background: url('')을 사용해서 이미지를 넣어줬는데 이미지 자체가 banner에 공간보다 훨씬 크기때문에 부분만 보이게 된다. 그때 사용하는 속성이 background-size: cover; 이다 결과를 보니 확실히 그럴싸 하게 이미지가 들어가 있었다
단 background-size: cover; 를 사용할때 주의할 점은 보통 일반적으로 이미지를 제작할때 센터에 중요 콘텐츠들이 다 눌리게끔 제작을 한다. 왜냐 브라우저에 자연스로운 움직임을 줄때 중요 콘텐츠가 사용자한테 잘 노출되게끔 제작을 하기에 주의해야한다. 그래서 background: url('') no-repaet center; 센터 부분을 꼭 사용하고 자주 사용하기에 꼭 기억해야 하는 부분이다. 물론 url보다 no-repaet center; 이부분을 먼저 작성해도 상관은 없다

학습 후 내용

정말 비가 지긋지긋 하게 내리고 습하고 추울땐 춥고 날씨가 지 멋대로지만 언제나 한결같으신 김인권 강사님의 목소리덕에 항상 힐링하며 수업을 듣고 있습니다.
트위치 페이지를 작업을 하다보니 새로운 내용들도 많아지고 어려운 내용들도 있지만 항상 쉽게 설명해주시는 덕에 너무나 잘 강의를 듣고 있습니다 사랑합니다 대구AI스쿨 관리자님들 , 김인권 강사님!! I LOVE YOU..♥