1. 학습내용

실습내용

github 소스링크

학습 및 상기 내용

중앙부분

메인컨테이너에 포지션 relative를 주고 content에 top과 left에 값을 넣어주면 위쪽과 오른쪽으로 기준이 이동된다

스크롤을 위에영역을 제외하고 내부영역만 스크롤이 발생하도록 하기

내부를 기준으로 overflow - y auto를 넣어주면 y축기준으로만 필요한상황에 스크롤발생시킴

.content {
	overflow-y: auto;
	position: absolute;
	top: 50px;
	left: 240px;
  	
  	bottom: 0;
  	right: 0;
}

min-width 적용 x 문제

메인컨테이너에 minwidth를 적용했는데 내부컨텐츠가 자꾸 줄어들음

left도 3차원 content도 3차원이기 때문에 자식들의 width값을 부모가 정확하게 인식하지못하기 때문

이렇게 하면 메인컨테이너의 크기가 브라우저를 기준으로 잡히게됨 브라우저의 현재높이

position: relative;
width: 100%;
height: 100%;

이미지 크기가 너무 클때

이미지를 넣으면 크기때문에 잘려서 나온다

이때 background-size:cover을 사용하면 이미지를 우리가 만들어 놓은 공간에 다 채울수 있도록 자동으로 이미지를 축소하거나 확대시켜준다

이미지의 가로, 세로 비율은 유지가됨

background 속성을 한줄로 정리할때는 순서 바꾸어서 작성해도 상관없음

다른 사이트를 참고하면 처음화면은 이미지 안에 물품들이 잘려있는데 브라우저를 축소시키면서 background-size:cover에 의해서 이미지가 비율은 유지된 상태로 축소되면서 물품들이 잘리지 않고 보임

특정공간을 가득채우는 배경이미지를 사용할 경우 background-size:cover를 사용함

주의점

background position에 속성값으로 center를 맞춰주게되면 이미지의 중심부를 이 공간에다가 딱 박아두게됨

센터를 빼면 위치가 엄한대로가게됨

작업물

2. 어려운점

3. 해결방법

4. 소감