국비지원 27일차

#어제 배운 것 중에 다시 되짚고 가고 싶은 게 있다.

* 팝업창 이미지 시간설정 (label태그 누르면(checked) 다른 사진 서서히 들어오게끔 하는 css)

- img가 적용된 박스에 transition: 0s linear 0.5s ( 0.5초 딜레이만 적용 시 checked 시 다음 사진이 0.5s 초 시간을 가지고 서서히 들어온다고 하면 현재 img는 딜레이 0.5s 초 로인해 제자리에서 대기하다가 다음사진이 해당 칸에 다 적용되고 나서 옆으로 빠질 것이다 ->물론 눈에는 보이지 않을 것이다 )

- 그리고 label태그 checked 시 css를 0.5s linear 0s (이렇게 딜레이만 0초로 만들고 0.5s 속도로 적용된다 그리고 들어가는 박스가 위로 보이면서 지나가게끔 z-index:9를 적용해 준다.-> checked 시 적용되는 그림이 현재 있는 그림보다 위에 위치하여 보이면서 적용될 것이다.

 

* 화면 커질 때 img 가 가로크기에 맞춰서 세로로 커지는 방법.

- 부모박스에 :width: 100% , height :39vw ( 이거 구하는 방식은 해당 이미지 크기에서 가로(긴 거) 나누기 세로(짧은 거 ) 해주면 소수점으로 값이 나올 것이고 이 값에다가 100을 곱하면 %로 갑이 나올 것이다 이걸 height에 vw (화면 가로대비 넓어짐)로 적용해 주면 된다.-> 그리고 max-height (해당박스의 최대 높잇값 지정해 주는 거)를 적용해주고 싶으면 해당박스에 height 값이 적용돼 있어야 된다 , 어제 아같은 padding-bottom 이런 거로 높이값을 구할 시에는 max-height는 적용 안된다.

 

* background로 이미지 적용할 때 화면 작아질 시  해당 이미지박스 도 같이 작아지게 하는 방법

- 보통 img태그로 img 적용 시 부모 박스에다가 비율 정해주면 알아서 화면 줄어들 시 같이 줄어드는데 

 background는 해당박스에다 직접 img 크기를 정하기 때문에 img처럼 못한다 그래서 여기서 해주는데 aspect-ratio을 (1:1) 비율로 height 대신에 써주면 화면이 잡아질 때마다 해당 img박스도 같이 줄어들 것이다.

 

※박스의 비율을 지정해 줄 수 있는 속성에 대해서 알아보겠다.

 

1. Overview

이미지, box 비율이 4:3, 16:9등 다양한 비율로 디자인이 오는 경우가 많다.

width: 100px, height:80px 등 단순 지정을 해줘서 하는 경우가 많지만, 모바일의 경우 디바이스에 마다 너비값이 다른 경우가 존재한다. 이런 경우 % 단위나 padding을 이용하여 꼼수(?)를 이용하여 이미지 높이를 지정해 주는데 aspect-ratio는 이러한 문제를 쉽게 해결해 주는 css 속성이다.
이에 대해 자세히 알아보자.

 

2.widht/height를 이용

div에 단순히 width/height 값을 지정하여 box, img의 비율을 지정하는 방법이다.

 

3. calc()을 이용

padding-top을 이용하는 방식으로 calc() 값을 이용하여 비율대로 지정을 할 수 있다.
이 경우 calc()의 기준이 되는 값은 부모 요소의 width값이 된다.

 

padding을 사용하여 비율 조정

padding-top 또는 padding-bottom을 이용하는 방법

padding의 기준을 부모의 width로 가지기 위해서 부모의 container 엘리먼트 요소가 필요그 외에는 50%의 비율을 유지하기 위해 padding 값을 50%로 설정

 

4. Aspect Ratio

요소의 크기를 일관되게 조정하는 속성으로 요소의 비율이 커지거나 줄어들 때 동일하게 유지할 수 있는 속성입니다.

aspect-ratio는 2021년 초에 지원을 시작하였으며, 초안은 CSS Box Sizing Module Level 4에서 자세한 내용은 확인할 수 습니다.
현재 aspect-ratio는 반응형을 기반으로 한 많은 웹 페이지에서 사용을 하고 있는 속성입니다.

과거에는 css에서 비율로 영역을 조절하게 할 수 있는 css 프로퍼티가 존재하지 않았다. 그래서 있는 속성으로 편법으로 하여 스크린 비율을 지정하여 사용하였다.

그렇지만 이제 css에서 최신 기능으로 드디어 aspect-ratio라는 종횡비 전용 속성을 지원하게 되었다.

aspect ratio 속성은 이미지나 동영상을 비율대로 줄이거나 늘리는 데 사용된다. 매우 직관적이라 다루기도 편하다.

다만 우리의 주적 IE 브라우저에는 지원이 안되기 때문에, 과거에서 사용되었던 간접적으로 비율을 구현하는 방법과 더불어, aspect ratio 속성 사용법을 소개할 예정이다.

 

 

이렇게 aspect-ratio를 사용하여 height 대신에 사용할 수 있다.

 

-aspect-ratio 적용 예외 상황

너비, 높이값이 지정될 경우 종횡비가 적용되지 않는다.
마찬가지로 min-width, min-height 요소값이 적용된 경우 동작하지 않는다.
내용이 요소를 넘는 경우 요소는 확장되는데 이 경우에는 종횡비가 적용되지 않는다.