위챗 미니프로그램 가이드 : 구문 WXSS

유튜브 강좌 : youtu.be/_ktOptKv-JE

 

- WXSS

WXSS (WeiXin Style Sheets)는 WXML 구성 요소 스타일을 설명하기위한 매우 유사한 CSS 스타일 언어입니다.

CSS의 기능을 대부분 갖추고 있으며, WeChat적합하도록 CSS를 확장.

WXML 구성 요소를 표시하는 방법을 결정.

 

wxss 사용법

Selector { 
  Property:Value;
  Property:Value;
  ...
}

- Selector 종류 및 사용법

Selector	예시	해석
.class	.my-class	class="my-class"인 모든 components
#id	#my-id	id="my-id"인 모든 components
element	view	모든 "view" components
element, element	button, view	모든 "button"와 "view" components

 

 

Selector : class 사용

<!--pages/wxss/wxss.wxml-->

<view>Selector : .class명 ===============</view>

<button class="button-style1">button</button>

하나의 버튼을 생성하고 버튼의 스타일을 class="button-style1"에 의해 wxss의 .button-style1{}값을 참조하게된다.

 

 

/* pages/wxss/wxss.wxss */

.button-style1{
  margin: 10px;
  background: blue
}

.button-style1의 스타일은 margin에 의해 상하좌우 10픽셀의 공백을 가지고 백그라운드 컬러값은 blue이다.

 

디버그창의 Wxml을 이용해서 확인할수 있다.

 

Selector : id 사용

<!--pages/wxss/wxss.wxml-->

<view>Selector : .class명 ===============</view>

<button class="button-style1">button</button>


<text>\n</text>
<view>Selector : #id명 ===============</view>

<button id="button-style2">button</button>

/* pages/wxss/wxss.wxss */

.button-style1{
  margin: 10px;
  background: blue
}

#button-style2{
  margin-left: 50px;
  margin-right: 50px;
  background: red
}

 

Selector : element사용

<!--pages/wxss/wxss.wxml-->

<view>Selector : .class명 ===============</view>

<button class="button-style1">button</button>


<text>\n</text>
<view>Selector : #id명 ===============</view>

<button id="button-style2">button</button>


<text>\n</text>
<view>Selector : element명 ==============</view>

<text>텍스트 One</text>
<text>텍스트 Two</text>
<text>텍스트 Three</text>

/* pages/wxss/wxss.wxss */

.button-style1{
  margin: 10px;
  background: blue
}

#button-style2{
  margin-left: 50px;
  margin-right: 50px;
  background: red
}
 
text{
  margin-top: 10px;
  margin-left: 10px;
  margin-right: 10px;
  background: #dddddd
}

 

 

 

Selector : element, element 여러개 사용

<!--pages/wxss/wxss.wxml-->

<view>Selector : .class명 ===============</view>

<button class="button-style1">button</button>


<text>\n</text>
<view>Selector : #id명 ===============</view>

<button id="button-style2">button</button>


<text>\n</text>
<view>Selector : element명 ==============</view>

<text>텍스트 One</text>
<text>텍스트 Two</text>
<text>텍스트 Three</text>


<text>\n\n</text>
<view>Selector : element명, element명=====</view>

<checkbox>체크1</checkbox>
<checkbox>체크2</checkbox>
<checkbox>체크3</checkbox>
<text>\n</text>

<radio>라디오1</radio>
<radio>라디오2</radio>
<radio>라디오3</radio>
<text>\n</text>

<switch>스위치1</switch>
<switch>스위치2</switch>
<switch>스위치3</switch>

/* pages/wxss/wxss.wxss */

.button-style1{
  margin: 10px;
  background: blue
}

#button-style2{
  margin-left: 50px;
  margin-right: 50px;
  background: red
}
 
text{
  margin-top: 10px;
  margin-left: 10px;
  margin-right: 10px;
  background: #dddddd
}

checkbox, switch{
  font-size: 10px;
  color: red;
}

 

 

rpx(responsive pixel)(응답픽셀)

화면의 넓이를 750rpx 설정한 후 기기마다 각각 대응합니다. 아래는 예)

	screen width / 750rpx	750rpx / screen width
Phone5 (width : 320px)	1rpx = 0.42px	1px = 2.34rpx
iPhone6/7/8/X/Xs (width : 375px)	1rpx = 0.5px	1px = 2rpx
iPhone6/7/8(+)/Xs Max/Xr (width : 414px)	1rpx = 0.552px	1px = 1.81rpx