학습 한 내용

오늘은 트위치 왼쪽 영역을 도면작업하는 실습을 했다 웬만해서는 position을 많이 사용하다 보니 더 복잡해 보일 수 있지만 기본만 잘 생각한다면 충분히 해낼 수 있는 작업이다

left-area에 position을 absolute를 사용한 결과를 보니 레이아웃이 틀어져 있다 그 이유는 area위에 nav태그가 있는데 nav태그엔 2차원 포지션을 사용했고 area에는 3차원을 사용하니 당연히 레이아웃이 틀어지게 된다 그래서 nav와 area 사이에 container를 넣어주고 padding-top:50px을 사용하여 겹치지 않고 띄어 주게 만들어 주었다. 강사님께서는 임의로 해놓고 나중에 바꾼다고 말씀하셨다

padding-top을 없에니 레이아웃이 겹쳐지게 되었고 항상 어떤영역을 브라우저 사이즈에 상관없이 풀 사이즈를 유지시키고 싶다면 top:50px 사용하여 상단영역의 크기만큼 내려주고 bottom: 0을 사용하여 강제적으로 공간을 늘려주었다 이 현상은 순수 3차원적인 특징을 가지고 있는 포지션에만 사용가능 하다 그리고 left:0을 사용하고 추가적으로 브라우저를 올렸을때 왼쪽 영역부분에서만 스크롤이 생성되야 하므로 overflow-y: auto; 를 사용한다 이로써 스크롤이 필요한 상황에서만 스크롤이 생기는데 스크롤이 생김으로써 레이아웃이 틀어지기 때문에 txt-wrap에 width값을 스크롤을 생길걸 감안해서 110으로 조정을 했다.
이로써 레이아웃이 변하지 않고 스크롤이 필요할때 스크롤이 생기는것이 확인이 가능했다.