반응형
인기글
- [Figma] Figma 주요 기능별 사용법 - 네비게이션 설계 이제 5단계인 네비게이션 설계를 진행하겠습니다. 이 단계에서는 링크를 설정하고 컴포넌트를 사용하는 방법을 배우게 됩니다.5. 네비게이션 설계5.1 링크 설정주요 기능:링크는 페이지 간 네비게이션을 가능하게 합니다.사용법:프로토타입 모드로 전환: 상단 메뉴에서 Prototype 탭을 클릭하여 프로토타입 모드로 전환합니다.링크 설정: 요소를 선택하고 링크 아이콘을 클릭하여 연결할 페이지나 프레임을 선택합니다.예시:네비게이션 바의 메뉴 항목에 링크를 설정합니다.실습:Prototype 탭에서 네비게이션 바의 메뉴 항목을 선택합니다.링크 아이콘을 클릭하여 다른 프레임이나 페이지로 연결합니다.실습 단계별 스크린샷:프로토타입 모드로 전환:피그마 상단 메뉴에서 Prototype 탭을 클릭합니다.링크 설정:네비게이션 바..
- [웹 디자인] 30일차: 최종 프로젝트 발표 및 리뷰 최종 프로젝트 발표최종 프로젝트는 그동안 학습한 내용을 종합하여 완성된 웹사이트를 발표하는 단계입니다. 프로젝트 발표를 통해 자신의 작업을 공유하고, 피드백을 받아 개선할 수 있는 기회를 갖게 됩니다.발표 준비1. 프로젝트 개요 설명프로젝트의 주요 목적과 목표를 간략히 설명합니다. 어떤 문제를 해결하고자 했는지, 어떤 기능을 구현했는지에 대해 이야기합니다.예제:제 프로젝트는 포트폴리오 웹사이트입니다. 이 웹사이트의 주요 목적은 제 작업물을 잠재적 고용주나 클라이언트에게 소개하는 것입니다. 주요 기능으로는 프로젝트 갤러리, 소개 페이지, 연락처 폼 등이 있습니다.2. 주요 기능 및 특징 설명웹사이트의 주요 기능과 특징을 설명합니다. 각 페이지나 섹션의 주요 요소를 시연합니다.예제:홈페이지에서는 짧은 소개와..
- [UX/UI Design] 3단계: Figma에서 와이어프레임 제작 이제 3단계로 넘어가서 Figma를 사용하여 와이어프레임을 제작하는 방법을 배우겠습니다. 3단계: Figma에서 와이어프레임 제작학습 목표:와이어프레임의 개념 이해Figma를 사용하여 와이어프레임 제작와이어프레임의 문서화세부 학습 내용:1. 와이어프레임의 개념 이해와이어프레임: 웹사이트나 애플리케이션의 기본 구조를 시각적으로 나타낸 것입니다. 주로 레이아웃, 페이지 요소의 위치, 사용자 흐름 등을 나타내며, 세부적인 디자인 요소(색상, 이미지 등)는 포함되지 않습니다.와이어프레임은 UX/UI 디자인의 초기 단계에서 중요한 역할을 합니다. 이를 통해 디자이너는 사용자 흐름과 페이지 레이아웃을 구체화할 수 있습니다.2. Figma에서 와이어프레임 제작Figma 프로젝트 설정새 파일 생성: Figma에서 "N..
- [웹 디자인] 24일차: 네비게이션 바 디자인 네비게이션 바란?네비게이션 바(Navigation Bar)는 웹사이트에서 사용자가 주요 페이지나 섹션으로 쉽게 이동할 수 있도록 도와주는 메뉴입니다. 잘 설계된 네비게이션 바는 웹사이트의 가독성과 사용자 경험을 향상시킵니다.네비게이션 바의 기본 요소로고: 웹사이트의 로고를 표시합니다.메뉴 항목: 주요 페이지나 섹션으로 이동할 수 있는 링크입니다.검색 창: 검색 기능을 제공합니다.버튼: 로그인, 회원가입 등의 버튼입니다.네비게이션 바 디자인 예제HTML 구조 Logo Home About Services Contact Login Sign Up Home ..
- [HTML] HTML 예제 CSS를 기본적인 사각형 테두리만 이용하여 간단한 개인 프로필 페이지를 만들어 보겠습니다.예제: 개인 프로필 페이지 (사각형 테두리만 사용) Welcome to My Profile John Doe Hello! I'm John Doe, a web developer with a passion for creating amazing web experiences. Contact Information Email: john.doe@example.com Phone: (123) 456-7890 Website: www.johndoe.com Skills HTML CSS JavaScript ..
최신글
- [코딩 테스트] 30일차: 실전 모의고사 - 최종 준비 최종 준비와 종합 정리이번 글에서는 코딩 테스트 준비를 마무리하는 단계로, 그동안 배운 내용을 종합 정리하고 최종 준비를 진행하겠습니다. 코딩 테스트 당일의 긴장을 풀고 최상의 상태로 시험에 임할 수 있도록 몇 가지 팁을 제공하겠습니다.1. 학습 내용 종합 정리지금까지 배운 자료구조와 알고리즘을 한 번 더 정리합니다.자료구조: 배열, 리스트, 스택, 큐, 트리, 그래프, 해시맵 등알고리즘: 정렬, 탐색, 그리디 알고리즘, 동적 프로그래밍, 분할 정복, 백트래킹 등2. 최종 준비 팁시간 관리: 문제를 풀 때 시간을 효율적으로 관리하는 연습을 합니다.문제 이해: 문제를 꼼꼼히 읽고, 요구사항을 정확히 이해합니다.단계별 접근: 문제를 더 작은 부분 문제로 나누어 단계별로 해결합니다.테스트 케이스 작성: 다양한..
- [코딩 테스트] 29일차: 실전 모의고사 - 모의 면접과 코드 리뷰 2 모의 면접과 코드 리뷰 2이번 글에서는 모의 면접과 코드 리뷰를 통해 코딩 테스트 준비를 마무리하겠습니다. 실제 면접 상황을 연습하고, 코드 리뷰를 통해 피드백을 받는 과정을 통해 문제 해결 능력을 더욱 향상시킬 수 있습니다.1. 모의 면접 준비모의 면접을 통해 실제 면접 상황에서의 긴장감을 줄이고, 자신감을 향상시킬 수 있습니다.면접 환경 조성: 실제 면접과 유사한 환경을 조성합니다.질문 리스트 준비: 자주 묻는 코딩 문제와 기술 질문 리스트를 준비합니다.면접관 역할: 친구나 동료에게 면접관 역할을 맡겨 실제 면접 상황을 연출합니다.2. 코드 리뷰와 피드백코드 리뷰는 작성한 코드를 다른 사람에게 검토받아, 개선할 점을 찾고 더 나은 코드를 작성하는 데 도움을 줍니다.코드 공유: 작성한 코드를 공유하고,..
- [코딩 테스트] 28일차: 실전 모의고사 - 제한 시간 내 문제 풀기 2 제한 시간 내 문제 풀기 2이번 글에서는 제한 시간 내에 문제를 해결하는 연습을 계속합니다. 다양한 유형의 문제를 통해 실전 감각을 익혀보세요. 아래 예제 문제들을 제한 시간 내에 풀어보세요.문제 1: 세 수의 합 (Three Sum)주어진 배열에서 세 수의 합이 0이 되는 모든 고유한 조합을 찾으세요.예제입력: [-1, 0, 1, 2, -1, -4]출력: [[-1, 0, 1], [-1, -1, 2]]JavaScriptfunction threeSum(nums) { nums.sort((a, b) => a - b); const result = []; for (let i = 0; i 0 && nums[i] === nums[i - 1]) continue; let left = 0, right = nu..
- [코딩 테스트] 27일차: 실전 모의고사 - 종합 리뷰와 최종 준비 팁 종합 리뷰와 최종 준비 팁이번 글에서는 실전 모의고사에 대한 종합 리뷰와 최종 준비 팁을 다루겠습니다. 이제까지 배운 내용을 종합하여 최종 준비를 하는 방법을 알아보겠습니다.1. 종합 리뷰지금까지의 학습 내용을 리뷰하면서, 부족한 부분을 보완합니다.자료구조: 배열, 리스트, 스택, 큐, 트리, 그래프, 해시맵 등 주요 자료구조의 특성과 사용법을 복습합니다.알고리즘: 정렬, 탐색, 그리디 알고리즘, 동적 프로그래밍, 분할 정복, 백트래킹 등 다양한 알고리즘의 구현과 활용 방법을 복습합니다.문제 풀이: 다양한 문제를 풀어보며, 문제를 이해하고 해결하는 능력을 향상시킵니다.2. 최종 준비 팁코딩 테스트에서 좋은 결과를 얻기 위해 다음과 같은 준비 팁을 활용합니다.시간 관리: 제한 시간 내에 문제를 해결하기 위..
- [코딩 테스트] 26일차: 실전 모의고사 후 피드백 받기 실전 모의고사 후 피드백 받기코딩 테스트를 준비하는 과정에서 중요한 부분은 테스트 후 피드백을 통해 개선점을 찾고 보완하는 것입니다. 이번 글에서는 실전 모의고사 후 피드백을 받는 방법과 피드백을 반영하는 과정을 다루겠습니다.1. 테스트 후 피드백 받기테스트가 끝난 후에는 자신의 풀이를 돌아보고, 피드백을 받는 것이 중요합니다.자신의 풀이 분석: 제출한 코드를 다시 검토하고, 어떤 부분에서 실수했는지, 더 효율적인 방법은 없는지 분석합니다.코드 리뷰 요청: 친구나 동료, 또는 온라인 커뮤니티에서 코드 리뷰를 요청하여 피드백을 받습니다.피드백 수용: 받은 피드백을 바탕으로, 자신의 코드에서 개선할 점을 찾고 반영합니다.2. 개선점 찾기피드백을 통해 찾은 개선점을 반영하여 더 나은 코드를 작성합니다.효율성 ..
반응형