CSS 비교

*이 콘텐츠는 AI(베타)를 사용해 번역되었으며, 오류가 있을 수 있습니다. 이 페이지를 영어로 보려면 여기를 클릭하세요.

대부분의 CSS 개념은 Roblox 스타일링 개념에 매핑됩니다. 다음 예제에서는 CSS와 HTML이 Luau와 Roblox 클래스/속성과 어떻게 일치하는지 보여줍니다.

다음 Luau 스크립트 예제 각각을 테스트하려면:

  1. 탐색기에서 다음을 생성합니다:

    1. StyleSheet 이름이 CoreSheet 안에 있는 인스턴스 ReplicatedStorage 내에서.
    2. StyleRule 인스턴스를 CoreSheet의 자식으로 사용합니다.
    3. ScreenGui 컨테이너 in StarterGui 에.
    4. LocalScript 내부의 ScreenGui 인스턴스.
    5. StyleLink 개체 내부의 ScreenGui 속성이 StyleSheet 에 연결되어 있는 객체의 CoreSheet .
  2. In the LocalScript , 다음 지원 코드를 붙여넣으세요:

    로컬 스크립트

    local CollectionService = game:GetService("CollectionService")
    local ReplicatedStorage = game:GetService("ReplicatedStorage")
    local coreSheet = ReplicatedStorage:FindFirstChild("CoreSheet")
    local rule = coreSheet:FindFirstChildWhichIsA("StyleRule")
    local screenGui = script.Parent
  3. 아래의 각 예제에서는 지원 라인 1–6에 따라 Luau 코드 줄을 붙여넣습니다.

선택자

Selector 속성은 규칙이 적용되어야 하는 인스턴스를 지정합니다.The property of a StyleRule specifies which instances the rule should affect.다음 선택자 유형은 CSS에서 Luau로 매핑하고 조합자와 함께 사용할 수 있습니다.

요소

CSS 요소 선택자와 동일한 것은 Roblox의 클래스 선택자 로, 예를 들어 GuiObject , Frame , ImageLabel , TextButton 등 특정 클래스의 모든 인스턴스를 선택합니다.

CSS

button {
background-color: #335FFF;
color: #E1E1E1;
width: 15%;
height: 40px;
border: none;
}
HTML

<button>Main Menu</button>

루아우

-- 클래스 선택기
rule.Selector = "TextButton"
-- 규칙 속성 설정
rule:SetProperties({
["BackgroundColor3"] = Color3.fromHex("335FFF"),
["TextColor3"] = Color3.fromHex("E1E1E1"),
["Size"] = UDim2.new(0.15, 0, 0, 40),
["BorderSizePixel"] = 0
})
local button = Instance.new("TextButton")
button.Text = "Main Menu"
button.Parent = screenGui

클래스

CSS에 해당하는 Roblox 선택자는 태그 선택자로, 태그를 통해 적용된 태그 를 사용합니다. 이는 태그 를 통해 적용됩니다.

CSS

.button-primary {
background-color: #335FFF;
color: #E1E1E1;
}
HTML

<button class="button-primary">Main Menu</button>

루아우

-- 태그 선택기
rule.Selector = ".ButtonPrimary"
-- 규칙 속성 설정
rule:SetProperties({
["BackgroundColor3"] = Color3.fromHex("335FFF"),
["TextColor3"] = Color3.fromHex("E1E1E1"),
["AutomaticSize"] = Enum.AutomaticSize.XY
})
local button = Instance.new("TextButton")
button.Text = "Main Menu"
button.Parent = screenGui
-- 버튼에 태그 적용
CollectionService:AddTag(button, "ButtonPrimary")

식별자

CSS와 가장 가까운 Roblox 비교는 값 에 따라 선택하는 선택기입니다.id 특성의 W3C 사양과는 달리, 이름은 유일하지 않을 것으로 예상됩니다.

CSS

#modal-frame {
background-color: #000022;
opacity: 0.5;
width: 50%;
min-height: 100px;
}
HTML

<div id="modal-frame"></div>

루아우

-- 인스턴스 이름 선택기
rule.Selector = "#ModalFrame"
-- 규칙 속성 설정
rule:SetProperties({
["BackgroundColor3"] = Color3.fromHex("000022"),
["BackgroundTransparency"] = 0.5,
["Size"] = UDim2.new(0.5, 0, 0, 100),
["AutomaticSize"] = Enum.AutomaticSize.Y
})
local frame = Instance.new("Frame")
frame.Parent = screenGui
-- 프레임 이름 변경으로 선택자와 일치
frame.Name = "ModalFrame"

결합자

결합기는 더 깊은 계층 관계에 맞게 기본 선택자를 혼합할 수 있게 해줍니다.

자식

>의 자식 선택자는 CSS와 Roblox 사이에서 동일합니다.

CSS

.menu-container {
width: 25%;
}
.menu-container > button {
background-color: #335FFF;
color: #E1E1E1;
width: 80%;
height: 40px;
border: none;
}
HTML

