cogito30's Web Develope Blog

본문 바로가기

인기글

[Figma] Figma 주요 기능별 사용법 - 아이콘 및 이미지 추가 이제 4단계인 아이콘 및 이미지 추가를 진행하겠습니다. 이 단계에서는 아이콘을 사용하고 이미지를 추가하는 방법을 배워보겠습니다.4. 아이콘 및 이미지4.1 아이콘 사용주요 기능:아이콘은 시각적 요소를 추가하여 디자인을 보완합니다.사용법:아이콘 라이브러리 검색: 피그마 커뮤니티에서 Components 탭을 클릭하고 Icons를 검색하여 무료 아이콘 라이브러리를 찾습니다.아이콘 추가: 원하는 아이콘을 선택하고 프로젝트에 추가합니다.예시:네비게이션 바에 사용할 아이콘을 추가합니다.실습:피그마 커뮤니티에서 Icons를 검색하여 무료 아이콘 세트를 찾습니다.원하는 아이콘을 선택하고 Homepage 프레임에 추가합니다.실습 단계별 스크린샷:아이콘 라이브러리 검색:피그마 상단 메뉴에서 Assets 탭을 클릭합니다.C.. 댓글 0 2024.06.08
[웹 디자인] 24일차: 네비게이션 바 디자인 네비게이션 바란?네비게이션 바(Navigation Bar)는 웹사이트에서 사용자가 주요 페이지나 섹션으로 쉽게 이동할 수 있도록 도와주는 메뉴입니다. 잘 설계된 네비게이션 바는 웹사이트의 가독성과 사용자 경험을 향상시킵니다.네비게이션 바의 기본 요소로고: 웹사이트의 로고를 표시합니다.메뉴 항목: 주요 페이지나 섹션으로 이동할 수 있는 링크입니다.검색 창: 검색 기능을 제공합니다.버튼: 로그인, 회원가입 등의 버튼입니다.네비게이션 바 디자인 예제HTML 구조 Logo Home About Services Contact Login Sign Up Home .. 댓글 0 2024.08.24
[CSS] CSS 예제 그럼, 간단한 HTML과 CSS를 사용하여 연습할 수 있는 예제를 만들어 보겠습니다. 이번 예제에서는 간단한 개인 프로필 카드 레이아웃을 만들어 보겠습니다.HTML 코드먼저 HTML 코드를 작성합니다. John Doe Web Developer Hello! I'm John, a web developer with a passion for creating amazing web experiences. I specialize in front-end development. Twitter LinkedIn CSS 코드이제 HTML 요소에 스타일을 적용할.. 댓글 0 2024.06.08
[웹 디자인] 26일차: 갤러리 및 슬라이더 디자인 갤러리 및 슬라이더란?갤러리와 슬라이더는 웹사이트에서 이미지를 효과적으로 표시하는 방법입니다. 갤러리는 여러 이미지를 그리드 형태로 배열하여 사용자가 쉽게 볼 수 있게 하고, 슬라이더는 이미지를 슬라이드 형태로 전환하여 하나씩 표시합니다.갤러리 디자인HTML 구조 CSS 스타일body { font-family: Arial, sans-serif; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; background-color: #f4f4f4;}.gallery { display: gri.. 댓글 0 2024.08.26
[JavaScript 프로젝트 시리즈] 2일차: JavaScript로 날씨 API를 이용한 날씨 앱 만들기 2. 날씨 API를 이용한 날씨 앱 만들기프로젝트 개요이번 프로젝트에서는 JavaScript와 외부 날씨 API를 사용하여 날씨 정보를 제공하는 간단한 날씨 애플리케이션을 만들어보겠습니다. 사용자는 도시 이름을 입력하여 해당 도시의 현재 날씨 정보를 확인할 수 있습니다.준비물HTMLCSSJavaScriptOpenWeatherMap API (https://openweathermap.org/api)단계 1: OpenWeatherMap API 키 발급OpenWeatherMap 웹사이트(https://openweathermap.org/api)에 가입합니다.API 키를 발급받습니다.단계 2: 기본 HTML 구조 만들기먼저, 날씨 앱의 기본 HTML 구조를 만듭니다. Weather App .. 댓글 0 2024.08.02

최신글

티스토리툴바