반응형 웹 만들기 - layout과 비율유지하면서 줄어들게 하기

반응형 웹 만들 때 중요 concept

1) 보이는 큼직한 layout 잡기 (div태그로 박스 잡기)

2) 큼직한 박스 안에 있는 요소들의 width는 대부분 calc()나 퍼센트나 auto로 처리

3) window 줄어들 때 이 이상 줄어들지 마라 하는 최소 넓이, 높이 지정해주기! (min-width 속성)

    window 늘어날 때 이 이상 늘어나지 마라 하는 최대 넓이, 높이 지정해주기! (max-width 속성)

4) display: flex 이용

5) 비율유지하면서 줄어들게 할 때는 padding-bottom 값 이용!

 

1. layout 잡을 때 flex 이용하기

div태그를 정렬할 때 아주 유용한 flexbox!

https://heropy.blog/2018/11/24/css-flexible-box/ 

CSS Flex(Flexible Box) 완벽 가이드

1) 정렬할 box (div태그들) 를 감쌀 태그가 있어야함

1)-1. container인 태그에 다음과 같이 css 입력

.container{

     display : flex;

 

}

 

1)-2. 자주 쓰이는 속성 - container

- item들 중앙정렬, container가 줄어들면 item이 밑으로 하나씩 내려가게 하기

.container{

     display : flex;

     justify-content: center;

     align-items:center;

     flow-wrap: wrap;

}

 

- item들 일정한 간격 띄워서 정렬

.container{

     display : flex;

     justify-content: space-between;

}

 

1)-2. 자주 쓰이는 속성 - items (width만 입력해주면됨)

- container의 50%만 차지하게하고 왼쪽 오른쪽 각각 12px씩 띄우기

.item1{

    width:calc(50% - 24px);

}

 

 

2. 비율 유지하면서 줄어들게 하기 

참고사이트 : 각 박스 그림당 div태그 3개 있음

https://www.behance.net/

최고의 Behance

concept

1) 비율줄이게 할 box감싸는 제일 바깥 container 태그 1개 (wrap1)

   : 크기 정해주는 태그

2) 비율줄이게 할 box 그 다음으로 감싸는 2번째 container 태그 1개 (wrap2) 

   : padding-bottom 적용할 태그 , position relative 적용

3) 비율줄이게 할 box 태그 (content)

   : 나타내고 싶은 컨텐츠 넣는 태그 , position absolute적용

 

#html

#css

border 속성은 필요없음 눈으로 보려고 해놓은것뿐 ㅎㅎ

- wrap2 에서 padding- bottom 비율은 (세로/가로 *100 %) 입니당!