코드스테이츠 프론트엔드과정 3 [CSS 기초] - 3일차

CSS란?

 

HTML로 구성한 구조의 외부와 내부를 꾸미는 역할을 담당한다.

 

웹 문서의 전반적인 스타일을 미리 저장해 둔 스타일시트이다.

문서 전체의 일관성을 유지할 수 있고, 세세한 스타일 지정의 필요를 줄어들게 하였다. -두산백과 디피디아

 

간단히 CSS 문법 구성에 대해 올려보았다.

CSS문법 구성

 

                                    우선 올라와있는 이러한 코드들을 코드펜을 이용하여 완전한 문장구조가 아니더라도 

Open in default browser처럼 코드를 실행할 수 있었다.

css 기초 코드

 

<HTML에 CSS파일을 추가하는 코드>

 

 

                               우선 작성된 HTML에 CSS를 더할 때 ID와 class를 구별해놓는게 기초이자 필수이다.

 

id는 고유값 1개이어야 한다.

같은 분류일 경우 class로 분류

 

 

ID	class
#으로 선택	.으로 선택
한 문서에 단 하나의 요소에만 적용	동일한 값을 갖는 요소 많음
특정 요소에 이름을 붙히는데 사	스타일의 분류(classification)에 사용

 

css 기초 속성들

color	글자의 색상을 변경하는 속성
font	글꼴(google fonts에서 설치 or 링크를 이용하여 사용 가능)
font-size	글꼴의 크기를 변경(한글처럼 기본의 글자 크기가 지정됨)
font-weigt	글자의 굵기 변
text-decoration	밑줄, 가로
letter-spacing	자간
line-height	행

이 속성들은 필수라고 생각하고 암기하자

---

 

 

 

https://fonts.google.com/

Google Fonts

이 사이트로 들어가서 마음에 드는 폰트를 다운받을 수 있는데,

필자는 처음이라 한참을 헤맸기에 추가 설명을 할 것이다.

google fonts site

가장 대표적인 방법을 말하자면

숫자와 같이 원하는 폰트에 들어가서 1번 숫자가 써있듯이 원하는 글자크기나 굵기를 선택 후

2번과 3번을 복사하여 첨부하면 된다.

글 말단에 작성한 코드를 첨부할 예정이니 모르겠으면 보고 활용!

 

글꼴 크기, 화면크기 등을 다룰 때 크기의 단위가 매우중요하다.

 

절대 단위: px, pt 등

상대 단위: %, em, rem, ch, vw, vh 등

 

주로 절대단위는 기기나 브라우저 사이즈 등의 환경에 영향을 받지 않는 절대적인 크기로 정하는 경우,

일반적인 경우 상대 단위인 rem을 추천한다.

---

흔히 박스모델이라고 불리우며 CSS위 기본 구조틀이다.

---

추가적으로 알아야 할 것들은 셀렉터가 있다.

전체 셀렉	* {}	문서의 모든 요소를 선택
태그 셀렉터	h {}, div {}, section {}	같은 태그명을 가진 모든 요소를 선택 복수로도 선택가
ID 셀렉터	#only {}	#id로 입력하여 선택
class 셀렉	.widget {}, .center {}	. 같은 class를 가진 모든 요소를 선택
attribute 셀렉	a[href] {}, p[id=only] {}	(모두 암기할 필요X)

자식 셀렉터	header > div {}	첫 번째로 입력한 요소의 바로 아래 자식인 요소를 선택
후손 셀렉터	header div {}	첫 번째로 입력한 요소의 후손 선택
형제 셀렉터	section ~ p {}	같은 부모 요소를 공유하면서, 첫 번째 입력한 요소 뒤에 오는 두 번째 입력한 요소를 모두 선택
인접 형제 셀렉	section + p {}	같은 부모 요소를 공유하면서, 첫 번째 입력한 요소 바로 뒤에 오는 두 번째 입력한 요소를 선택

 

block, inline, inline-block의 차이점 content-box, border-box차이점에

대해서는 아직 부족하여 더 공부할 예정이다.

 

 

html에는

<link rel = "stylesheet" href ="style.css> ------------추가

 

css만 추가적으로 만들었다.

style.css

 

완성본