반응형으로
이전에 만들었던 index.html 페이지를 반응형으로 만들고자 한다.
스마트폰에서 동작하는 것처럼 보이기 위해
최상위 wrapper 박스를 만들어서 최대너비를 줬다.
<div class='wrap'> ... </div>
.wrap { max-width: 500px; margin: auto; }
-
home-bar와 내용 사이즈가 어긋났다.
-
home-bar는
position : fixed이기때문에 엘리먼트간의 부모-자식 관계가 끊긴 상태다. 그래서width : 100%해봤자 부모너비가 되는게 아니라 body의 너비가 계산된다. -
fixed 이지만, 너비는 부모박스의 너비만큼 (심지어 반응형으로) 계산하고 싶다.
.wrap { ... position: relative; }
.home-bar { ... width: 500px; max-width: 100%; }
- 이해는 안가지만, 아래와 같이 설정하면 된다.
- 부모박스를 relative로 설정
- 부모박스의 너비를 max-width로 설정
- fixed된 박스의 크기를 부모박스의 최대너비로 설정
- 그 후
max-width : 100%설정
- 화면이 넓어지든 좁아지든 딱 맞다.
width와 height를 같게 하려면?
-
고정 크기일땐 쉽다
width : ★px; height : ★px; -
근데 이게 반응형으로 하려면 애매해진다.
width : 40%; height : 40%;를 해보면 각각 다르게 설정되는걸 볼 수 있다. 너비와 높이의 기준이 되는 길이가 다르기 때문이다. -
해결방법으로는
width : 40%; height : 0%; padding-bottom : 40%;로 하면 된다. -
단, 이렇게하면 이 엘리먼트 안의 요소들이 패딩으로 인해 배치가 틀어진다. position으로 새롭게 레이아웃을 짜던가 다른방법으로 해결해야 한다.
기존의 페이지를 반응형으로 바꾸기 위해서는
- 길이 px크기를 %로 바꾸기
바꾸는 공식 : ( 현재 px크기 / 부모 요소 가로너비 px크기 ) x 100% - min/max 접두사 이용하기
- 폰트 크기를 rem으로 바꾸기
바꾸는 공식 : ( 현재 px크기 / 16px ) rem
fixed 아이템 위치를 특정 아이템을 기준으로 하려면?
- fixed아이템은 위치 기준을 뷰포트의 초기 컨테이닝 블록을 기준으로 삼아 배치한다. 하지만 이럴경우 내가 원하는
-
저 빨간 동그라미 위치 (오른쪽, 밑 기준으로 20px씩 고정된 자리) 에 놓는 방법이 없다. 단순 픽셀계산해서 할 순 있지만 화면 크기가 변경되는순간 어긋나버린다.
-
해결방법을 고민하던 중에 mdn문서를 보니 아래와 같은 글귀를 발견하였다.
단, 요소의 조상 중 하나가 transform, perspective, filter 속성 중 어느 하나라도 none이 아니라면 (CSS Transforms 명세 참조) 뷰포트 대신 그 조상을 컨테이닝 블록으로 삼습니다.
-
부모 컨테이너가 transform 속성을 가지면 그 박스를 기준으로 변경할 수 있다고 한다.
-
그래서 home-bar 요소 안에 edit요소 (편집 동그라미 요소)를 넣고 home-bar에 아무효과가 없는
transform : scale(1)을 설정하니
해결이 되었다.
