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

[스파르타코딩클럽 웹개발 기초] 1주차-2 / 로그인 페이지, 추억앨범 만들기

COCO_develop 2024. 4. 4. 22:29

CSS 기초

  • CSS=꾸미기 - 꾸밀 대상을 지칭하는 것이 중요
  • <style> : <head>와 </head> 사이
  • mytitle라는 클라스를 가리킬 때 : .mytitle{ } - 중괄호!

 

자주 쓰는 CSS

<div> : 구역

{  }

 - width, height, color, text-align(텍스트 정렬) 등 (외울 필요X)

 -padding(안쪽 여백), margin(바깥쪽 여백), border-radius(모서리 둥글게)

로그인 페이지에 이미지 넣기

***

구역을 확인하기 어려울 땐 background-color로 색을 넣어 확인해보기

margin: 위 아래 오른쪽 왼쪽;  (auto=끝까지 밀기)

가운데 정렬=양쪽 여백이 동등

class=wrap으로 div 가운데 정렬

*줄 맞춤 : Alt+Shift+F

 

구글 폰트 적용

https://fonts.google.com/

 

Browse Fonts - Google Fonts

Making the web more beautiful, fast, and open through great typography

fonts.google.com

Filters - Language : Korean

Get font

<>Get embed code - web - @import

<style></style> 태그 안에 묶인 코드만 복사 → style 태그 안에 넣기 → ';' 꼭 확인하기

CSS class 탭의 코드 복사 → 전체 적용(*{ })

Gugi 폰트 적용

부트스트랩

https://getbootstrap.com/

부트스트랩 버튼

https://getbootstrap.com/docs/5.3/components/buttons/

 

프로젝트-추억앨범

(1)

div안의 내용을 가운데 정렬

 

버튼 꾸미기

mytitle 안의 button 지정- 따로 class이름 지을 필요X

 

head 부분
body부분- mycards div는 부트스트랩에서 복사한 것
위 코드의 결과

(2)

(1)에서 추가된 부분-head
(1)에서 추가된 부분-body (부트스트랩에서 복사)
위 코드로 추가된 부분
프로젝트의 최종 결과

 

 

 

 

 

스파르타코딩클럽

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

1주차 1-7 ~ 1-12