✔ TODAY
미루어있던 진도를 트위치 진도를 한꺼번에 해결한다.
✔ 학습한 내용
스크롤 바와 내용이 겹치지 않거나 영역에 영향이 없도록
https://gromo.github.io/jquery.scrollbar/demo/basic.html
스크롤이 생기는 범위를 볼 필요가 있다.
상단의 네비는 제외하고 메인 내부에만 적용이 된다.
즉,브라우저 자체에 상기게 하지 않게 함.
화면의 풀로 차지 하지 않는다 . 네비 제외하고 생성 이걸 고려해서 작성할 계획
.content
영역이 left-main이랑 top-nav이랑 겹치게 된다.
3차원공간을 이용해서 공간을 가변적으로 사용할수 있는 것을 이용
div{position: absolute;
top:0; bottom:0; left:0; right:0;
backgroung-color: yellow; }
브라우저의 크기와 가변적으로 이용가능
top:50 넣으면 위의 50부터 공간이 시작된다.
left:240 넣으면 왼쪽 240px 비우고 이후 공간으로 사용
.content {
position: absolute;
background-color: yellow;
top: 50px;
bottom: 0;
left: 240px;
right: 0;
}전체의 기준으로 스크룰 생김을 방지 >overflow-y: auto;
해당영역에 필요한 경우레 스크롤을 만들겠다는 듯
컨테츠 내부에 컨테츠를 만듬
다른 영역의 스크롤과 독립적인 것.
+overflow-x: auto; 는 x축 기준이라고 보면됨
무료이미지 사이트 픽사베이 언스프레쉬
+background : 속성하나로 다양한 속성을 정리할 수 가 있다.
.content #content-banner {
width: 100%;
height: 350px;
background-color: blue;
background: url('../img/desk.jpg') no-repeat center;
}이미지가 크면 짤려서 나옴
background-size: cover; 공간에 다 채울 수 있도록 css 자동 늘리고 축소하는 속성 . 보통 비율을 유지한다.
살짝 짤려 있는데 브라우저를 변동하면 원본비율이 유지하기 위해서 살짝 나오면서 자연스러운 효과를 나타게 된다.
특정 공간을 가득체우는 큰 이미지를 사용할 때 많이 사용. - 센터가 주요 정보가 몰리게끔하마.
박그래운드 포지션= 썬터
-이미지의 중짐을 박아준다. 설정을 하면 이미지가 엉뚱한 곳에 갈 확률이 간다. 가운데에 주요정보가 모이게 한다 이질강이 덜하게 한다.
배경이미지 삽입방법
background: url('../img/desk.jpg') no-repeat center;
background-size: cover;
순서를 바꿔서 적용을 해도 동일하게 적용
공부하기
백그라운드안의 다양한 속성들을 공부하자!!!
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .5);
top: 0;
left: 0;
}
.content #content-banner .layer {
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .5);
top: 0;
left: 0;
}이미지 위에 레이어 깔기
main-contain에 공간크기를 설정해도 안의 내용물의 크기가 변동
안의 모든 영역이 3차원이라 자신들의 높이를 부모가 정확게 인식을 하고 있지 못하는 상황
그래서 계속 줄어 들수 가 있음
main-contain 에 포지셔 렐레 티브를 감싼다.
.main-container {
position: relative;
width: 100%;
height: 100%;
min-width: 1340px;
/padding: 50px;/
}
공간 크기가 브라우저의 크기로 잡히게 된다.
계속 줄이게 되어도 더이상 내용물이 줄어들지 않는다.
여기서 paddingtop 삭제
상단네비부분과 컨텐츠 부분을 동시에 스크롤이 되돍?
상단네비부분은 어렇게 해서든 x축 스크롤이 생기지 않난다. 최소 넓이 값을 없애도
body {
background-color: #0e0e10;
overflow-x:hidden;
}함으로 해결
X축 Y축 스크롤바 고정
지구별 안내서
###.content-container
✔ 학습한 내용 중 어려웠던 점 또는 해결못한 것들
✔ 해결방법작성
✔ 학습소감
