[클라우딩 어플리케이션 엔지니어링 TIL] 15. 반응형

1.학습 주제

• 반응형/적응형?
• 반응형 페이지 만들기
• 주의사항

2.주요 메모 사항 소개

반응형/적응형?

• 반응형: 하나의 웹사이트가 화면 크기에 맞게 사이트를 변화하여 보여주는 기법
• 적응형: 접속하는 기기에 따라 다른 웹사이트를 보여주는 기법

반응형 페이지 만들기

• 메타 태그를 이용하여 반응형페이지를 만들기 위한 기초를 만든다.

<meta name="viewport" content="width=device-width, initital-scale=1.0">

• 조건에 따른 이미지: <picture>를 사용하여 크기에 따라 이미지를 변경한다.

<picture>
	<source media="(max-width: 500px)" srcset="http://via.placeholder.com/200x200/">
    <img src="https://via.placeholder.com/1000x1000" alt="이미지 텍스트"/>
</picture>

 

• 조건에 따른 CSS: @media를 사용하여 크기에 따른 이미지를 변경한다.

<style>
	div{
    	font-size:10px;
    }
    
    @media screen and (max-width: 500px){
    	div{
        	font-size: 200px;
        }
    }
    
    /*
    @ media screen and (조건) and (조건) and (조건){}
    and를 사용해 조건을 여러개 붙일 수 있다.
    */

</style>

• 조건에 따른 CSS 호출: 조건을 다르게 CSS를 호출하는 방법도 있다.

<link ref="stylesheets" href="style.css"/> 
<link ref="stylesheets" href="change.css" media="screen and (max-width=500px)"/>
<!--조건이 화면에 최대 가로폭이 500px일 경우 불러옴-->

주의사항

• 레이아웃의 고정 크기의 사용 지양(width,height 보다 max(min)-width(height) 사용)
• 인라인 스타일은 반응형을 처리할 수 없다.

3. 공부하며 느낀 점

반응형에 대해 배웠다. booststrap을 통해서 사용해보기는 했는데 자세히 배워보는 것은 처음이라 재미있었다.

4.출처