[스파르타코딩클럽 웹개발 기초] 2주차-1 / x플릭스 만들기

프로젝트-스파르타플릭스 만들기

(1)상단 만들기

폰트 등 이전 파일에서 미리 복사 해두기

 

부트스트랩- jumbotron 검색

마우스 우측 버튼-검사- 해당부분 마우스 우측 버튼-Edit as HTML-복사

제목과 상세정보 수정

 

꾸미기를 위해 div로 새로 감싸고 새로 class 명명하기

 

부트스트랩으로 버튼 모양 바꾸기

Outline buttons-Light

 

상단바 만들기 : 부트스트랩-Examples-Headers

배경색 검은색으로 바꾸기

body는 한개뿐이니 .body 할 필요X

*태그 이름{}

 .이름표 이름{}

head 부분

body 부분

여기까지 결과

(2) 카드 붙여넣기

mycards class 만들기 *4장

부트스트랩에서 복사

style 수정

위의 결과

(3)포스팅 박스 만들기

부트스트랩 floating label, select, buttons 이용

 

*style을 바꿀 때 어느 부분은 바꿔야하는지 헷갈릴땐 '해당 페이지-마우스 우측-검사'를 통해 어느 부분인지 확인

element.style부분을 고쳐보며 미리 확인

 

posting box의 배경색, 글자색 변경, 기록하기 버튼 크기 맞추기

posting box 최종

스파르타플릭스 최종

 

---

스파르타코딩클럽

[왕초보] 코딩이 처음이어도 쉽게 배우는 웹개발 A to Z

2주차 2-1 ~ 2-4