FACEBOOK 함께 만들며 배우는 웹개발 스터디 - 4주 집중반
Search…
파이썬 장고
사전 준비
1주차 - 웹의 화가가 되어보자
2주차 - 웹, 장고와 친해지기
STEP UP 1 - 장고로 깨닫는 Python, Python으로 깨닫는 장고
3주차 - 살아있는 뉴스피드 만들기
Pre - 실습 코드 복사
Stage 1 - 함께하는 페이스북 디자인
Level Up 1 - 스크롤 개선
Stage 2 - 게시글 모델링
Challegne 1 - 모델링 연습
Stage 3 - 관리자 모드 사용해보기
Stage 4 - 살아있는 뉴스피드
Challenge 2 - 게시글 자세히보기 페이지
자율과제 1 - 모델 수정 & 관리자
자율과제 2 - 페이스북 페이지 리스트
추천자료
4주차 - 유저 참여 뉴스피드
STEP UP 2 - 타임라인에 댓글을 달고 배포하기
나아가기
코딩좀알려주라!
Powered By
GitBook
Level Up 1 - 스크롤 개선
스크롤 개선
스크롤바 문제
브라우저, 스마트폰의
세로 길이가 짧거나
위 사진처럼 혹은
내용물이 길어지면
하단탭에 가려지는 부분이 생기는데, 스크롤바를 움직여도 보이지가 않습니다. 또한 계속 고정되어 있어야할 상단탭이 함께 움직이는 문제가 발생합니다.
이 내용은 스터디중에는 실습하지 않습니다. 그러나 완성도를 높이고자 하는
바른 욕심
을 가진 멤버들이 있기에 이 내용을 추가하였습니다.
하단탭 겹침 문제
결론적으로 말하면 피드가 표시되는 가운데 내용물의 높이를 하단탭 만큼 더 길게 만들어 주셔야 한다는 것 입니다. 여백을 넣던지 세로길이를 늘리던지 하여 하단탭만큼 남는 여유공간을 만들어준다면 쉽게 해결됩니다.
.container
에
padding-bottom
만 추가해주세요.
newsfeed.html
.container {
background-color: #d7d8dc;
padding-bottom: 50px;
}
해결된 모습
상단바 이동 문제
페이스북을 보면 검색창이 있는 최상단바는 그자리에 고정되어 있습니다. 이와 달리 저희 상단바는 스크롤에 따라 함께 움직입니다.
이는
position:fixed
방식으로 해결할 수 있습니다.
스타일시트에서 아래 클래스 부분을 찾아 수정해주세요.
.container
에
padding-top
이 추가된 건,
position:fixed
를 하는 순간 공주에 뜨게 되어 겹치는 부분이 발생하기 때문에 인위적으 여백을 넣어주기 위함입니다.
newsfeed.html
.header {
background-color: #475d9f;
color: #fff;
height: 42px;
border-bottom: 1px solid #2c3863;
position: fixed;
top: 0;
left: 0;
right: 0;
}
/* 중략 */
.container {
background-color: #d7d8dc;
padding-bottom: 50px;
padding-top: 42px;
}