CSS 속성(opacity, 글꼴, 문자, 배경)

go min seok·2022년 3월 16일

목록 보기

12/12

1. opacity

요소의 투명도

0~1 사이의 소수를 값으로 넣음

1 : 불투명 (기본값)

0 ~ 1 : 0부터 1사이의 소수점 숫자

2. 글꼴

font-style : 글자의 기울기

normal : 기울기 없음 기본값

italic : 이텔릭체

oblique : 기울어진 글자

font-weight : 글자의 두께 (가중치)

normal, 400 기본 두께

bold, 700 : 두껍게

bolder : 상위(부모) 요소보다 더 두껍게

lighter : 상위(부모) 요소보다 더 얇기

100 ~ 900

font-size : 글자의 크기

16px 기본 크기

단위 : px, em, rem 등 단위로 지정

%, smaller, larger, xx-small ~ xx-large

line-height : 한 줄의 높이, 행간과 유사

normal 기본 값

숫자 : 요소의 글꼴(px..) 크기의 배수로 지정 (자주 씀)

단위 : px, em ,rem...

% : 요소의 글꼴 크기의 비율로 지정
font-size: 16px;
line-height: 32px;
/* line-height: 2; */ (16px * 2배 = 32px)
/* line-height: 200%; */ (16px * 2배 = 32px)
font-size가 변경될 수 있어서 값으로 숫자를 사용하는게 좋다
px은 font-size가 변경되면 값을 변경해야한다

font-family: 글꼴1, 글꼴2,...글꼴계열;

글꼴 (서체) 지정
ex) 속성값 sans-serif ( 고딕체 계열 )

정리

글자 기울기를 지정할 때 사용하는 속성과 값은?
font-style: italic;
글자를 두껍게 지정할 때 사용하는 속성과 값은?
font-weight: 700; or font-weight: bold;
고딕체 계열을 의미하는 속성 값은?
sans-serif
line-height 속성을 사용할 때 권장하는 단위는?
배수 ( line-height: 1.4;)

3. 문자

color : 글자의 색상

rgb(0,0,0) 검정색 (기본값)

색상 : 기타 색상

text-align : 문자의 정렬 방식

left : 왼쪽 정렬 (기본값)

right : 오른쪽 정렬

center : 가운데 정렬

justify : 양쪽 정렬

text-decoration : 문자의 장식(선)

none : 장식 없음 (기본값)

underline : 밑줄

overline : 윗줄

line-through : 중앙선

text-indent : 문자 첫 줄의 들여쓰기

0 : 들여쓰기 없음 (기본값)

단위 : px, em, rem...

%

양수는 들여쓰기
음수는 내여쓰기

정리

문자를 수평 정렬하는 속성은?
text-align
문자를 들여쓰는 속성은?
text-indent
text-decoration 속성의 기본값은?
none

4. 배경

background-color : 요소의 베경 색상

transparent 투명함 (기본값)

색상

background-image : 요소의 배경 이미지 삽입

none (기본값)

url("경로") : 이미지 경로
HTML
<body>
  <div></div>
</body>
CSS
div {
  width: 200px;
  height: 200px;
  background-color: orange;
  background-image: url('https://s.pstatic.net/static/newsstand/2020/logo/dark/0604/055.png');
}
이미지를 출력하면 바둑판처럼 반복해서 나타난다
background-repeat으로 이미지 반복을 제어

background-repeat : 요소의 배경이미지 반복

repeat : 이미지를 수직, 수평 반복 (기본 값)

repeat-x : 이미지를 수평 반복

repeat-y : 이미지를 수직 반복

no-repeat : 반복 없음
background-repeat: no-repeat;
background-position : 요소의 배경 이미지 위치

0% 0% 기본값

방향
top, bottom, left, right, center 방향

단위
px, em, rem...
background-position: bottom right;
background-position: 100px 30px;
background-size : 요소의 배경 이미지 크기

auto : 이미지의 실제 크기 (기본값)

단위 : px, em, rem.....

cover : 비율을 유지, 요소의 더 넓은 너비에 맞춤

contain : 비율을 유지, 요소의 더 짧은 너비에 맞춤

backgrond-attachment : 요소의 이미지 스크롤 특성

scroll : 이미지가 요소를 따라서 같이 스크롤 (기본값)

fixed : 이미지가 뷰포트에 고정, 스크롤 X