반응형 웹 - 반응형의 단위, 가변이미지와 가변동영상

pair89 2024. 4. 2. 10:54

2024. 4. 2. 10:54

반응형 요소의 가변성

em - 부모 폰트 사이즈에 자식요소 폰트가 결정
rem - root 폰트 사이즈에 폰트가 결정(주로 root는 16px)

vw - 100vw 뷰포트의 전체 너비
vh - 100vh 뷰포트의 전체 높이

vmin - 너비와 높이 중 더 작은 값을 적용
vmax - 너비와 높이 중 더 큰 값을 적용

ex1) 너비 100px, 높이 500px = 1vmin = 1px / 1vmax = 5px

ex2) 요소 50vw x 50vw - viewport가 1000px x 300px 이라면 요소 크기가 500px x 500px 로 잘려 보이게 됨

그 때 방법으로 요소를 50vmin x 50vmin 로 하게 되면 (1vmin은 3px) 요소 크기가 150px x 150px이 되어

화면에 요소 전체가 잘 보이게 된다.

가변그리드(레이아웃)

% 단위는 백분율 값으로 부모 요소와의 상대적 크기로 자식 요소가 정해집니다.
너비와 여백은 부모 요소의 너비에 비례해 계산됩니다.
글자 크기는 부모 요소의 글자 크기에 비례해 계산됩니다.
특이한 점으로 부분 너비에 따라 패딩 또한 %에 영향을 받음

ex)

<style>

    .container{width:90%; marign: 0 auto;}

    .main{float : left;  width:70%; padding: 10%; marign: 0 auto; }

    .aside{float : right;  width:30%; padding: 10%;  marign: 0 auto;}

</style>

<body>

    <div class="container">

         <div class="main">main</div>

         <div class="aside">aside</div>

    </div

</body>

calc(칼크)

padding과 width % 의 복잡한 사용 방법 대신 간편하게 사이즈를 조절하는 방법입니다.

ex)

div{ width: calc(100% - 90px);}

가변이미지

ex 1) max-width 로 기본 이미지 사이즈보다 더 커져서 깨지지 않도록 해야한다

<style>

    img{width:100%;  max-width: 640px;}

</style>

<body>

    <img src="img1.png">

</ body >

ex 2) div 의 크기에 따른 이미지 사이즈 지정하는 방법도 있다.

<style>

div{ width:50%;}
img{ max-width: 640px;}

</style>

<body>

    <img src="img1.png">
    
</body>

ex 3) picture 태그를 이용해서 viewport 사이즈에 따른 이미지 변경이 가능하다.

<body>

    <picture>

        <source src set="img3.png" media="(min-width:1280px)">

        <source src set="img2.png" media="(min-width:768px)">

        <img src="img1.png">

    <picture>

</ body >

ex 4)

슬라이드배너 형태(이미지와 그림이 한 배너로 제작된 경우)에는

이미지와 그림이 분리가 되면서 가변이미지 효과를 얻기가 어렵다.(종횡비의 문제점)

그때 아래 방법으로 해결이 되었다.

img 태그에 object-fit:cover; width:100%; height:100%;

ex 5) 미디어쿼리 @media

<style>

    @media (max-width: 767px){

        .pc{display:none}

    }

    @media (min-width: 1280px){

        .mo{display:none}

    }

</style>

<body>

    <img class="pc" src="img1.png">

    <img class="mo" src="img2.png">   

</ body >

가변동영상

종횡비를 css의 padding-top으로 준다. 그러면 여백에 따른 공백부분이 padding 으로 해결 된다

ex) 315 / 560 = 0.5625

<style>

    .video{padding-top: 56.25%;  position: relative; }

</style>

<body class="video">

    <iframe width="560' height="315" src="https://www.youtube.com/-----">

    }

</ body >

저작자표시 비영리 변경금지

'프로그램 > vscode' 카테고리의 다른 글

[자바스크립트] DOM (Document Object Model) (0)	2024.04.05
[JavaScript] 자바스크립트 슬라이드 이미지 만들기 (0)	2024.04.04
float로 범람하게 된 요소에 대해 작업하는 방법 (0)	2024.02.02
오늘 하루 보지 않기 배너 html js (0)	2024.01.03
스파르타 크리스마스 캘린더 만든 후기 (0)	2023.12.15

ayko