반응형 Windows 로그인 페이지 UI 자습서— 2부

* 원본은 Medium에 게시되었습니다.

누가 파트 2를 준비합니까?

이 자습서의 2부에서는 SCSS 변수, 믹스인 및 미디어 쿼리를 사용하여 Windows 로그인 페이지를 반응형으로 만들 것입니다. 혼란스러운? 걱정하지 마세요. 당신은 이것을 가지고 있습니다! 언제나 그렇듯이 이 튜토리얼은 초보자에게 친숙합니다. 즐기다! :)

아직 확인하지 않았다면 이 튜토리얼을 확인하여 로그인 페이지의 구조화, 스타일 지정 및 애니메이션 방법을 알아보세요.

SCSS 변수(화면 크기용)

//Variables
$mobile-width: 340px;
$tablet-width: 500px;

SCSS의 아름다움은 그 기능이며 그 기능 중 하나는 변수입니다.

그렇다면 SCSS 변수는 무엇입니까? 기본적으로 스타일시트 전체에서 재사용할 수 있는 정보를 저장하는 방법입니다. 무언가를 변수로 만들려면 '$' 다음에 변수 이름과 해당 변수에 저장하려는 정보를 사용합니다.

로그인 페이지를 반응형으로 만드는 프로세스를 시작하려면 두 개의 SCSS 변수인 $mobile-width 및 $tablet-width를 사용하여 로그인 페이지가 반응하도록 하려는 장치의 너비를 저장하는 것으로 시작합니다. 여기에서는 모바일 너비 변수를 340픽셀로, 태블릿 너비 변수를 500픽셀로 설정했습니다.

미디어 쿼리(mixin 사용)

//Mixin - Media queries
@mixin mobile {
   @media (min-width: #{$mobile-width}) and (max-width: #{$tablet-width - 1px}) {
     @content;
  }
}

다음 단계는 미디어 쿼리입니다. 이전에 선언한 변수를 믹스인과 함께 사용하여 미디어 쿼리를 더 쉽게 작업하고 코드의 가독성을 향상시킬 것입니다.

내부에 미디어 쿼리가 중첩된 믹스인부터 시작하겠습니다. 앞에서 선언한 변수를 사용하여 미디어 쿼리 내에서 화면 크기를 정의합니다. @content를 사용하면 콘텐츠 블록을 믹스인에 전달할 수 있습니다.

번역하기 위해 모바일 너비(340픽셀)와 태블릿 너비(500픽셀) 사이에 이 CSS 규칙 블록이 적용되어야 한다는 미디어 쿼리가 포함된 모바일이라는 믹스인이 있습니다.

다음을 사용하여 혼합 적용

@include mobile {
  #login-page-container {
    font-size: 12px !important;
  }
  #login-page-inner {
    width: 300px !important;
  }
  #user-image-container {
    width: 110px !important;
    height: 110px !important;
  }
  .fa-user-o {    
    line-height: 110px !important; 
  }
  #password {
    width: 200px !important;
  }
}

마지막으로 해야 할 일은 화면 크기가 $mobile-width와 $tablet-width 사이인 기기에 적용되는 미디어 쿼리가 포함된 모바일 믹스인을 적용하는 것입니다. 우리는 이것을 사용하여
그 안에 적용하려는 CSS 규칙을 전달합니다. 우리의 목표는 화면 크기가 이전에 모바일 믹스인에서 선언한 크기 사이일 때 로그인 페이지 구성 요소를 더 작게 만드는 것입니다.

모바일 믹스에서 선언한 화면 크기와 다른 화면 크기의 경우 이전에 스타일시트에 입력한 CSS 선언이 적용됩니다.

스타일시트의 이 섹션에서 만든 CSS 선언 뒤에 !important라는 용어가 표시됩니다. '!important'라는 용어는 스타일시트에 설정된 이전에 할당된 CSS 선언을 재정의하는 데 사용되는 규칙입니다.

#login-page-container의 기본 글꼴 크기를 16픽셀에서 12픽셀로 변경하는 것으로 시작합니다.

#login-page-inner의 너비는 300픽셀로 설정하고 #user-image-container의 경우 너비와 높이를 110픽셀로 설정합니다. 사용자 아이콘 .fa-user-o의 라인 높이를 110픽셀로 설정하여 새로 크기가 조정된 #user-image-container 내에서 세로로 중앙에 오도록 합니다. 마지막으로 #password에 너비 200픽셀을 지정합니다.



그리고 그게 다야! 위의 GIF에서 로그인 페이지가 다양한 화면 크기에 어떻게 반응하는지 확인할 수 있습니다.

쉽게 액세스할 수 있도록 두 부분으로 구성된 이 튜토리얼에서 펜을 모아 Codepen의 컬렉션에 넣었습니다. 여기에서 확인할 수 있습니다.

이 튜토리얼의 2부를 즐겼기를 바랍니다. 다음 시간까지! ✌️