웹 개발과 HTML/CSS 핵심 정리
웹 개발이란?
웹(World Wide Web)은 브라우저를 통해 접근 가능한 사이트들의 집합입니다. 웹 개발은 이러한 사이트를 구축하는 전 과정을 의미합니다.
웹사이트 동작 원리
사용자가 브라우저로 프론트엔드 서버에 접속하면 프론트엔드 코드가 전달됩니다.
브라우저가 이 코드를 해석해 화면에 기본 레이아웃을 표시합니다.
코드에 명시된 백엔드 서버 주소로 데이터 요 ...
7월 5일 01:22에 게시됨
모바일 디버깅을 위한 vConsole 활용 가이드
소개
웹 애플리케이션 개발 과정에서 console.log를 사용하여 정보를 출력하거나 API 응답, 성능 등을 확인할 수 있습니다.
하지만 모바일 기기에서는 이러한 콘솔 로그를 직접 볼 수 없는 문제가 있습니다.
이럴 때 alert를 사용하여 정보를 표시할 수 있지만, 이 방법은 불편할 뿐만 아니라 JS 스레드를 차단하여
후속 코드 실행에 문제를 일 ...
7월 5일 00:30에 게시됨
CSS 단위 px, em, rem 비교 및 적용 가이드
CSS에서 px, em, rem은 가장 널리 사용되는 세 가지 단위로 각각 고유한 특성과 사용 사례를 가지고 있습니다. 이 단위들의 차이점을 이해하는 것은 개발 과정에서 더 적절한 선택을 하고 페이지의 제어성, 호환성, 반응형 디자인 능력을 향상시키는 데 도움이 됩니다. 본문에서는 이 세 가지 단위의 차이점을 자세히 살펴보고 최적의 사용 사례를 소개합니다.
px 단위: 픽 ...
6월 21일 18:14에 게시됨
Bootstrap 기초 활용 및 프로젝트 적용 방법
Bootstrap을 사용하기 위해서는 먼저 공식 웹사이트에서 프레임워크를 다운로드해야 한다. 주로 사용하는 파일은 dist/css 디렉터리 내의 bootstrap.css와 압축된 버전인 bootstrap.min.css이다. 이 파일들은 레이아웃, 컴포넌트, 반응형 디자인 등을 위한 핵심 스타일을 제공한다.
HTML 문서의 <head> 태그 내에 다음과 같이 CSS 파일을 연결한다:
<link rel="s ...
6월 18일 21:21에 게시됨
LogicFlow 5분 안에 익히기: 플로우차트 프레임워크 설정 가이드
LogicFlow는 비즈니스 맞춤형 플로우차트 편집에 특화된 프레임워크로, 마인드맵, ER 다이어그램, UML, 워크플로우 등 다양한 다이어그램 편집 시나리오를 지원합니다. 이 라이브러리는 플로우차트 상호작용 및 편집에 필요한 핵심 기능과 함께 간단하고 유연한 노드 커스터마이징, 플러그인 확장 메커니즘을 제공합니다.
프로젝트 아키텍처
LogicFlow는 모듈식 설계를 채 ...
6월 17일 23:49에 게시됨
레이UI 다중 테이블 이벤트 핸들링 시 ID 충돌 해결
한 페이지에 여러 테이블이 존재할 때, 레이어UI의 테이블 툴바 이벤트에서 ID 값이 정상적으로 추출되지 않는 문제가 발생할 수 있습니다. 다음은 대표적인 오류 사례입니다:
문제 재현 코드
<div hidden>
<script type="text/html" id="ToolTemplateA">
<a class="layui-btn" lay-event="modify">수정</a>
</script>
<scrip ...
6월 17일 22:05에 게시됨
Vue Admin 템플릿 사용 가이드
Vue Admin 템플릿 사용 가이드
1. 프로젝트 디렉토리 구조 및 소개
vue-admin-template/
├── public/ # 정적 자원 폴더
│ ├── favicon.ico # 사이트 아이콘
│ └── index.html # 메인 페이지 템플릿
├── src/ # 소스 코드 폴더
│ ├── assets/ # 프로젝트 자원 파일 (이미지, 스타일 등)
│ ...
6월 12일 22:04에 게시됨
웹 프론트엔드 기초: HTML 마크업과 CSS 스타일링
웹 환경의 핵심 개념
클라이언트와 서버의 역할 분리
웹 시스템은 크게 사용자 측 클라이언트와 데이터 처리 서버로 구분됩니다. 클라이언트는 브라우저나 모바일 앱 형태로 사용자의 입력을 받고 시각적 피드백을 제공합니다. 반면 서버는 실제 비즈니스 로직을 실행하고 데이터를 가공하여 클라이언트에 전달합니다.
서버는 하드웨어적 관점에서는 고성능 컴퓨팅 장비 ...
6월 5일 02:34에 게시됨
Vue.js 프로젝트를 위한 Vue-Codemirror 코드 에디터 통합 가이드
Vue.js 애플리케이션에 강력한 코드 편집 기능을 추가하려면 Vue-Codemirror 라이브러리가 효과적인 솔루션이 될 수 있습니다. 이 가이드에서는 Vue-Codemirror를 설치하고 설정하여 Vue 프로젝트 내에서 유연한 코드 에디터를 구현하는 방법을 자세히 설명합니다.
필수 패키지 설치
Vue-Codemirror를 사용하기 위해서는 핵심 codemirror 라이브러리와 Vue 래퍼인 vue-cod ...
5월 20일 09:26에 게시됨