HTML과 CSS를 활용한 연예인 소개 웹사이트 제작
웹사이트 주제
개인 포트폴리오 웹사이트, 이력서 제작, 정적 HTML 개인 웹페이지, 인물 소개 템플릿 등의 디자인과 구현
웹사이트 요구사항
페이지 구조: 헤더, 네비게이션 바(드롭다운 지원), 콘텐츠 영역, 푸터로 구성
페이지 간 연결: 5-10개 페이지로 구성, 3단계 깊이의 내부 링크 지원
디자인 일관성: Div+CSS 기반 레이아웃, 전체적인 스타일 통일
네비 ...
8월 4일 15:09에 게시됨
JavaScript를 이용한 남은 시간 계산 및 표시
특정 목표 시간까지 남은 시간을 일, 시, 분, 초 단위로 계산하여 표시하는 JavaScript 기능을 구현합니다. 또한, 현재 시간을 기준으로 당일 자정까지 남은 시간을 계산하는 기능도 함께 제공합니다.
1. 특정 목표 시간까지 남은 시간 계산
아래 코드는 현재 시간부터 지정된 미래 시간까지 남은 시간을 계산하여 콘솔에 출력합니다. 예시에서는 2021년 12월 1일 00시 00 ...
8월 1일 00:20에 게시됨
윈도우에서 Node.js 설치 및 환경 설정
Node.js 설치 및 환경 설정 (Windows 환경)
1. 설치 환경
운영체제: Windows 10 Pro (64비트)
Node.js 버전: v16.14.2 LTS (64비트)
2. Node.js 설치 절차
시스템에 맞는 Node.js 버전 다운로드: https://nodejs.org/ko/download/
설치 디렉토리 선택 후 설치 진행
환경 변수 설정
설치 확인 테스트
3. 사전 준비
공식 웹사이트에서 Node.js 설치 파일을 다운로드합 ...
7월 29일 18:51에 게시됨
Vue.js 프로젝트에서 Evil Icons 활용: 10가지 모범 사례
Evil Icons는 현대 웹 프로젝트를 위해 설계된 무료 SVG 아이콘 세트로, 단순하고 깔끔한 아이콘 솔루션을 제공합니다. Rails, Sprockets, Node.js, Gulp, Grunt 및 CDN 등 다양한 통합 방식을 지원합니다. 이 글에서는 Vue.js 프로젝트에서 Evil Icons를 효율적으로 사용하는 방법과 개발 효율성을 높이는 데 도움이 되는 10가지 모범 사례를 자세히 소개합니다.
1. Vu ...
7월 26일 06:26에 게시됨
위챗 미니프로그램 페이지 간 데이터 전달 방법
문제 상황
프로젝트 개발 중 A 페이지에서 B 페이지로 "HTTP 링크"를 전달해야 하는 요구사항이 있었습니다. 전달된 링크 문자열에 "?", "=", "&"와 같은 특수 문자가 포함되어 있었고, 이로 인해 페이지가 전환된 후 B 페이지에서는 "?" 문자 앞의 문자열만 받을 수 있었으며, 뒤의 문자열은 전달되지 않는 문제가 발생했습니다.
원인 분석
이 문제는 전달된 파라미터에 ...
7월 21일 05:28에 게시됨
Vue.js 컴포넌트 Props 처리 및 변경 방법
Props 처리 단계
isFavorite 속성 추가
props: [
'userName',
'userPhone',
'userEmail',
'isFavorite'
],
변수 선언
favoriteStatus: this.isFavorite
값 변경 로직 구현
// Props는 직접 수정할 수 없으므로 별도의 변수 사용
// toggleFavorite 메서드에서 변수 값 변경
toggleFavorite() {
this.favoriteStatus = this.favoriteStatus === '1' ? ...
7월 17일 01:01에 게시됨
HTML 기본 이해: 웹 콘텐츠 구조화
웹 페이지, 웹 애플리케이션 및 모바일 애플리케이션 사용자 인터페이스를 구축하는 데에는 HTML, CSS, JavaScript 세 가지 핵심 기술이 사용됩니다. 이들은 프론트엔드 개발의 기반을 이룹니다.
HTML이란 무엇인가?
HTML(HyperText Markup Language)은 웹 페이지를 만드는 데 사용되는 표준 마크업 언어입니다. 물리학자 팀 버너스-리에 의해 제안되고 개발되었으며, HTM ...
7월 17일 00:32에 게시됨
Vue에서 특정 요소에 다중 행 워터마크 적용하기
Canvas 기반 워터마크 유틸리티 구현
utils/Watermark.js 파일 생성:
const watermarkUtil = {
createMark: (line1, line2, targetElement) => {
const elementId = 'watermark-element'
if (!targetElement) return
const existingMark = document.getElementById(elementId)
if (existingMark) existingMark.remove()
const con ...
7월 14일 06:47에 게시됨
Vue.js에서 Axios 활용: HTTP 통합 가이드
Axios는 Promise 기반의 HTTP 클라이언트로, 브라우저와 Node.js 환경에서 HTTP 요청을 처리하기 위한 강력한 도구입니다. Vue.js 애플리케이션에서 서버와의 데이터 통신을 위해 널리 사용됩니다.
Vue 프로젝트에서 Axios를 통합하는 방법은 다음과 같습니다:
Axios 설치
npm 또는 yarn 패키지 매니저를 사용하여 Axios를 설치할 수 있습니다:
npm install axios
# 또 ...
7월 13일 03:37에 게시됨
웹 개발과 HTML/CSS 핵심 정리
웹 개발이란?
웹(World Wide Web)은 브라우저를 통해 접근 가능한 사이트들의 집합입니다. 웹 개발은 이러한 사이트를 구축하는 전 과정을 의미합니다.
웹사이트 동작 원리
사용자가 브라우저로 프론트엔드 서버에 접속하면 프론트엔드 코드가 전달됩니다.
브라우저가 이 코드를 해석해 화면에 기본 레이아웃을 표시합니다.
코드에 명시된 백엔드 서버 주소로 데이터 요 ...
7월 5일 01:22에 게시됨