Frontend Mentor - Social Links Profile 클론 제작기

Frontend Mentor에서 제공하는 디자인 시안을 바탕으로 Social Links Profile을 클론 제작했습니다.
HTML/CSS만으로 구성되어 있으며, 반응형 UI와 접근성(WCAG 기준)을 고려해 제작하였습니다.

---

완성 이미지

---

프로젝트 개요

• 제작 목적: 시멘틱 HTML 구조 및 반응형 카드 레이아웃 학습
• 기술 스택: HTML5, CSS3 (Flexbox, Media Queries), Google Fonts (Inter)
• 디자인 기준 해상도:
  • Mobile: 375px
  • Desktop: 1440px

---

사용 기술

기술	설명
Semantic HTML	main, ul, footer 등의 시멘틱 태그 사용
Flexbox	카드 중앙 정렬 및 수직 정렬 레이아웃 구성
Media Queries	Mobile-first 기반 반응형 대응
Google Fonts	Inter 웹폰트를 적용해 UI 디자인 일관성 유지

---

폴더 구조

social-links-profile/
├── index.html
├── style.css
├── assets/
│   └── images/
│       ├── avatar-jessica.jpeg
│       └── favicon-32x32.png
│   └── design/ (JPG reference images)
└── README.md

---

배우는 점

• Flexbox와 vh를 활용한 수직/수평 정중앙 정렬 방법
• max-width와 padding을 활용한 모바일-데스크탑 대응 UI 구성
• 반응형 웹의 시작은 Mobile-first 접근으로 설계해야 함을 체득
• Google Fonts 적용 시 Fallback 폰트를 함께 설정해 UX 향상
• HTML 내 시맨틱 태그 활용의 중요성 및 WCAG 접근성 기본 개념

---

GitHub Repository

GitHub Repository