[코딩 자율학습 HTML + CSS + 자바스크립트] 2. CSS로 웹 페이지 꾸미기 - "6장 CSS 필수 속성 다루기"

6.1 CSS의 특징 살펴보기

1. CSS 특징

 1) 기본 스타일 시트는 웹 브라우저에 기본으로 내장된 스타일 시트를 말함.

 2) 적용 우선순위는 같은 태그에 스타일 속성이 중복으로 작성 됐을 때, 어느 속성을 적용할지 결정하는 기준. 적용 우선순위는 개별성 규칙의 점수에 따라 계산 됨.

선택자	예	점수
전체 선택자	*	0
태그 선택자	div, p, h1	1
가상 요소 선택자	::before, ::after	1
클래스 선택자	.box, .title	10
가상 클래스 선택자	:hover, :visited, :link	10
아이디 선택자	#title, #main	100
인라인 선택자	style="color:red"	1000

 3) 상속은 부모 요소의 속성을 자식 요소가 물려받는 것을 말함.

 4) CSS에는 절대단위: Px / 상대단위: em, rem, %, vw, vh와 같은 다양한 단위가 있음.

 5) 색상 표기법에는 키워드 표기법과 RGB 표기법, HEX 표기법이 있음

 

---

6.2 텍스트 속성으로 텍스트 꾸미기

2. 텍스트 속성

속성명	설명
font-family	글꼴 지정
font-size	텍스트 크기 지정
font-weight	텍스트 굵기 지정
font-style	글꼴 스타일 지정
font-variant	영문 소문자를 크기가 작은 대문자로 변경
color	텍스트 색상 지정
font-align	텍스트 정렬 지정
font-decoration	텍스트 꾸밈 지정
letter-spacing	자간 지정
line-height	행간 지정

 

{ font-family: <글꼴1>, <글꼴2>, ... <글꼴 유형>; }
{ font-size: <크기>; }
{ font-weight: <숫자 표기법:100, 200> | <키워드 표기법: normal, bold, bolder>; }
{ font-style: <normal(기본형태), italic(이탤릭체), oblique(기울임꼴)>; }
{ font-variant: <normal(텍스트 변환하지 않음), small-caps(텍스트를 크기가 작은 대문자 변환>; }
{ color: <속성값(red)>; }
{ font-align: <left(왼쪽), center(중앙), right(오른쪽), justify(양쪽)>; }
{ font-decoration: none(텍스트 장식 모두 지움), line-through(중간 관통 선), overline(위에 선), underline(아래 선);>
{ letter-spacing: normal | <크기>;} 
{ line-height: normal | <숫자> | <퍼센트> | <크기> ;}

 

 

---

6.3 박스 모델을 구성하는 속성 다루기

3. 박스 모델

박스 모델은 모든 태그가 사각형 모양으로 구성됐다는 개념. 박스 모델은 border, padding, content 영역으로 구성되며 각 영역마다 영역을 제어하는 속성이 있음.

영역	속성
margin	margin, margin-top, margin-right, margin-botton, margin-left
border	border, border-top, border-right, border-bottom, border-left
padding	padding, padding-top, padding-right, padding-bottom, padding-left
content	width, height

 

---

6.4 배경 속성으로 배경 설정하기

4. 배경 속성

요소의 배경을 제어하는 속성

{ background-color: <색상값>; }
{ background-image: url('이미지 경로'); }
{ background-repeat: norepeat | repeat-x | repeat-y | repeat(가로 세로 방향 반복) | round(반복하되 이미지가 요소에 딱 맞도록 크기 자동 조절) | space(잘리지 않도록 반복); }
{ background-size: auto | cover | contain | <너비높이>; }
{ background-position: x y <공통>; }
{ background-attachment:local | scrll | fixed; }
{ background <color 속성값> <image 속성값> <repeat 속성값> <position 속성값/size 속성값> <attachment 속성값>; }

속성	설명
background-color	배경색 지정
background-image	배경에 이미지 삽입
background-repeat	배경 이미지의 반복 여부 지정
background-size	배경 이미지의 크기 지정
background-position	배경 이미지의 위치 지정
background-attachment	배경 이미지를 스크롤할 때의 모습 결정
background	모든 배경 속성을 한 번에 사용할 수 있는 단축 속성

 

---

6.5 위치 속성으로 HTML 요소 배치하기

5. 위치 속성

요소를 기본 흐름에서 벗어나 원하는 곳에 배치하기 위한 속성

속성	속성값
position	static, relative, absolute, fixed, sticky
float	none, left, right
clear	left, right, both

 

---

6.5 전환 효과 속성 적용하기

6. 전환 효과 속성

어떤 속성의 값이 다른 값으로 변경되는 것을 전환이라고 하며, 이런 효과를 지정하는 속성들을 전환 효과 속성이라고 함.

속성	설명
transition-property	전환 효과의 대상 속성명을 값으로 지정
transition-duration	전환 효과가 진행되는 시간 지정
transition-delay	전환 효과가 지연되는 시간 지정
transition-timing-funtion	전환 효과 속도를 지정
transition	모든 전환 효과 속성을 한 번에 지정할 수 있는 단축 속성

 

---

6.7 애니메이션 속성으로 전환 효과 제어하기

7. 애니메이션 속성

애니메이션 속성은 HTML 요소에 적용된 스타일을 다른 스타일로 부드럽게 전환함. 전환 효과 속성과 비슷하지만, 세부적으로 더 많은 기능을 내포

속성	설명
@keyframes	애니메이션 전체 속성 정의
animation-name	애니메이션 지정할 키 프레임명 지정
animation-duration	애니메이션 지속 시간 지정
animation-delay	애니메이션 지연 시간 지정
animation-fill-mode	애니메이션 실행 전과 종료 후의 상태 지정
animation-iterator-count	애니메이션 반복 횟수 지정
animation-play-state	애니메이션 진행/정지 상태 정의
animation-direction	애니메이션 진행 방향 지정
animation-timing-function	애니메이션 속도 지정
animation	모든 애니메이션 관련 속성 지정

 

 

6.8 변형 효과 적용하기

8. 변형 효과 속성

 1) 어떤 요소에 위치 이동, 회전, 확대, 축소, 기울이기와 같은 효과를 지정해 변형하는 속성

 2) transform 속성을 사용하며 속성값에 변형 효과를 나타내는 함수 지정

함수	설명
translate(x, y)	요소를 현재 위치에서 x와 y만큼 이동
translateX(n)	요소를 현재 위치에서 n만큼 x축으로 이동
translateY(n)	요소를 현재 위치에서 n만큼 y축으로 이동
scale(x, y)	요소를 x와 y만큼 확대 또는 축소
scaleX(n)	요소를 n만큼 x축으로 확대 또는 축소
scaleY(n)	요소를 n만큼 y축으로 확대 또는 축소
skew(xdeg, ydeg)	요소를 x축과 y축으로 xdeg, ydeg(각도)만큼 기울임
skewX(deg)	요소를 deg(각도)만큼 x축방향으로 기울임
skewY(deg)	요소를 주어진 deg(각도)만큼 y축방향으로 기울임
rotate(deg)	요소를 deg(각도)만큼 회전함

 

 

---

 

 

출처

https://www.gilbut.co.kr/book/view?bookcode=BN003377

코딩 자율학습 HTML + CSS + 자바스크립트