본문 바로가기
반응형

분류 전체보기130

[GitHub 웹페이지] 5. 블로그 페이지 - 와이어프레임 블로그 페이지의 와이어 프레임을 설명해드리겠습니다. 블로그 페이지는 여러 블로그 포스트를 표시하고, 각 포스트를 클릭하면 해당 포스트의 상세 내용을 볼 수 있도록 설계할 수 있습니다.블로그 페이지 와이어 프레임-----------------------------------------| Header |-----------------------------------------| Navigation || Home | Profile | Blog | Contact |-----------------------------------------| Blog Section .. 2024. 6. 9.
[GitHub 웹페이지] 4. 홈페이지 - 와이어프레임 홈 페이지 와이어 프레임을 설명해드리겠습니다. 와이어 프레임은 페이지의 기본 구조와 주요 요소를 시각적으로 표현하는 데 사용됩니다. 아래는 HTML로 구현할 수 있는 기본 홈 페이지 와이어 프레임입니다.-----------------------------------------| Header |-----------------------------------------| Navigation || Home | Profile | Blog | Contact |-----------------------------------------| Hero Section .. 2024. 6. 9.
[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자 이내로 작성내용: 무엇을,.. 2024. 6. 9.
[GitHub 웹페이지] 1. 규칙 정하기 - 코딩컨벤션, 네이밍컨벤션, 코딩 컨벤션HTML들여쓰기: 2 스페이스태그 속성 순서: class, id, name, data-, src, for, type, href, title, alt, aria-자체 닫힘 태그: , , 등CSS들여쓰기: 2 스페이스클래스 네이밍: BEM(Block Element Modifier) 방법론 사용Block: .headerElement: .header__titleModifier: .header__title--large중괄호 위치: 여는 중괄호는 같은 줄에 위치.class { property: value;}정렬: 속성은 알파벳 순으로 정렬JavaScript들여쓰기: 2 스페이스세미콜론: 문장 끝에 항상 세미콜론 사용변수 선언: const와 let 사용 (ES6+)함수 선언:함수 표현식:const fu.. 2024. 6. 9.
[Figma] Figma 주요 기능별 사용법 - 반응형 디자인 이제 6단계인 반응형 디자인을 진행하겠습니다. 이 단계에서는 오토 레이아웃을 설정하고 프레임을 리사이징하는 방법을 배우게 됩니다.6. 반응형 디자인6.1 오토 레이아웃주요 기능:오토 레이아웃은 요소가 반응형으로 배치되도록 합니다.사용법:오토 레이아웃 설정: 요소를 선택한 후, 오른쪽 패널에서 Auto Layout 옵션을 활성화합니다.레이아웃 설정: 오토 레이아웃 패널에서 방향, 간격, 패딩 등을 설정합니다.예시:카드 레이아웃을 오토 레이아웃으로 설정합니다.실습:카드 요소들을 선택하고 오토 레이아웃을 활성화합니다.방향을 Vertical, 간격을 20px로 설정합니다.실습 단계별 스크린샷:오토 레이아웃 설정:Homepage 프레임에서 카드 레이아웃을 구성할 여러 요소(예: 이미지, 텍스트 박스, 버튼 등)를.. 2024. 6. 8.
[Figma] Figma 주요 기능별 사용법 - 네비게이션 설계 이제 5단계인 네비게이션 설계를 진행하겠습니다. 이 단계에서는 링크를 설정하고 컴포넌트를 사용하는 방법을 배우게 됩니다.5. 네비게이션 설계5.1 링크 설정주요 기능:링크는 페이지 간 네비게이션을 가능하게 합니다.사용법:프로토타입 모드로 전환: 상단 메뉴에서 Prototype 탭을 클릭하여 프로토타입 모드로 전환합니다.링크 설정: 요소를 선택하고 링크 아이콘을 클릭하여 연결할 페이지나 프레임을 선택합니다.예시:네비게이션 바의 메뉴 항목에 링크를 설정합니다.실습:Prototype 탭에서 네비게이션 바의 메뉴 항목을 선택합니다.링크 아이콘을 클릭하여 다른 프레임이나 페이지로 연결합니다.실습 단계별 스크린샷:프로토타입 모드로 전환:피그마 상단 메뉴에서 Prototype 탭을 클릭합니다.링크 설정:네비게이션 바.. 2024. 6. 8.
[Figma] Figma 주요 기능별 사용법 - 아이콘 및 이미지 추가 이제 4단계인 아이콘 및 이미지 추가를 진행하겠습니다. 이 단계에서는 아이콘을 사용하고 이미지를 추가하는 방법을 배워보겠습니다.4. 아이콘 및 이미지4.1 아이콘 사용주요 기능:아이콘은 시각적 요소를 추가하여 디자인을 보완합니다.사용법:아이콘 라이브러리 검색: 피그마 커뮤니티에서 Components 탭을 클릭하고 Icons를 검색하여 무료 아이콘 라이브러리를 찾습니다.아이콘 추가: 원하는 아이콘을 선택하고 프로젝트에 추가합니다.예시:네비게이션 바에 사용할 아이콘을 추가합니다.실습:피그마 커뮤니티에서 Icons를 검색하여 무료 아이콘 세트를 찾습니다.원하는 아이콘을 선택하고 Homepage 프레임에 추가합니다.실습 단계별 스크린샷:아이콘 라이브러리 검색:피그마 상단 메뉴에서 Assets 탭을 클릭합니다.C.. 2024. 6. 8.
[Figma] Figma 주요 기능별 사용법 - 색상 사용 이제 3단계인 색상 사용을 진행해보겠습니다. 이 단계에서는 색상 팔레트를 설정하고 그라데이션을 추가하는 방법을 배우게 됩니다.3. 색상 사용3.1 컬러 팔레트 설정주요 기능:색상 팔레트를 설정하여 디자인의 일관성을 유지합니다.사용법:색상 선택기 사용: 요소를 선택한 상태에서 오른쪽 패널에서 색상 선택기를 사용하여 원하는 색상을 선택합니다.색상 스타일 저장: 자주 사용하는 색상을 Styles로 저장하려면 색상 선택기에서 + 아이콘을 클릭하여 스타일을 추가합니다.예시:주 색상을 #FF5733으로 설정합니다.실습:"Welcome to My Website" 텍스트를 선택합니다.오른쪽 패널에서 색상 선택기를 열어 #FF5733 색상을 선택합니다.색상 스타일을 Primary Color로 저장합니다.실습 단계별 스크.. 2024. 6. 8.
[Figma] Figma 주요 기능별 사용법 - 타이포그래피 이제 2단계인 타이포그래피를 진행해보겠습니다. 이 단계에서는 텍스트를 추가하고 텍스트 스타일을 설정하는 방법을 배우게 됩니다.2. 타이포그래피2.1 텍스트 추가주요 기능:텍스트는 웹 페이지의 주요 콘텐츠를 전달합니다.사용법:텍스트 도구 선택: T 키를 눌러 텍스트 도구를 선택합니다.텍스트 상자 생성: 캔버스를 클릭하여 텍스트 상자를 생성하고 텍스트를 입력합니다.예시:웹 페이지의 제목과 본문 텍스트를 추가합니다.실습:Homepage 프레임에서 T 키를 눌러 텍스트 상자를 생성합니다."Welcome to My Website"라고 입력합니다.실습 단계별 스크린샷:텍스트 도구 선택:피그마에서 T 키를 눌러 텍스트 도구를 선택합니다.커서가 텍스트 입력 모드로 변경됩니다.텍스트 상자 생성:Homepage 프레임 안.. 2024. 6. 8.
[Figma] Figma 주요 기능별 사용법 - 레이아웃 디자인 1단계인 레이아웃 디자인을 하나씩 상세하게 진행해 보겠습니다. 이 단계에서는 프레임을 생성하고 그리드를 사용하는 방법을 배우게 됩니다.1. 레이아웃 디자인1.1 프레임 생성주요 기능:프레임은 웹 페이지나 특정 섹션을 정의하는 데 사용됩니다. 각 프레임은 독립된 디자인 공간을 제공합니다.사용법:프레임 도구 선택: F 키를 눌러 프레임 도구를 선택합니다.프레임 추가: 캔버스를 클릭하여 원하는 크기의 프레임을 생성하거나 드래그하여 크기를 조정합니다. 예를 들어, 기본 웹 페이지 크기는 1440x1024 픽셀입니다.프레임 이름 변경: 생성된 프레임의 이름을 변경하려면 왼쪽 레이어 패널에서 해당 프레임을 더블 클릭하고 이름을 입력합니다.예시:웹 페이지의 헤더, 본문, 푸터를 각각 다른 프레임으로 생성합니다.실습:.. 2024. 6. 8.
반응형