HTML \ CSS \ JavaScript/CSS (2) 썸네일형 리스트형 [CSS] 화면 정중앙에 요소 배치(반응형) 팀프로젝트를 진행하면서 화면단의 통일성을 위해 한 사람이 웹 디자인-퍼블리싱을 맡기로 했다. 그리고 그게 나다. 오늘부터 프로젝트 진행 중 막혔던 부분과 해결한 방법을 위주로 포스팅을 하려고 한다. 로그인 화면 - 화면 정중앙에 요소 배치하기 사진과 같이 중앙에 로그인 폼을 위치시키고 싶었다. [CSS] footer 하단에 고정하기 컨텐츠가 짧은 경우 푸터가 위로 올라와버리는 문제 발생. Header 컨텐츠 내용 푸터입니다 footer{ position: fixed; bottom: 0px; } fixed로 고정. 이 경우 푸터를 언제나 화면 하단에 고정할 수 있으나 만약 컨텐츠의 높이가 화면 사이즈를 넘는 경우 푸터가 컨텐츠를 가려 버리는 문제 발생 이를 해결하기 위해 html, body {height:100%} html과 body에 높이를 100%를 줘서 화면 전체 높이를 가지게 하고 Header 컨텐츠 내용 Footer 헤더태그와 컨텐츠 태그를 div 태그로 감싼 뒤 (이 글에서는 wrapper 클래스) .wrapper{ height:auto; min-height: 100%; padding-bottom: 193px; // 현재 .. 이전 1 다음
