CSS 메쉬 및 CSS 변수를 사용하여 응용 프로그램을 빠르게 원형화하는 방법

CSS 그리드와 CSS 변수는 모두 프런트엔드 개발자의 큰 승리입니다.전자는 웹 사이트를 만드는 구조를 매우 간단하게 만들었고 후자는 스타일시트에 변수의 힘을 가져왔다.
이 강좌에서, 응용 프로그램 디자인의 원형을 신속하게 만들 수 있도록 결합하는 방법을 보여 드리겠습니다.
우리가 사용할 예는 React를 사용하여 채팅 프로그램을 구축하는 방법에서 나온다.js 및 Chatkit API:
강좌에 들어가려면 이미지를 클릭합니다.
따라서 읽지 않고 인터랙티브 스크린 방송을 더 좋아한다면, 코드에 접근할 수도 있고, 그러면 스스로 실험을 할 수도 있다.본 강좌를 배우는 과정에서 당신은 마음대로 이렇게 할 수 있습니다.

메쉬 컨테이너 설정

저희 응용 프로그램은 CSS 격자를 사용하여 레이아웃을 합니다. 이것은 모듈로 레이아웃을 쉽게 구축하고 레이아웃에서 마음대로 이동할 수 있습니다.만약 grid-template-areas 속성을 이용한다면, 이것은 특히 유용합니다. 우리는 그것을 어떻게 더 사용하는지 보여 드리겠습니다.
우리 최초의 채팅 프로그램이 어떤 모습인지 먼저 봅시다.

만약 우리가 Chrome에서 개발 도구를 열면, 우리는 밑바닥 격자가 어떻게 구축되었는지 검사할 수 있을 것이다.보시다시피 6행 6열이 있습니다.

이러한 메쉬를 만드는 코드는 다음과 같습니다.

.app {  
  display:                grid;  
  grid-template-columns:  1fr 1fr 1fr 1fr 1fr 1fr;  
  grid-template-rows:     1fr 1fr 1fr 1fr 1fr 60px;  
}

우선, 우리는 용기를 격자로 설정한다.그리고 우리는 6열이 필요하다고 말했다. 각 열은 하나의 분수 단위(1fr)가 넓어야 한다.분수 단위는 사용 가능한 공간의 일부분을 나타냅니다.여기서 우리는 너비를 6개의 등폭의 점수로 나누어 열마다 점수를 하나 준다.
줄에 관해서 우리는 모든 줄을 같은 높이로 나누지 않았다. 왜냐하면 마지막 줄은 다른 줄이 없기 때문이다.우리는 60px이 아니라 1fr이 높아야 한다고 명확하게 말했다.

grid-template-rows: 1fr 1fr 1fr 1fr 1fr 60px;

현재 우리는 이미 격자 구조를 계획했고 우리는 다음 부분인 포지셔닝을 계속할 수 있다.

격자 항목 찾기

격자 용기의 모든 직접 하위 항목은 격자 항목이다.우리는 네 개의 항목이 있는데, 각 항목은 다음 그림의 직사각형으로 포장된다.

항목을 위에 배치하기 위해서는 grid-template-areas 속성을 사용하고 스타일시트에 격자 시각적 표시를 구축해야 합니다.

.app {  
  display:                grid;  
  grid-template-columns:  1fr 1fr 1fr 1fr 1fr 1fr;  
  grid-template-rows:     1fr 1fr 1fr 1fr 1fr 60px;  
  grid-template-areas:  
    "r m m m m m"  
    "r m m m m m"  
    "r m m m m m"  
    "r m m m m m"  
    "r m m m m m"  
    "n s s s s s";
}

문자열마다 줄을 표시하고, 문자열마다 격자에 있는 칸을 표시합니다.문자는 그들이 표시하는 격자 항목 (방 목록, 메시지 목록, 새 방 목록, 메시지 보내기 폼) 과 의미 관계를 가진다.
현재 grid-template-areas에 따라 항목을 포지셔닝하기 위해서는 grid-area의 값으로 문자를 사용해야 합니다.이렇게

.new-room-form {  
  grid-area: n;  
}

.rooms-list {  
  grid-area: r;  
}

.message-list {  
  grid-area: m;  
}

.send-message-form {  
  grid-area: s;  
}

These classes have of course also been applied to our grid items in our HTML. However, I won’t go into detail about that, as I’m assuming that you know how to add classes to HTML tags.

이것만 있으면 우리는 포석을 시험하기 시작할 수 있다.grid-template-areas 값의 몇 글자만 교환하면 레이아웃에서 완전히 뒤집을 수 있습니다.

위의gif에서, 나는 방 목록 항목과 새 방 목록 항목의 위치를 바꾸어 네 가지 다른 레이아웃을 시도했다.내가 유일하게 변경하고자 하는 것은 grid-template-areas 속성이다.
다음은 네 가지 변체다.적절한 레이아웃에 매핑할 수 있는지 확인하십시오.

