반응형 디자인

프로그래밍 공부 일기

2020년 5월 28일 Progate Lv.61

반응형 디자인

화면 폭을 맞추어 레이아웃이 유연하게 전환된다. 반응형 디자인이 적용되지 않으면 화면 폭을 좁히면 콘텐츠가 맞지 않을 수 있습니다.
응답형 디자인을 적용하기 위해서는 <head> 태그내에 viewport를 설정한다. 또, responsive.css의 로딩에서는 stylesheet.css에 미디어 쿼리용의 CSS를 기술해도 문제 없지만, 정리하기 쉽도록 CSS를 분할해 responsive.css에 미디어 쿼리용의 CSS를 기술한다. ※responsive.css의 로딩은 반드시 viewport의 설정보다 나중에 기술한다

<head>
  <meta name="viewport" content="width=device-width,initial-scale=1.0"> //viewportの設定
  <link rel="stylesheet" href="responsive.css"> //responsive.cssの読み込み
</head>

미디어 쿼리

플라우자의 화면 사이즈에 따라 CSS의 스타일을 설정할 수 있는 수단. @media(条件){...} 의 형태로 기술한다. 이 조건에 해당하는 경우에만 CSS가 적용됩니다. 조건에는 최대 폭(max-width)과 최소 폭(min-width)을 지정할 수 있다. 조건을 지정할 때의 값의 부분을 브레이크 포인트라고 한다.

@media(max-width:1000px){
  /*1000px以下の時に適用したいCSSを記述する*/
}

레이아웃의 붕괴를 고치다

요소(하늘색의 사각형)가 width:25%로 지정되어 있는 곳에서, 좌우의 padding을 더하면 요소폭의 요소의 합계가 100%를 넘어 버려, 레이아웃이 무너져 버린다. 그래서, 오른쪽과 같이 하기 위해서는 box-sizing:border-box 를 사용하면 요소의 폭의 합계에 padding과 border가 포함되게 된다. 그러나 margin은 box-sizing의 합계 값에 포함되지 않습니다.
또한 지정할 때 * (별표)에서 모든 요소에 CSS를 적용하는 것이 좋습니다.
　

float와 부모 요소의 관계

일반적으로 부모 요소의 높이는 자식 요소를 감싸는 높이입니다. 그러나 자식 요소가 float 일 때 부모 요소의 높이는 0입니다. (float(떠 있는)는 부모 요소에서 보면 float의 자식 요소는 존재하지 않는 것처럼 보이기 때문에)
→ float:left 는 clear:left 로 떠 있는 상태를 해제할 수 있다.
　　☆ float:left; 를 적용하기 위해서만 빈 태그를 준비한다. <div class="clear"></div> 를 넣는다.

요소 표시/숨기기

요소 숨기기 : display:none;요소 표시 : display:block;

Reference

이 문제에 관하여(반응형 디자인), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/mzmz__02/items/ba36d3a70d90eaaa0b6b

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다