대부분의 CSS 개념은 Roblox 스타일링 개념에 매핑됩니다. 다음 예제에서는 CSS와 HTML이 Luau와 Roblox 클래스/속성과 어떻게 일치하는지 보여줍니다.
다음 Luau 스크립트 예제 각각을 테스트하려면:
탐색기에서 다음을 생성합니다:
- 빈 StyleRule 인스턴스를 CoreSheet의 자식으로 사용합니다.
- ScreenGui 컨테이너 in StarterGui 에.
- LocalScript 내부의 ScreenGui 인스턴스.
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아래의 각 예제에서는 지원 라인 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.YmenuContainer.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 descendantrule: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.YmenuContainer.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.YtextLabel.TextXAlignment = Enum.TextXAlignment.LefttextLabel.TextYAlignment = Enum.TextYAlignment.ToptextLabel.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 = 1label.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.XYbutton.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 = coreSheetmenuFrameRule.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 = screenGuimenuFrame.Name = "MenuFrame"-- 프레임 내에 버튼 생성 Create buttons inside framelocal button1 = Instance.new("TextButton")button1.Text = "Charms"button1.Parent = menuFramelocal button2 = Instance.new("TextButton")button2.Text = "Mana"button2.Parent = menuFramelocal button3 = Instance.new("TextButton")button3.Text = "Scrolls"button3.Parent = menuFrame