반응형
인기글
- [GitHub 웹페이지] 2. 규칙 정하기 - Git Commit Message Git Commit Message 규칙Git Commit Message 형식타입: 제목본문꼬리말타입feat: 새로운 기능 추가fix: 버그 수정docs: 문서 수정style: 코드 포맷팅, 세미콜론 누락 등 코드 변경이 없는 경우refactor: 코드 리팩토링test: 테스트 추가 또는 수정chore: 빌드 업무 수정, 패키지 매니저 설정 등perf: 성능 향상 관련 변경ci: CI 설정 파일 및 스크립트 변경build: 빌드 시스템 또는 외부 종속성에 영향을 미치는 변경 사항제목길이: 50자 이내스타일: 동사(현재 시제)로 시작하고 첫 글자는 대문자 사용마침표: 제목 끝에 마침표 사용하지 않음예시: feat: Add user authentication본문길이: 각 행은 72자 이내로 작성내용: 무엇을,..
- [Figma] Figma 주요 기능별 사용법 - 네비게이션 설계 이제 5단계인 네비게이션 설계를 진행하겠습니다. 이 단계에서는 링크를 설정하고 컴포넌트를 사용하는 방법을 배우게 됩니다.5. 네비게이션 설계5.1 링크 설정주요 기능:링크는 페이지 간 네비게이션을 가능하게 합니다.사용법:프로토타입 모드로 전환: 상단 메뉴에서 Prototype 탭을 클릭하여 프로토타입 모드로 전환합니다.링크 설정: 요소를 선택하고 링크 아이콘을 클릭하여 연결할 페이지나 프레임을 선택합니다.예시:네비게이션 바의 메뉴 항목에 링크를 설정합니다.실습:Prototype 탭에서 네비게이션 바의 메뉴 항목을 선택합니다.링크 아이콘을 클릭하여 다른 프레임이나 페이지로 연결합니다.실습 단계별 스크린샷:프로토타입 모드로 전환:피그마 상단 메뉴에서 Prototype 탭을 클릭합니다.링크 설정:네비게이션 바..
- [문서작성법] 단계별 문서 작성법(개요) 웹 디자인이나 모바일 디자인 분야에서 문서 작성은 프로젝트의 성공적인 진행을 위해 매우 중요합니다. 이러한 문서들은 디자인 팀과 개발 팀, 그리고 클라이언트 간의 원활한 커뮤니케이션을 돕고 프로젝트 요구사항과 목표를 명확히 합니다. 웹 및 모바일 디자인 문서를 작성할 때는 다음과 같은 주요 문서 유형과 작성법을 참고할 수 있습니다.1. 프로젝트 개요서 (Project Brief)목적: 프로젝트의 전반적인 목적과 목표를 설명합니다.내용:프로젝트 개요타겟 사용자주요 목표성공 지표2. 요구사항 정의서 (Requirements Specification)목적: 프로젝트의 기능적 및 비기능적 요구사항을 명확히 합니다.내용:기능적 요구사항: 사용자가 수행할 수 있는 주요 기능들 (예: 사용자 등록, 로그인, 제품 검..
- [Figma] Figma 주요 기능별 사용법 - 타이포그래피 이제 2단계인 타이포그래피를 진행해보겠습니다. 이 단계에서는 텍스트를 추가하고 텍스트 스타일을 설정하는 방법을 배우게 됩니다.2. 타이포그래피2.1 텍스트 추가주요 기능:텍스트는 웹 페이지의 주요 콘텐츠를 전달합니다.사용법:텍스트 도구 선택: T 키를 눌러 텍스트 도구를 선택합니다.텍스트 상자 생성: 캔버스를 클릭하여 텍스트 상자를 생성하고 텍스트를 입력합니다.예시:웹 페이지의 제목과 본문 텍스트를 추가합니다.실습:Homepage 프레임에서 T 키를 눌러 텍스트 상자를 생성합니다."Welcome to My Website"라고 입력합니다.실습 단계별 스크린샷:텍스트 도구 선택:피그마에서 T 키를 눌러 텍스트 도구를 선택합니다.커서가 텍스트 입력 모드로 변경됩니다.텍스트 상자 생성:Homepage 프레임 안..
- [문서작성법] 단계별 문서 작성법(예시) 웹 디자인 및 모바일 디자인 프로젝트에서 문서 작성법을 단계별로 예시와 함께 상세하게 설명하겠습니다. 각 단계에서는 실제 프로젝트에서 사용하는 상황을 가정하여 문서를 작성해보겠습니다.1. 프로젝트 개요서 (Project Brief)목적프로젝트 개요서는 프로젝트의 전반적인 목적과 목표를 설명하며, 팀원들이 프로젝트의 방향성을 이해할 수 있도록 합니다.예시프로젝트 이름: GreenLife 웹사이트 리뉴얼프로젝트 개요:GreenLife는 환경 보호를 목적으로 하는 비영리 단체입니다. 이번 프로젝트는 GreenLife 웹사이트를 리뉴얼하여 사용자 경험을 개선하고, 기부자와 자원봉사자들의 참여를 촉진하는 것을 목표로 합니다.타겟 사용자:환경 보호에 관심이 있는 일반인기부자자원봉사자주요 목표:사용자 친화적인 인터페..
최신글
- [웹디자인] 목차 HTML과 CSS를 사용하여 웹 디자인을 학습하는 30일 과정을 제안합니다. 이 과정은 기초부터 심화 주제, 반응형 디자인 및 실전 프로젝트까지 포함하여 단계별로 학습할 수 있도록 구성했습니다. 웹 디자인 학습1. HTML 소개 및 기본 구조: HTML의 역사, 기본 문서 구조, 요소 및 속성2. 텍스트 관련 요소: 제목, 단락, 강조, 인용문3. 리스트와 테이블: 순서 있는 리스트, 순서 없는 리스트, 테이블 구조 및 속성4. 링크와 이미지: 하이퍼링크, 이미지 삽입 및 속성5. 폼과 입력 요소: 폼 태그, 입력 요소, 버튼, 폼 속성6. HTML5 시맨틱 요소: header, footer, nav, section, article, aside 등7. 멀티미디어 요소: 오디오, 비디오, 캔버스 요소8. ..
- [JavaScript 문법] 목차 JavaScript 문법 학습 시리즈1. JavaScript 소개 및 설정JavaScript의 역사, 환경 설정, 첫 번째 스크립트 작성2. 변수와 데이터 타입var, let, const, 문자열, 숫자, 불리언, null, undefined3. 연산자와 표현식산술 연산자, 할당 연산자, 비교 연산자, 논리 연산자4. 조건문if, else if, else, switch 문5. 반복문for, while, do-while 문6. 함수 기초함수 선언, 함수 표현식, 매개변수와 인수7. 스코프와 클로저전역 스코프, 지역 스코프, 블록 스코프, 클로저8. 객체 기초객체 리터럴, 속성 접근, 메서드9. 객체의 프로토타입프로토타입 체인, 상속10. 배열 기초배열 선언, 배열 메서드 (push, pop, shift, ..
- [Javascript 기초 시리즈] 목차 1. JavaScript 기초 시리즈1.1 JavaScript 소개 및 역사1.2 변수와 자료형1.3 연산자와 표현식1.4 함수와 스코프1.5 객체와 배열1.6 조건문과 반복문1.7 DOM 조작 기초
- [포트폴리오 페이지] 7단계: 프로젝트 상세 페이지 추가 ~ SEO 최적화 2. 프로젝트 상세 페이지 추가이 단계에서는 각 프로젝트에 대한 상세 페이지를 추가하여 방문자가 각 프로젝트의 상세 내용을 확인할 수 있도록 합니다. 상세 페이지를 만들고 링크를 추가하여 이를 구현합니다.2.1 프로젝트 상세 페이지 HTML 작성각 프로젝트에 대한 상세 페이지를 추가합니다. 예를 들어 project1.html 파일을 생성합니다.Git Commit Messagegit commit -m "Add detailed project pages"project1.html 6.2 커밋과 푸시변경된 내용을 커밋하고 GitHub에 푸시합니다.git add index.htmlgit commit -m "Improve SEO with meta tags and keyword..
- [포트폴리오 페이지] 6단계: 반응형 디자인 반응형 디자인을 확장하여 포트폴리오 웹사이트를 모든 기기에서 최적화된 방식으로 표시하도록 개선해 보겠습니다. 반응형 디자인을 구현하기 위해 추가할 내용은 다음과 같습니다.헤더 및 네비게이션 메뉴의 반응형 디자인섹션과 폼 요소의 반응형 디자인이미지 및 기타 미디어 요소의 반응형 디자인1. 헤더 및 네비게이션 메뉴의 반응형 디자인1.1. HTML 수정헤더와 네비게이션 메뉴를 위한 구조를 조금 더 개선하여 모바일에서의 사용성을 높입니다. index.html (수정된 부분) My Portfolio ☰ About Me Projects Contact English ..
반응형