1. CSS의 형태
CSS는 Selector와 Property로 구성되어 있다.
-Selector의 형태 : Tag 또는 #ID 또는 .class 뒤에 {}를 붙인다.
-Property의 형태 : "이름: 값;"
+ Tag와 ID, Class 등을 한번에 지정할 수도 있다. ex) h1 #grid { ... }
한꺼번에 여러개를 지정하기 위해서는 다음과 같이 쓰면 된다. Selector (id, class, tag){ ... }
2. CSS 써보기!
<style> Tag 내부에 CSS를 작성하여 html text들과 연결해주면 된다.
+ 이렇게 <style> Tag를 적용하면, html 페이지가 여러개일 경우, <style> Tag를 html 페이지 파일마다 똑같이 붙여넣어줘야 한다. 페이지가 엄청 많다면? 사람이 할 짓이 아니다...
그래서 html 페이지 파일처럼 .css 파일을 만들어 주고, html 파일에 link를 걸어주는 방식을 사용한다.
link는 아래와 같이 작성한다.
<link href = "파일명.css" rel="stylesheet">
w3school 에서는 'rel' attribute(속성)과 value의 쓰임새를 아래와 같이 표현한다.
'link' Tag는 해당 파일과 외부 파일을 연결시켜준다. (외부 링크에 연결하는 <a> Tag와는 다름)
'rel' attribute는 해당 파일에 다른 외부 파일들의 관계를 정의해준다.
rel = "stylesheet" 라는 것은 해당 css 파일을 html의 문서 디자인(style)을 정의해주는 파일로 사용하겠다는 것이다.
※ stlyesheet로 작성된 파일 내부에 <style> Tag를 쓸 필요가 없다. 아니, 써서는 안된다.
3. CSS의 다양한 활용방식
Text
color
: color는 글자의 색깔을 바꿔주는 css code이다.
'color : 원하는 색깔'의 형태로 작성할 수도 있고, 'color: rgb( ***, ***, ***)', 'color: #******(#HEX값)의 형태로 작성할 수도 있다.
HEX는 RGB를 16진법의 형태로 작성해준 것이다.
font-size : 글자의 크기
절대적인 크기, 상대적인 크기를 지정하는 방법이 있다.
절대적인 방법은 px(pixel), pt(point)이 있다.
상대적인 방법은 em, %가 있는데, %는 부모 요소의 font-size를 기준으로 해서 적용한다.
부모 요소가 없는 경우 body를 기준으로 해서 적용하게 된다.
1em은 100%, 2em은 200%라고 보면 된다.
font-family : font type은 크게 5가지로 나뉜다.
1. Serif : Times New Roman, 궁서체
2. Sans-Serif : Arial, 굴림체
3. Monospace : courier, Courier New = 각 문자가 같은 너비를 가짐
4. Cursive : Comic Sans MS, Monotype corsiva
5. Fantasy : Impact, Haettenschweiler
적용은 font-family: Arial; "Times New Roman", serif; 등으로 작성한다.(띄어쓰기가 있는 경우 ""를 해줘야함)
웹페이지의 사용자 컴퓨터에 Arial font부터 설치되어 있는지 검색하여 적용하고, 안되면 제 2순위, 3순위 font를 사용하게 하는 것이다.
>>-a 라고 입력하면 -apple-system 이라고 뜨며, Enter로 입력하면 기본 글씨체 양식을 자동기입할 수 있다.
■사용자에게 font 자체를 설치하게 하는 방법도 있다.
구글폰트 : fonts.google.com
구글폰트의 안내와 같이, <head> tag 내부에 linke source를 붙여넣으면 된다.
fonts.google.com/earlyaccess
아직 정식 출시되지 않은 베타서비스 font로써, 여기서는 한국어 글꼴을 다운받을 수 있다.(Korean 검색)
font-weight : 글자 굵기 (보통 100~900, 100단위로만 입력가능, 400이 보통, 700은 bold 수준, 폰트와 브라우저 등에 따라 정해진 weight가 있다.)
→ 각 font는 license를 잘 살펴보고 사용해야 한다.
■ 컴퓨터에 설치된 font를 사용할 수도 있다.
@font-face{
src: url("../folder_name/otf_file_name") font-family: "이름지정"
}
이라고 작성해서 font-family를 지정해주면 된다.
src: url 에서 ../는 상위 폴더로 가기 위한 것이다.(이미지 찾을때도 동일)
■ text의 align과 줄높이(line-height)
text-align : right, center, left가 있다. 속성이 없으면 left 정렬이다.
→ 단순 <a> tag 처럼 block 형태가 아니라 text만 있는 경우, text가 차지하는 공간이 딱 text만큼만이기 때문에 text-align이 잘 안될 수 있다. 이런 경우 class를 지정해주어 text가 차지하는 공간을 확보해주어야 한다.
text-decoration : underline, overline, line-through 가 있다.
none으로 지정 시에 모든 줄을 삭제해주므로, 보통 <a> tag의 link의 underline을 지우고 싶을때 많이 쓴다.
line-height : line height = font-size + leading이라고 보면된다.
'Programming-[Frontend] > HTML,CSS' 카테고리의 다른 글
| CSS / Transition, Transform, Animation, Media Query (0) | 2020.07.03 |
|---|---|
| CSS / Flexbox, Selector(Pseudo-selector), States (0) | 2020.07.02 |
| CSS / 기본 / Box, Block, Align, Position (0) | 2020.06.18 |
| HTML / 기본 / Tag, ID, Class, Comment (0) | 2020.06.12 |
| HTML, CSS / 기본 개념 (0) | 2020.06.12 |
