본문 바로가기
728x90
반응형

VW2

VW단위를 사용해 보았습니다. CSS VW단위를 사용해 보았습니다. (youtube.com)줄이면서 같이 줄어드는거= 일반 rem 보다 쓸만하다. 이미지 같은건 % 넣으면 줄어들지만텍스트는 그렇지 않음. 텍스트까지 같이 줄어들게 하려면 vw 로 제작하기. rem 으로 작업하기.  vw 로 제작하면이미지도 커지고 텍스트도 커짐.  vw 공식: 현재 해상도 ( 기준 해상도 ) 1920 을 기준으로 작업을 할 것. ( 그때 그때 달라짐 ) 100vw 는 사용자 기기의 가로크기 만큼.with 의 100%와 같은 의미이렇게 계산. 나누기 1920 도 해야함.  반응형할 때미디어쿼리 자체가 필요 없게 된다. vw 를 사용하게 되면그래서 주석처리함.단점: 특정 구간에서 너무 작아보이고,특정 구간에서 너무 커보인다. 그래서 그 때는 따로 미디어 쿼.. 2024. 6. 15.
border-radius 화면 축소 시 변형이 올 때 화면 축소 전 화면 축소 후 radius 값이 더 커져 보임 . .slide-box img { width: 90%; height: auto; border-radius: 15px; display: block; margin: auto; } 이렇게 줬던 코드를 .slide-box img { width: 90%; height: auto; border-radius: 2vw; /* 뷰포트 너비에 따라 둥근 모서리 크기 조정 */ display: block; margin: auto; } /*모서리의 둥글기가 상대적으로 일정하게 유지*/ 2vw 를 사용함으로써 화면을 축소해도 동일한 둥글기를 유지하게끔 만듦. User /* @media screen and (max-width: 1200px) { .box { font-s.. 2024. 3. 19.
728x90
반응형