HTML & Bootstrap을 이용한 나만의 앨범 사이트 제작

1. HTML 구조

• <meta charset="UTF-8">를 통해 웹페이지의 문자 인코딩을 설정하고, <meta name="viewport">를 사용해 반응형 디자인을 지원.
• <link> 태그를 사용하여 Bootstrap을 불러와 손쉽게 스타일을 적용.
• 부트스트랩 카드 컴포넌트를 활용하여 앨범 형태의 디자인을 구현.

2. CSS 커스텀

• Google Fonts (Dongle 폰트) 적용으로 스타일 맞춤.
• 배경 이미지와 flexbox를 활용해 타이틀 영역에 이미지와 텍스트를 중간 정렬.
• box-shadow, border-radius를 적용해 폼 요소 및 버튼 디자인을 세련되게 조정.

3. Bootstrap 활용

• Grid System: row-cols-1 row-cols-md-4 클래스를 사용해 앨범 카드의 레이아웃을 유연하게 배치.
• Card 컴포넌트: 이미지와 텍스트를 조화롭게 배치한 앨범 카드 UI 제작.
• Form 컨트롤: form-floating 클래스로 깔끔한 입력 폼 생성.

4. 기억할 포인트

• 폰트 및 스타일링: 사용자 경험을 고려한 폰트 및 레이아웃 설정이 중요.
• 반응형 디자인: viewport와 Bootstrap의 Grid 시스템을 활용하면 다양한 화면 크기에 맞게 사이트를 자동으로 조정 가능.
• 버튼 디자인: Bootstrap의 btn 클래스를 활용하여 다크 및 라이트 테마로 버튼 디자인 차별화.
• 이미지 처리: Unsplash와 같은 무료 이미지를 활용하여 시각적인 부분에서 매력을 더할 수 있음.

index.html

6.1 kB