웹 개발과 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에 게시됨
HTML에서 JavaScript로 긴 텍스트 줄임 및 호버 시 전체 표시 구현
웹 페이지에서 특정 콘텐츠가 너무 길 경우, 레이아웃이 무너지거나 시각적으로 어수선해질 수 있습니다. 이를 방지하기 위해 기본적으로 일부만 보여주고, 사용자가 마우스를 올렸을 때 전체 내용을 확인할 수 있도록 하는 기능을 구현하는 방법을 소개합니다.
이 기능은 CSS의 :hover 의사 클래스를 활용하거나, 더 세밀한 제어가 필요할 경우 JavaScript의 이벤트 핸들 ...
6월 26일 00:57에 게시됨
Uniapp에서 CSS와 상태 관리를 활용한 동적 팝업 배경 전환 기술
동적 시각 효과를 위한 커스텀 팝업 구현: Uniapp + Vuex 기반 접근법
모바일 앱 개발에서 팝업은 사용자 경험을 결정짓는 중요한 요소 중 하나다. 특히 브랜드 정체성을 반영하거나 특정 상황에 맞춘 시각적 피드백이 필요한 경우, 기본 제공되는 알림 창으로는 한계가 있다. Uniapp을 사용하는 프로젝트에서 디자인 요구사항이 복잡해질수록, 정적인 스타일이 아니 ...
6월 24일 01:36에 게시됨
프론트엔드 개발 요약
최근 몇 달 동안 프론트엔드 개발에 집중했지만 여전히 학습 곡線이峻峭합니다. 이 기회를 통해 얻은 지식과 시행착오를 나누고자 합니다. 이 기고문에서는 JavaScript, jQuery, AJAX 및 CSS와 관련된 핵심 주제를 탐구합니다.
우선, AJAX에 대해 알아보겠습니다. AJAX는 웹페이지를 다시 로드하지 않고도 서버와 데이터를 교환할 수 있는 기술입니다. 아래 예제에서는 사 ...
6월 23일 17:14에 게시됨
Vue.js 컴포넌트의 동적 클래스 및 스타일 바인딩 기법
동적 클래스 바인딩 (Dynamic Class Binding)
Vue.js에서는 v-bind:class (또는 단축형 :class)를 사용하여 HTML 요소의 클래스를 동적으로 조작할 수 있습니다. 이는 조건부 렌더링이나 상태에 따른 UI 변경을 선언적으로 처리하는 데 매우 유용합니다.
1. 객체 구문 (Object Syntax)
클래스 이름을 키로, 해당 클래스의 적용 여부를 결정하는 불리언 값을 값으로 갖는 ...
6월 23일 03:51에 게시됨
고양이 블로그 만들기
내용 목록
시작 동기
구현 방법
주요 기능 및 구현
향후 개선 사항
시작 동기
우리 집에 있는 작은 주황색 고양이는 성격이 좋아서, 그 고양이의 일상을 기록하는 간단한 블로그를 만들어 보기로 했습니다. 이를 통해 고양이와 함께하는 생활과 느낌을 기록하고자 합니다.
데모: https://unuliha.github.io/zhongqiu/index.html
소스코드: https://gitee.com/unuliha/b ...
6월 21일 18:29에 게시됨