Layui 주요 컴포넌트 실용 가이드
Layui 학습 노트 (주요 컴포넌트 사용법)
1. 그리드 시스템
주로 페이지 레이아웃을 구성하는 데 사용되며, 페이지를 12등분으로 나눕니다. div의 클래스 규칙을 통해 레이아웃을 구성할 수 있습니다.
기본 사용법
<div class="layui-row">
<div class="layui-col-xs6">
<div class="grid-demo grid-demo-bg1">6/12 ...
7월 10일 20:36에 게시됨
좌우 고정, 중앙 자동 조절 레이아웃: CSS를 이용한 3단 구성 구현 방법
서론
웹 페이지에서 좌우에 고정된 사이드바와 가운데 유동적으로 확장되는 콘텐츠 영역을 갖는 3단 레이아웃은 블로그, 뉴스 포털, CMS 등에서 흔히 사용되는 구조입니다. 이 방식은 보조 정보(예: 메뉴, 광고)를 유지하면서도 주 내용 영역을 최적화할 수 있어 실용적입니다. 본 문서에서는 이러한 레이아웃을 구현하는 대표적인 CSS 기법들을 살펴보고 각각의 장단점을 ...
7월 10일 02:18에 게시됨
CSS 선택자 완벽 가이드
기본 선택자요소 선택자특정 HTML 태그를 직접 지정하여 스타일을 적용합니다.<style>
section {
background-color: #3498db;
}
</style>
<body>
<section>내용 1</section>
<section>내용 2</section>
</body>클래스 선택자동일한 class 속성을 가진 여러 요소에 스타일을 공통 적용할 수 있습니다. 재사용 ...
7월 9일 03:02에 게시됨
HTML과 CSS 학습 가이드
준비
추천 학습 사이트:
W3Schools (W3C 중국 커뮤니티 멤버들이 만든 비영리 웹사이트) - HTML, CSS, JS 학습에 적합
W3Schools 링크
MDN Web Docs (파이어폭스 개발자용 온라인 학습 자료):
MDN 링크
VSCode 플러그인 추천:
Live Server: 파일 저장 시 자동으로 브라우저를 새로 고침하여 HTML 결과를 실시간으로 확인 가능 (로컬 서버 생성, 포트 5500 사용, WebSock ...
7월 8일 01:51에 게시됨
RTLCSS 설정 가이드: RTL 스타일 변환 프로세스 최적화
RTLCSS는 CSS를 좌측에서 우측(LTR)에서 우측에서 좌측(RTL)으로 변환하는 강력한 도구입니다. 이 문서에서는 RTLCSS의 다양한 설정 옵션을 설명하고, 효과적인 RTL 스타일 처리 방법을 안내합니다.
주요 설정 파라미터
RTLCSS는 사용자가 CSS 변환 과정을 세밀하게 제어할 수 있도록 여러 설정 값을 제공합니다.
autoRename: 방향 관련 클래스 자동 변경
autoRename 속성( ...
7월 6일 01:00에 게시됨
웹 개발과 HTML/CSS 핵심 정리
웹 개발이란?
웹(World Wide Web)은 브라우저를 통해 접근 가능한 사이트들의 집합입니다. 웹 개발은 이러한 사이트를 구축하는 전 과정을 의미합니다.
웹사이트 동작 원리
사용자가 브라우저로 프론트엔드 서버에 접속하면 프론트엔드 코드가 전달됩니다.
브라우저가 이 코드를 해석해 화면에 기본 레이아웃을 표시합니다.
코드에 명시된 백엔드 서버 주소로 데이터 요 ...
7월 5일 01:22에 게시됨
CSS 박스 모델: 웹 요소 레이아웃의 핵심 이해
CSS 박스 모델은 웹 페이지의 모든 HTML 요소를 사각형 상자로 간주하며, 이 상자가 콘텐츠, 안쪽 여백(padding), 테두리(border), 바깥 여백(margin)을 처리하는 방식을 정의합니다. 각 요소는 이 박스 모델에 따라 화면에 배치되고 공간을 차지하게 됩니다.
CSS 박스 모델 구성 요소
각 요소의 가장 안쪽에는 실제 콘텐츠(content)가 위치합니다. 이 콘텐츠 영역을 직접 ...
7월 3일 05:13에 게시됨
웹 페이지 구조화를 위한 HTML 문법과 CSS 레이아웃 기초
1. HTML 기본 문법
HTML은 웹 콘텐츠를 구조화하는 마크업 언어입니다. 태그(tag)를 사용하여 요소(element)를 감싸는 방식으로 작성됩니다. 기본 골격은 다음과 같습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>문서 제목</title>
</head>
<body>
<h1& ...
6월 30일 01:45에 게시됨
WPF/Avalonia StackPanel 대응 HTML/CSS 레이아웃 구현
StackPanel은 WPF와 Avalonia에서 자주 쓰는 단방향 레이아웃 컨테이너다. 이 글에서는 동일한 시각적 결과를 HTML과 CSS로 재현하는 방법을 살펴본다. 프레임워크에 구애받지 않고 순수한 마크업과 스타일로 접근하며, 예시 코드는 Vue 문법을 기반으로 작성했다.
기본 세로 쌓기
아래 XAML은 여러 TextBlock을 위에서부터 쌓는 구조다.
<StackPanel HorizontalAlignm ...
6월 27일 21:55에 게시됨
블로그원 개발 설정 및 주제 적용
凌云\_void : 블로그원 미화 및 설정
FReQuenter : 맞춤형 블로그 설정
樱雪喵 :홈페이지
Brilliant11001 :블로그원 설정
블로그원 개발 설정 가이드
블로그원에서 SimpleMemory 주제를 사용하고 다음과 같은 설정을 적용합니다.
1. 주제 설치 및 설정
...
6월 27일 02:46에 게시됨