푸들푸들

[스파르타코딩클럽 웹개발 기초] 숙제 / HTML, CSS를 활용하여 화면 만들기 본문

스파르타코딩클럽/웹개발 기초

[스파르타코딩클럽 웹개발 기초] 숙제 / HTML, CSS를 활용하여 화면 만들기

COCO_develop 2024. 4. 25. 15:47

**스네이크 케이스 : 모든 단어를 소문자로 표기하고, 단어를 언더바로 연결하는 방법

 

1. Bootstrap - jumbotron

main_title → jumbotron 복사한 부분(복사한 후 class명과 내용 바꿈)
배경 이미지 적용(이미지 주소는 기본 코드)
main_title(스파르타 푸드파이터)만 다른 폰트 적용
⇊ ⇊이처럼 위쪽과 왼쪽에 여백두기⇊ ⇊
header 안에 padding 추가

***padding: top bottom left right;
    padding: 0 100px; → top, bottom=0 left, right=100px
***width, margin, padding 등 style 편집은
    먼저 페이지에서 마우스 우클릭-검사-style에서 숫자 고쳐가며 확인해보고 고치기

2. Bootstrap - cards

Bootstrap 복사 후 내용 변경(이미지 링크 적용 전)

 

3.구글 폰트

폰트 전체 적용

 
 

4. 완성

최종 완성

 


스파르타코딩클럽
[왕초보] 코딩이 처음이어도 쉽게 배우는 웹개발 A to Z
1주차 ~ 3주차 숙제