반응형 이미지3 [웹 디자인] 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.. 2024. 8. 26. [웹 디자인] 4일차: HTML 링크와 이미지 링크HTML에서 링크는 사용자가 다른 페이지나 리소스로 이동할 수 있도록 합니다. 링크는 요소를 사용하여 정의됩니다.하이퍼링크: 앵커 태그로, 링크를 정의하는 요소입니다.href: 하이퍼링크 참조 속성으로, 이동할 URL을 지정합니다.예제:Example Website링크의 다양한 속성target: 링크를 클릭할 때 열리는 방법을 지정합니다._self: 현재 창에서 열림 (기본값)_blank: 새 창이나 새 탭에서 열림_parent: 부모 프레임에서 열림_top: 최상위 프레임에서 열림예제:Open in new tabtitle: 링크에 대한 추가 정보를 제공합니다. 사용자가 링크 위에 마우스를 올렸을 때 툴팁으로 표시됩니다.예제:Example Website링크 텍스트와 이미지텍스트 링크: 링크 텍스트로 .. 2024. 8. 4. [Figma] Figma 개요 웹 디자인에 필요한 주요 기능은 다음과 같습니다:레이아웃 디자인: 페이지 구조를 정의하고 콘텐츠를 배치하는 작업타이포그래피: 텍스트 스타일을 설정하여 가독성을 높이는 작업색상 사용: 브랜드 아이덴티티를 반영하는 색상 팔레트를 사용하는 작업아이콘 및 이미지: 시각적 요소를 추가하여 디자인을 보완하는 작업네비게이션 설계: 사용자가 쉽게 탐색할 수 있도록 메뉴 및 링크를 설계하는 작업반응형 디자인: 다양한 디바이스에서 잘 보이도록 디자인하는 작업프로토타입: 사용자 경험을 테스트하기 위해 인터랙티브 모형을 만드는 작업피그마 사용법1. 레이아웃 디자인프레임 생성: F 키를 눌러 새로운 프레임을 생성합니다. 프레임은 페이지의 특정 섹션을 정의하는 데 사용됩니다.그리드 사용: 프레임을 선택하고 오른쪽 패널에서 Lay.. 2024. 6. 8. 이전 1 다음 반응형