<div class="menu-container">
<button>Options</button>
</div>

루아우

-- 자식 선택기
rule.Selector = ".MenuContainer > TextButton"
-- 자식에 대한 규칙 속성 설정
rule:SetProperties({
["BackgroundColor3"] = Color3.fromHex("335FFF"),
["TextColor3"] = Color3.fromHex("E1E1E1"),
["Size"] = UDim2.new(0.8, 0, 0, 40),
["BorderSizePixel"] = 0
})
-- 메뉴 컨테이너 생성
local menuContainer = Instance.new("Frame")
menuContainer.Size = UDim2.new(0.25, 0, 0, 0)
menuContainer.AutomaticSize = Enum.AutomaticSize.Y
menuContainer.Parent = screenGui
-- 태그 적용
CollectionService:AddTag(menuContainer, "MenuContainer")
-- 생성 버튼
local button = Instance.new("TextButton")
button.Text = "Options"
-- 메뉴 컨테이너를 버튼의 부모로 설정
button.Parent = menuContainer

후손

예를 들어 CSS 백분위 구문과는 달리, 여기에서 보여준 것처럼 .menu-container button Roblox는 하위 관계를 나타내기 위해 >> 결합자를 사용합니다.

CSS

.menu-container {
width: 25%;
}
.sub-container {
width: 75%;
}
.menu-container button {
background-color: #335FFF;
color: #E1E1E1;
width: 80%;
height: 40px;
border: none;
}
HTML

<div class="menu-container">
<div class="sub-container">
<button>Options</button>
</div>
</div>

루아우

-- 하위 선택기
rule.Selector = ".MenuContainer >> TextButton"
-- 하위 규칙 속성 설정 for descendant
rule:SetProperties({
["BackgroundColor3"] = Color3.fromHex("335FFF"),
["TextColor3"] = Color3.fromHex("E1E1E1"),
["Size"] = UDim2.new(0.8, 0, 0, 40),
["BorderSizePixel"] = 0
})
-- 메뉴 컨테이너 생성
local menuContainer = Instance.new("Frame")
menuContainer.Size = UDim2.new(0.25, 0, 0, 0)
menuContainer.AutomaticSize = Enum.AutomaticSize.Y
menuContainer.Parent = screenGui
-- 태그 적용
CollectionService:AddTag(menuContainer, "MenuContainer")
-- 하위 컨테이너 생성
local subContainer = Instance.new("Frame")
subContainer.Size = UDim2.new(0.75, 0, 0, 0)
subContainer.AutomaticSize = Enum.AutomaticSize.Y
-- 메뉴 컨테이너를 하위 컨테이너의 부모로 설정
subContainer.Parent = menuContainer
-- 생성 버튼
local button = Instance.new("TextButton")
button.Text = "Options"
-- 버튼의 부모로 하위 컨테이너 설정
button.Parent = subContainer

선택자 목록

조합자가 있는 선택자 여러 개(속성 블록으로 구분)를 동일한 속성 블록으로 선언하여 중복을 줄일 수 있습니다(쉼표로 구분).

CSS

img, p {
background-color: #FF0033;
}
HTML

<img src="gear.png" width="100" height="100">
<p>Main Menu</p>

루아우

-- 이미지 레이블과 텍스트 레이블의 선택기
rule.Selector = "ImageLabel, TextLabel"
-- 클래스에 공통 속성 설정
rule:SetProperty("BackgroundColor3", Color3.fromHex("ff0033"))
-- 이미지 레이블 만들기
local imageLabel = Instance.new("ImageLabel")
imageLabel.Image = "rbxassetid://104919049969988"
imageLabel.Size = UDim2.new(0, 100, 0, 100)
imageLabel.Parent = screenGui
-- 텍스트 레이블 만들기
local textLabel = Instance.new("TextLabel")
textLabel.Size = UDim2.new(1, 0, 0, 0)
textLabel.AutomaticSize = Enum.AutomaticSize.Y
textLabel.TextXAlignment = Enum.TextXAlignment.Left
textLabel.TextYAlignment = Enum.TextYAlignment.Top
textLabel.Text = "Main Menu"
textLabel.Parent = screenGui

가상 클래스

CSS와 동일한 Roblox의 pseudo-class 선택자는 상태 선택자로, 4개의 값 중 하나인 또는 같은 값에 해당합니다.

CSS

img:hover {
opacity: 0.5;
}
HTML

<img src="gear.png" width="100" height="100">

루아우

-- 상태 선택기
rule.Selector = "ImageLabel:Hover"
-- 규칙 속성 설정
rule:SetProperty("ImageTransparency", 0.5)
-- 이미지 레이블 만들기
local label = Instance.new("ImageLabel")
label.Image = "rbxassetid://104919049969988"
label.Size = UDim2.new(0, 100, 0, 100)
label.BackgroundTransparency = 1
label.Parent = screenGui

가상 인스턴스