grid-template-areas:  
    "n m m m m m"  
    "r m m m m m"  
    "r m m m m m"  
    "r m m m m m"  
    "r m m m m m"  
    "r s s s s s";

grid-template-areas:  
    "r m m m m m"  
    "r m m m m m"  
    "r m m m m m"  
    "r m m m m m"  
    "r m m m m m"  
    "n s s s s s";

grid-template-areas:  
    "m m m m m r"  
    "m m m m m r"  
    "m m m m m r"  
    "m m m m m r"  
    "m m m m m r"  
    "s s s s s n";

grid-template-areas:  
    "m m m m m n"  
    "m m m m m r"  
    "m m m m m r"  
    "m m m m m r"  
    "m m m m m r"  
    "s s s s s r";

만약 네가 이렇게 한다면, 너는 너 자신의 코드 사본을 얻을 수 있을 것이다. 그러면 너는 완전히 네가 좋아하는 방식에 따라 레이아웃을 바꿀 수 있을 것이다.

CSS 변수를 사용하여 색상 변경

이제 CSS 변수를 사용하여 응용 프로그램의 색상을 변경합니다.이전에 CSS 변수에 접촉하지 않았다면 CSS 변수의 핵심을 요약했기 때문에 다음 그림을 빨리 보십시오.


위의 그림에서 보듯이 이것은 코드를 더욱 쉽게 읽을 수 있게 한다. 왜냐하면 변수 이름이 16진법 값보다 더 의미가 있기 때문이다.그 다음으로 색상을 변경하지 않도록 더 큰 유연성을 제공합니다.
변수 선언부터 시작하여 CSS 변수를 사용하여 응용 프로그램을 설계하는 방법을 살펴보겠습니다.

:root {  
  --main-color:            #5ea3d0;  
  --secondary-color:       white;  
  --main-text-color:       #3e5869;  
  --secondary-text-color:  #b0c7d6;  
  --new-room-form:         #d9e1e8;  
  --send-message-form:     #F5F5F5;  
}

이 변수들은 전체 스타일시트에서 17번 반복적으로 사용되었다.단, 우리는 이 모든 곳을 훑어볼 필요가 없고, --main-color이 어떻게 메시지와 왼쪽 사이드바에서 배경색으로 사용되는지 볼 필요가 있다_

다음은 코드의 결과입니다.

.rooms-list {  
  background: var(--main-color);}

.message-text {  
  background: var(--main-color);  
}

변수의 미묘한 점은 우리가 지금 성명을 변경할 수 있다는 것이다. 그리고 변경은 전체 응용 프로그램에 영향을 줄 것이다.예를 들어, 다음을 수행합니다.

:root {  
  --main-color: red;  
}

... 결과는 다음과 같습니다.

현재 우리가 할 수 있는 것은 :root의 모든 변수 성명을 바꾸어 응용 프로그램의 전체 외관을 바꾸는 것뿐이다.
예를 들어 인터넷에서 좋은 팔레트를 찾아서 응용 프로그램에서 간단하게 사용합니다.
:root의 색상을 위 팔레트의 색상으로 대체합니다.

:root {  
  --main-color: #5ea3d0;  
  --secondary-color: white;  
  --main-text-color: #3e5869;  
  --secondary-text-color: #b0c7d6;  
  --new-room-form: #d9e1e8;  
  --send-message-form: #F5F5F5;  
}

이것은 완전히 다른 채팅 방식을 만들어 낼 수 있다.

메쉬 및 변수 조합

만약 우리가 이것을 CSS 격자를 사용하여 레이아웃을 변경하는 것과 결합한다면, 우리는 거의 서로 비슷하지 않은 두 개의 독특한 채팅 응용 프로그램을 얻을 수 있을 것이다.이렇게 합시다.


다음은 우리의 시작점과 마지막 예시의 비교이다.

:root {  
  --main-color:           #ff66ff;  
  --secondary-color:      #fbd8fb; 
  --main-text-color:      #3e5869;  
  --secondary-text-color: #d8b2ff;  
  --new-room-form:        #ffb2ff;  
  --send-message-form:    #d8b2ff; 
}

.app {  
  display: grid;  
  grid-template-columns: repeat(6, 1fr);  
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr 60px;  
  grid-template-areas:  
    "m m m m r r"  
    "m m m m r r"  
    "m m m m r r"  
    "m m m m r r"  
    "m m m m n n"  
    "f f f f f f"; 
}

멋있죠?
지금 나는 네가 그것을 받아들일 것을 건의한다. 나는 너에게 React를 사용하여 이 프로그램을 만드는 것을 지도할 것이다.js와 the Chatkit API.물론, 나는 너와 완전한 코드를 공유할 것이다. 이렇게 하면 너는 스스로 이 설계를 실험할 수 있다.
읽어주셔서 감사합니다!저는 Per라고 합니다. 공동 창시자입니다. 저는 사람들이 새로운 기술을 배우는 것을 돕는 것을 좋아합니다.새 기사와 자원에 대한 통지를 받고 싶으시면 저에게 연락 주세요.