반응형 타이포그래피3 [웹 디자인] 19일차: 타이포그래피 디자인 타이포그래피란?타이포그래피는 텍스트의 배열과 스타일링을 의미하며, 웹 디자인에서 중요한 역할을 합니다. 좋은 타이포그래피는 가독성을 높이고, 사용자 경험을 향상시키며, 전체적인 디자인의 일관성을 유지하는 데 도움이 됩니다.웹 폰트 사용웹 폰트를 사용하면 웹 페이지에서 다양한 글꼴을 사용할 수 있습니다. Google Fonts와 같은 서비스를 통해 쉽게 웹 폰트를 추가할 수 있습니다. Google Fonts 사용 예제HTML: CSS:body { font-family: 'Roboto', sans-serif;}타이포그래피 기본 속성글꼴 패밀리 (font-family)글꼴 패밀리를 설정하여 텍스트의 스타일을 지정합니다.예제:body { font-family: 'Arial', sans-serif;}글꼴 크기.. 2024. 8. 19. [Figma] Figma 주요 기능별 사용법 - 타이포그래피 이제 2단계인 타이포그래피를 진행해보겠습니다. 이 단계에서는 텍스트를 추가하고 텍스트 스타일을 설정하는 방법을 배우게 됩니다.2. 타이포그래피2.1 텍스트 추가주요 기능:텍스트는 웹 페이지의 주요 콘텐츠를 전달합니다.사용법:텍스트 도구 선택: T 키를 눌러 텍스트 도구를 선택합니다.텍스트 상자 생성: 캔버스를 클릭하여 텍스트 상자를 생성하고 텍스트를 입력합니다.예시:웹 페이지의 제목과 본문 텍스트를 추가합니다.실습:Homepage 프레임에서 T 키를 눌러 텍스트 상자를 생성합니다."Welcome to My Website"라고 입력합니다.실습 단계별 스크린샷:텍스트 도구 선택:피그마에서 T 키를 눌러 텍스트 도구를 선택합니다.커서가 텍스트 입력 모드로 변경됩니다.텍스트 상자 생성:Homepage 프레임 안.. 2024. 6. 8. [Figma] Figma 개요 웹 디자인에 필요한 주요 기능은 다음과 같습니다:레이아웃 디자인: 페이지 구조를 정의하고 콘텐츠를 배치하는 작업타이포그래피: 텍스트 스타일을 설정하여 가독성을 높이는 작업색상 사용: 브랜드 아이덴티티를 반영하는 색상 팔레트를 사용하는 작업아이콘 및 이미지: 시각적 요소를 추가하여 디자인을 보완하는 작업네비게이션 설계: 사용자가 쉽게 탐색할 수 있도록 메뉴 및 링크를 설계하는 작업반응형 디자인: 다양한 디바이스에서 잘 보이도록 디자인하는 작업프로토타입: 사용자 경험을 테스트하기 위해 인터랙티브 모형을 만드는 작업피그마 사용법1. 레이아웃 디자인프레임 생성: F 키를 눌러 새로운 프레임을 생성합니다. 프레임은 페이지의 특정 섹션을 정의하는 데 사용됩니다.그리드 사용: 프레임을 선택하고 오른쪽 패널에서 Lay.. 2024. 6. 8. 이전 1 다음 반응형