css 반응형 예제

또한 동일한 CSS 스타일시트 내에서 특정 제약 조건이 충족되는 경우에만 활용되도록 다른 스타일을 정의할 수 있습니다. 예를 들어, 현재 장치가 480px 이상의 너비를 가진 경우에만 응답 CSS의이 부분을 사용합니다 :이 자습서의 앞부분에서 우리는 행과 열이있는 웹 페이지를 만들었으며 응답했지만 작은 화면에서는 좋지 않았습니다. 위의 블로그 게시물 예제를 자세히 살펴보겠습니다. 작은 화면에서 1em의 Roboto 글꼴은 줄당 10 단어를 완벽하게 제공하지만 큰 화면은 중단점이 필요합니다. 이 경우 브라우저 너비가 575px보다 크면 이상적인 콘텐츠 너비는 550px입니다. 반응형 웹 페이지는 대형 데스크톱 화면과 소형 휴대폰에서 멋지게 보입니다. 최근까지 웹 사이트 최적화는 다른 웹 브라우저를 기반으로 하는 기능 사용자 지정을 위해 독점적으로 예약된 용어였습니다. 오늘날 우리가 직면하고있는 다른 브라우저 표준과의 피할 수없는 투쟁과 함께,이 용어는 이제 반응형 웹 디자인으로 장치 및 화면 크기에 적응한다고 가정합니다. 최신 웹에서 잘라내기 위해 사이트는 누가 보는지뿐만 아니라 어떻게 하는지 알아야 합니다.

텍스트와 이미지의 크기를 조정하는 것 외에도 반응형 웹 페이지에서 미디어 쿼리를 사용하는 것이 일반적입니다. 추가 값 사용: 아래 예제에서는 쉼표를 사용하여 기존 미디어에 추가 미디어 쿼리를 추가합니다(OR 연산자처럼 작동함): 메타 뷰포트 태그가 있는 모바일 사이트를 개발할 때 실수로 페이지 콘텐츠를 쉽게 만들 수 있습니다. 지정된 뷰포트에 맞지 않습니다. 예를 들어 뷰포트보다 너비가 넓은 이미지로 인해 뷰포트가 가로로 스크롤될 수 있습니다. 사용자가 가로로 스크롤할 필요가 없도록 이 콘텐츠를 뷰포트 너비에 맞게 조정해야 합니다. 이전 예제의 반응형 미디어 쿼리 를 기반으로 사용자 장치의 크기에 따라 특정 정보를 프로그래밍 시 적으로 표시하거나 숨길 수도 있습니다. 다행히도, 이 것 또한 아래 의 튜토리얼에서 설명 한 대로 순수 한 CSS로 수행할 수 있습니다. 반응형 웹 디자인의 마지막, 똑같이 중요한 측면은 유연한 미디어를 포함합니다. 뷰포트가 크기 변경을 시작함에 따라 미디어가 항상 소송을 따르는 것은 아닙니다. 이미지, 비디오 및 기타 미디어 유형은 확장 가능해야 하며 뷰포트 의 크기가 변경됨에 따라 크기를 변경해야 합니다. RWD에 대해 일반적으로 광택이 나는 것은 웹 페이지의 모양을 조정하는 것만이 아니라는 것입니다.

대신, 다른 장치에서 사용 하기 위해 귀하의 사이트를 논리적으로 적응에 초점을 해야 합니다. 예를 들어 마우스를 사용하면 터치 스크린과 동일한 사용자 환경을 제공하지 않습니다. 동의하지 않습니까? 반응형 모바일과 데스크톱 레이아웃은 이러한 차이점을 반영해야 합니다. 또는 스마트폰에서 이 장을 읽는 경우 예제 프로젝트의 버전 전후에 라이브로 이동하여 뷰포트 변경의 효과를 경험할 수 있습니다. 화면 크기에 따라 숨길 콘텐츠를 선택하거나 표시할 때주의해야 합니다. 단순히 화면에 맞지 않는다고 해서 콘텐츠를 숨기지 마세요. 화면 크기는 사용자가 원하는 것을 명확히 나타내는 것은 아닙니다. 예를 들어, 일기 예보에서 꽃가루 수를 제거하는 것은 외부로 나갈 수 있는지 여부를 결정하기 위해 정보가 필요한 봄 철 알레르기 환자에게 심각한 문제가 될 수 있습니다.

Comments

Comments are closed.