[응답 디자인] 쓰기

응답 설계 구현 방법

css의 미디어 조회를 이용합니다.

미디어 쿼리는?

CSS 기능은 표시 사이트의 화면 환경을 판단하여 기준을 지정할 수 있습니다.

설치 코드 예

HTML 파일

헤드 탭에 다음 메타 탭을 추가합니다.

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

※ emmet을 이용하면자동 삽입.

CSS 파일

@media screen and (min-width:768px){
  body {
    background-color:red;
  }
}

@media screen이란 무엇입니까?

미디어 유형.
all,print,screen,speech가 있습니다.
스마트폰과 pc를 위한 사이트라면 스크린이기 때문에 기본적으로 스크린을 지정하면 된다.
스마트폰, PC만 생각하고 화면 이외의 선택이 없다면 화면의 부분을 생략할 수 있다.

@media (min-width:768px){
  body {
    background-color:red;
  }
}

(min-width:768px)는 무엇입니까?

조건은 768px 이상으로 지정됩니다.

미디어 조회 이외의 응답 기술

% 1 지정

요소의 너비와 높이는 부모 요소의 기준이 됩니다.
모든 요소의 너비% 를 지정하면 화면 크기의 width가 부모 요소가 되어 부드러운 페이지를 만들 수 있습니다.
예를 들어 화면을 가득 채우고 싶을 때width:100%가 빈번하게 나타난다.

rem 지정

상대적으로 글꼴 크기를 결정하는 기법.
r은 루트라는 뜻으로 루트의 글꼴을 기준으로 값을 결정한다.
따라서rem을 사용할 때 "탭에 font-size를 지정해야 합니다.

.html {
  font-size:16px;
}

이때 1rem는 16px, 1.5rem는 16px+8px는 24px이다.

rem의 사용 방법

/* モバイルファースト */
.html {
  font-size: 16px;
}

/* タブレット */
@media (min-width: 768px) {
  font-size: 20px;
}

이렇게 화면마다 경로를 변경하는 font-size는'}'의 하위 요소에서rem를 이용하여 문자 사이즈가 변경되었다.

.pc_only류의 사용법

.pc_온리반.sp_온리 같은 종류를 부여해서 표시와 숨기기를 합니다.
※ sp는 스마트폰을 가리킨다

@media (min-width: 768px) {
  .sp_only{
    display: none;
  }
}

flex

picture 태그

em 속성