스파르타플릭스 및 나만의 앨범 제작
·
Web development(입문)
배운 내용 요약1. 스파르타플릭스 사이트 제작HTML, CSS, JavaScript, JQuery를 활용해 영화 리뷰 사이트 구축.Firebase 연동을 통해 데이터를 클라우드에 저장하고, 실시간으로 웹페이지에 불러옴.Github Pages에 사이트를 배포하여 실제 웹에서 동작하도록 구현.소스코드 : 스파르타플릭스 소스코드.2. 나만의 앨범 사이트 제작JavaScript 및 Firebase 연동으로 앨범 데이터를 클라우드에 저장 및 로드.소스코드 : 나만의 앨범 소스코드.학습한 내용1. JavaScript 기초 및 활용기초 문법 학습: 변수 선언, 함수 정의, 조건문, 반복문 등.Fetch API를 통해 HTTP 요청을 보내고 데이터를 가져오는 방식 학습.조건문을 활용해 Fetch 요청에 특정 조건 적용..
HTML & Bootstrap을 이용한 나만의 앨범 사이트 제작
·
Web development(입문)
1. HTML 구조를 통해 웹페이지의 문자 인코딩을 설정하고, 를 사용해 반응형 디자인을 지원. 태그를 사용하여 Bootstrap을 불러와 손쉽게 스타일을 적용.부트스트랩 카드 컴포넌트를 활용하여 앨범 형태의 디자인을 구현.2. CSS 커스텀Google Fonts (Dongle 폰트) 적용으로 스타일 맞춤.배경 이미지와 flexbox를 활용해 타이틀 영역에 이미지와 텍스트를 중간 정렬.box-shadow, border-radius를 적용해 폼 요소 및 버튼 디자인을 세련되게 조정.3. Bootstrap 활용Grid System: row-cols-1 row-cols-md-4 클래스를 사용해 앨범 카드의 레이아웃을 유연하게 배치.Card 컴포넌트: 이미지와 텍스트를 조화롭게 배치한 앨범 카드 UI 제작.Fo..