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에 게시됨
HTML과 CSS 학습 가이드
준비
추천 학습 사이트:
W3Schools (W3C 중국 커뮤니티 멤버들이 만든 비영리 웹사이트) - HTML, CSS, JS 학습에 적합
W3Schools 링크
MDN Web Docs (파이어폭스 개발자용 온라인 학습 자료):
MDN 링크
VSCode 플러그인 추천:
Live Server: 파일 저장 시 자동으로 브라우저를 새로 고침하여 HTML 결과를 실시간으로 확인 가능 (로컬 서버 생성, 포트 5500 사용, WebSock ...
7월 8일 01:51에 게시됨
HTML 핵심 속성, 리스트, 테이블 및 폼 요소 완벽 가이드
1. 식별자(ID)와 클래스(Class) 속성
ID 속성
특정 요소를 문서 내에서 유일하게 식별하기 위해 사용됩니다. 전체 HTML 문서에서 중복되지 않는 고유한 값을 가져야 하며, CSS 스타일링이나 JavaScript DOM 조작 시 정확한 타겟팅을 위해 활용됩니다.
<nav>
<a href="#section-intro" id="nav-intro">소개</a>
<a href="#section-features" ...
7월 5일 21:52에 게시됨
웹 개발과 HTML/CSS 핵심 정리
웹 개발이란?
웹(World Wide Web)은 브라우저를 통해 접근 가능한 사이트들의 집합입니다. 웹 개발은 이러한 사이트를 구축하는 전 과정을 의미합니다.
웹사이트 동작 원리
사용자가 브라우저로 프론트엔드 서버에 접속하면 프론트엔드 코드가 전달됩니다.
브라우저가 이 코드를 해석해 화면에 기본 레이아웃을 표시합니다.
코드에 명시된 백엔드 서버 주소로 데이터 요 ...
7월 5일 01:22에 게시됨
웹 페이지 구조화를 위한 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에 게시됨
HTML에서 JavaScript로 긴 텍스트 줄임 및 호버 시 전체 표시 구현
웹 페이지에서 특정 콘텐츠가 너무 길 경우, 레이아웃이 무너지거나 시각적으로 어수선해질 수 있습니다. 이를 방지하기 위해 기본적으로 일부만 보여주고, 사용자가 마우스를 올렸을 때 전체 내용을 확인할 수 있도록 하는 기능을 구현하는 방법을 소개합니다.
이 기능은 CSS의 :hover 의사 클래스를 활용하거나, 더 세밀한 제어가 필요할 경우 JavaScript의 이벤트 핸들 ...
6월 26일 00:57에 게시됨
고양이 블로그 만들기
내용 목록
시작 동기
구현 방법
주요 기능 및 구현
향후 개선 사항
시작 동기
우리 집에 있는 작은 주황색 고양이는 성격이 좋아서, 그 고양이의 일상을 기록하는 간단한 블로그를 만들어 보기로 했습니다. 이를 통해 고양이와 함께하는 생활과 느낌을 기록하고자 합니다.
데모: https://unuliha.github.io/zhongqiu/index.html
소스코드: https://gitee.com/unuliha/b ...
6월 21일 18:29에 게시됨
Bootstrap 기초 활용 및 프로젝트 적용 방법
Bootstrap을 사용하기 위해서는 먼저 공식 웹사이트에서 프레임워크를 다운로드해야 한다. 주로 사용하는 파일은 dist/css 디렉터리 내의 bootstrap.css와 압축된 버전인 bootstrap.min.css이다. 이 파일들은 레이아웃, 컴포넌트, 반응형 디자인 등을 위한 핵심 스타일을 제공한다.
HTML 문서의 <head> 태그 내에 다음과 같이 CSS 파일을 연결한다:
<link rel="s ...
6월 18일 21:21에 게시됨
Typed.js를 활용한 웹사이트 동적 타이핑 효과 구현 가이드
기초부터 응용까지: Typed.js로 텍스트 애니메이션 구현하기
Typed.js는 웹 페이지에서 마치 사람이 치는 듯한 자연스러운 타이핑 효과를 구현할 수 있는 경량 자바스크립트 라이브러리입니다. 이 도구를 사용하면 단순한 텍스트를 생동감 있게 표현하고, 사용자 몰입도를 높일 수 있습니다.
주요 특징
작은 크기 – 최소한의 파일 용량으로 빠른 로딩을 보장합니다.
세밀 ...
6월 18일 01:36에 게시됨
웹사이트의 동작 원리와 기본 웹 보안 취약점 분석
웹 애플리케이션의 취약점을 분석하고 활용하기 위해서는 웹사이트가 구축되고 작동하는 기본 원리를 이해하는 것이 필수적입니다. 이 글에서는 클라이언트와 서버의 상호작용, 프론트엔드 기술 스택, 그리고 기본적인 웹 보안 취약점에 대해 다룹니다.
웹사이트의 요청 및 응답 구조
사용자가 웹 브라우저를 통해 특정 URL에 접속하면, 브라우저는 해당 페이지의 리소스 ...
6월 7일 16:22에 게시됨