CSS의 가짜 요소 가 요소의 특정 부분을 수정할 수 있는 방식과 마찬가지로 Roblox는 스타일 규칙의 속성을 통해 유령을 생성할 수 있습니다.예를 들어, 다음 규칙은 효과적으로 모디파이어를 모든 태그에 적용하여 각 모디파이어의 픽셀을 설정합니다.

루아우

-- UI 구성 요소 선택기
rule.Selector = "Frame.RoundedCorner20::UICorner"
-- 규칙 속성 설정
rule:SetProperty("CornerRadius", UDim.new(0, 20))
-- 프레임 생성
local frame = Instance.new("Frame")
frame.Size = UDim2.new(0.4, 0, 0.2, 0)
frame.Parent = screenGui
-- 태그를 프레임에 적용
CollectionService:AddTag(frame, "RoundedCorner20")

변수

CSS를 사용하면 스타일 시스템 전체에서 변수를 선언하고 참조할 수 있습니다.Roblox는 토큰과 인스턴스 특성 시스템을 통해 이를 달성합니다.$를 접두사로 사용하여 스타일 속성을 설정할 때 StyleRule 또는 StyleSheet 상속 체인에서 선언된 특성을 참조할 수 있습니다.

CSS

:root {
--button-bg-color: #335FFF;
--button-text-color: #E1E1E1;
}
button {
background-color: var(--button-bg-color);
color: var(--button-text-color);
}
HTML

<button>Main Menu</button>

루아우

-- 특성을 사용하여 스타일 시트 토큰 설정
coreSheet:SetAttribute("ButtonBgColor", Color3.fromHex("335FFF"))
coreSheet:SetAttribute("ButtonTextColor", Color3.fromHex("E1E1E1"))
-- 클래스 선택기
rule.Selector = "TextButton"
-- 규칙 속성 설정
rule:SetProperties({
["BackgroundColor3"] = "$ButtonBgColor",
["TextColor3"] = "$ButtonTextColor"
})
-- 생성 버튼
local button = Instance.new("TextButton")
button.AutomaticSize = Enum.AutomaticSize.XY
button.Text = "Main Menu"
button.Parent = screenGui

둥지 및 병합

SCSS 에서 개념을 빌려와서, 는 함께 중첩될 수 있으며 선택자는 병합됩니다.

SCSS

#menu-frame {
background-color: #000022;
width: 25%;
min-height: 200px;
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
> button {
background-color: #335FFF;
color: #E1E1E1;
width: 80%;
height: 40px;
border: none;
&:hover {
opacity: 0.5;
}
}
}
HTML

<div id="menu-frame">
<button>Charms</button>
<button>Mana</button>
<button>Scrolls</button>
</div>

루아우

-- 메뉴 프레임 규칙
local menuFrameRule = Instance.new("StyleRule")
menuFrameRule.Parent = coreSheet
menuFrameRule.Selector = "#MenuFrame"
menuFrameRule:SetProperties({
["BackgroundColor3"] = Color3.fromHex("000022"),
["Size"] = UDim2.new(0.25, 0, 0, 200),
["AutomaticSize"] = Enum.AutomaticSize.Y
})
-- 메뉴 배치 규칙
local menuLayoutRule = Instance.new("StyleRule")
menuLayoutRule.Parent = menuFrameRule -- 메뉴 프레임 규칙을 부모로 설정
menuLayoutRule.Selector = "::UIListLayout"
menuLayoutRule:SetProperties({
["FillDirection"] = Enum.FillDirection.Vertical,
["VerticalFlex"] = Enum.UIFlexAlignment.SpaceEvenly,
["HorizontalAlignment"] = Enum.HorizontalAlignment.Center
})
-- 버튼 규칙
local buttonRule = Instance.new("StyleRule")
buttonRule.Parent = menuFrameRule -- 메뉴 프레임 규칙을 부모로 설정
buttonRule.Selector = "> TextButton"
buttonRule:SetProperties({
["BackgroundColor3"] = Color3.fromHex("335FFF"),
["TextColor3"] = Color3.fromHex("E1E1E1"),
["Size"] = UDim2.new(0.8, 0, 0, 40),
["BorderSizePixel"] = 0
})
-- 버튼 호버 규칙
local buttonHoverRule = Instance.new("StyleRule")
buttonHoverRule.Parent = buttonRule -- 버튼 규칙을 부모로 설정
buttonHoverRule.Selector = ":hover"
buttonHoverRule:SetProperty("BackgroundTransparency", 0.5)
-- 부모 프레임 생성
local menuFrame = Instance.new("Frame")
menuFrame.Parent = screenGui
menuFrame.Name = "MenuFrame"
-- 프레임 내에 버튼 생성 Create buttons inside frame
local button1 = Instance.new("TextButton")
button1.Text = "Charms"
button1.Parent = menuFrame
local button2 = Instance.new("TextButton")
button2.Text = "Mana"
button2.Parent = menuFrame
local button3 = Instance.new("TextButton")
button3.Text = "Scrolls"
button3.Parent = menuFrame