CSS기초/구글 웹폰트 사용법

CSS기초

HTML 부모-자식 구조

html 태그 안에 있는 요소들의 계층 구조 파악이 중요.

태그가 변경되면 안에 들어있는 내용물도 모두 영향을 받음

빨간색 div를 가운데로 옮기면 초록, 파란 div도 같이 가운데로 이동.

초록색 div의 글씨색을 변경하면 "나는 버튼1"의 글씨색도 변경.

CSS 사용 방법

1. 꾸미려는 태그에 class="이름" 작성

2. <style> 태그 안에 .이름{꾸밀 내용} 작성

자주 쓰이는 CSS

h1, h5, background-image, background-size, background-position
color, width, height, border-radius, margin, padding

tip박스 형태가 등장하면 div 태그로 생각하자!

tip양쪽 여백이 같다 = 가운데에 위치한다

margin: 요소의 외부 여백, 시계 방향으로 top, right, bottom, left의 순서로 값을 지정

padding: 요소의 내부 여백, margin과 동일

padding: 20px 20px 20px 20px; // 상 우 하 좌
padding: 30px 0px 0px 0px = padding-top: 30px //같은 의미

만들어 보기

1. 구역을 꾸밀 땐 배경색(background-color)을 줘서 구역이 보이는 상태 작업

2. 모서리 둥글게 border-radius (단위: px)

3. 글자 가운데 정렬: text-align:center

4. 여백 주기

5. 이미지추가 및 정리 (3줄이 같이 사용)

  background-image: url(이미지 주소);
  background-position: center;
  background-size: cover;

6. 가운데로 옮기기 (박스를 씌우고 margin으로 양쪽 여백 잡아주기) (1번 내용 상기)

margin: 0px auto 0px auto;

구글 웹폰트 사용 방법

https://fonts.google.com/?subset=korean

1. 폰트 선택

2. 긁씨 굵기 선택

3. @import로 변경하고, <style> 태그 내용과 font-family 전체 복사

4. <style> 태그의 맨 위에 붙여 넣기

CSS 파일 분리하기

여러 웹페이지에서 동일한 스타일을 적용할 수 있어 일관성 있는 디자인 유지 가능

CSS 파일을 수정하면 모든 웹페이지에서 한 번에 적용되므로 유지보수가 쉬움

1. <style> 태그 내용 복사 후 .css 파일에 붙여 넣기

2. <head> 안에서. css파일 불러오기 </head>

<link rel="stylesheet" type="text/css" href = "(css파일이름).css">

Fetch연습2 (0)	2023.02.20
서버-클라이언트 통신(GET,POST)/JSON/Fetch연습 (0)	2023.02.20
JavaScript 기초/split/JQuery기초/append (0)	2023.02.20
부트스트랩/github에 파일 업로드 (0)	2023.02.19
웹 브라우저 원리/ HTML 기초 (0)	2023.02.19

SuminStory