VLANlab
카탈로그
소개
VLANlab
Frontend
11 tools
CSS Unit ConverterColor ToolkitGradient GeneratorcURL BuilderURL ParserURL Encoder/DecoderHTTP Status CodesBox Shadow GenFavicon GeneratorFlex & Gridrobots.txt Tester
VLANlab

계산 • 조회 • 확인

What Is My IP?IPv6 TestSpeed Test
DNS LookupDNS PropagationDNS Health CheckerSPF AnalyzerPTR LookupCAA RecordSRV RecordDNS TraceDNS PrivacyDANE / TLSADNSSEC CheckerSPF BuilderDKIM GeneratorZone DiffPTR Zone Generator
Subnet CalculatorCIDR Range ViewerVLSM CalculatorVLAN PlannerBandwidth CalcIPv6 Subnet CalcIP ↔ BinarySupernet CalcCIDR MergeCIDR to IP RangeCIDR SplitIPv4 → IPv6CIDR OverlapFree IP Space FinderDHCP CalculatorMTU Calculator
WHOIS LookupDomain Age CheckerSubdomain FinderIP GeolocationASN / BGP LookupIP Blacklist CheckReverse IP LookupMAC Address LookupBGP Prefix LookupRPKI / ROA CheckDomain Availability
Email InspectorDKIM CheckerEmail HeadersSMTP TestSMTP TLS CheckMX Health CheckEmail SecurityDMARC Generator
Temp Mail곧
Is It Down?SSL/TLS CheckerOpen Port CheckerOG Tag CheckerOCSP CheckerPing / LatencyHTTP InspectorRedirect ChainCSP AnalyzerTech Stack Checker베타Traceroute베타HTTP/2 + HTTP/3robots.txt ViewerSSL Cert DecoderBanner GrabberWebSocket TesterCORS TesterDomain MonitoringHTTP TimingStructured DataPWA ManifestSEO Auditor
One-Time SecretHash GeneratorPassword StrengthSecurity.txtCT Log SearchAXFR Zone Test
HTTP Sec Score곧
WebRTC Leak TestIP Reputation
JSON FormatterYAML FormatterBase64 / URL EncodeJWT DecoderRegex TesterUnix TimestampCron BuilderUUID / ULIDPunycode / IDNBase ConverterACL Generator
CSS Unit ConverterColor ToolkitGradient GeneratorcURL BuilderURL ParserURL Encoder/DecoderHTTP Status CodesBox Shadow GenFavicon GeneratorFlex & Gridrobots.txt Tester
Text CompareCase ConverterText CleanerText AnalyzerText TransformerList ToolsLorem GeneratorSlug Generator
Cloud VPC PlannerCloud IP RangeSecurity GroupsIAM AnalyzerK8s CIDR PlannerFirewall BuilderHCL FormatterEgress Cost CalcCloud DNS Zone
VM Cost Estimator곧
Proxmox Net ConfigVMware Port GroupHyper-V vSwitchVXLAN VNI PlannerKVM Net ConfigXCP-ng NetworkNSX-T Segment
Disposable Email DetectorPhone InspectorTor Exit NodeVPN/Proxy DetectDomain ReputationTyposquat DetectUsername SearchFavicon Hash
GitHub ActionsDockerfile Gendocker-composeArgoCD AppK8s Manifests
소개

© 2026 VLANlab

로그인 불필요 · 광고 없음 · 추적 없음

2.43.fdd8a93

CSS 플렉스박스 및 그리드 시각화 도구

실시간 미리보기를 통해 CSS 플렉스박스 및 그리드 레이아웃을 시각적으로 구성할 수 있습니다. 컨테이너와 항목의 속성을 조정한 후, 바로 사용할 수 있는 CSS 코드를 복사하세요.

Container
Item 1
1
2
3
4
5
Container CSS
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
align-items: stretch;
gap: 8px;
Item CSS
/* all items use defaults */

관련 도구

Box Shadow Generator

실시간 미리보기를 통해 CSS 박스 그림자를 시각적으로 제작하세요. 오프셋, 블러, 확산, 색상 및 여러 레이어를 자유롭게 조절할 수 있습니다. 바로 사용할 수 있는 CSS 코드를 즉시 복사하세요.

CSS Unit Converter

총 14가지 CSS 단위 간 변환을 즉시 수행할 수 있습니다. px, rem, em, vw, vh, pt, cm, in 또는 기타 단위를 입력하면, 상황에 맞는 상대 단위 지원을 통해 모든 변환 결과를 한눈에 확인할 수 있습니다.

Gradient Generator

CSS 그라데이션을 시각적으로 제작하세요. 선형, 방사형, 원뿔형 그라데이션의 색상 스톱, 불투명도 및 위치를 설정하고, 바로 사용할 수 있는 CSS 코드를 복사하세요.

이 도구에 대해

CSS 플렉스박스 및 그리드 비주얼라이저에 대하여

CSS 플렉스박스(Flexbox)와 그리드(Grid)는 현대 CSS의 두 가지 주요 레이아웃 시스템입니다. 플렉스박스는 행(row)이나 열(column)과 같은 1차원 레이아웃을 처리하며, 네비게이션 바, 툴바, 컴포넌트 정렬에 이상적입니다. CSS 그리드는 행과 열을 동시에 다루는 2차원 레이아웃을 처리하므로, 페이지 레이아웃, 카드 그리드, 복잡한 UI 구조에 적합한 도구입니다. 두 시스템 모두 컨테이너/항목 모델을 사용합니다. 즉, 컨테이너의 속성은 전체 레이아웃을 정의하고, 개별 항목의 속성은 해당 항목이 컨테이너 내에 어떻게 배치될지를 제어합니다.

사용 방법

상단의 탭을 사용하여 Flexbox 모드와 Grid 모드 간에 전환할 수 있습니다. 컨테이너 속성을 조정하여 전체 레이아웃 방향, 줄 바꿈, 정렬 및 간격을 설정하세요. 번호가 매겨진 칩을 클릭하거나 미리보기 창을 직접 클릭하여 항목을 선택한 다음, 해당 항목의 개별 속성을 구성하세요. 값이 변경되면 미리보기 창이 실시간으로 업데이트됩니다. ‘컨테이너 CSS’ 및 ‘항목 CSS’ 블록을 복사하여 스타일시트에 붙여넣으세요.

항목 CSS 출력 그룹은 항목 클래스(.item-1, .item-2 등)별로 재정의됩니다. 컨테이너 기본값만 사용하는 항목은 출력되지 않으며, 재정의된 항목만 나열됩니다. 그리드 모드의 경우, 열 및 행 스팬 값은 span N 약어를 사용합니다. repeat() 템플릿은 폭이 동일한 트랙의 경우 repeat(N, Xunit) 형식으로 작성됩니다. 레이아웃 요구 사항에 맞게 단위 선택자를 fr, px, % 중에서 조정하십시오.