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

1. CSS의 특징 살펴보기

기본 스타일 시트/ 적용 우선순위와 개별성/ 상속/ 단위/ 색상 표기법

 

기본 스타일 시트

• 웹 브라우저에 기본으로 내장
• 웹 브라우저에 표시되는 요소의 글꼴, 크기, 색상, 굵기, 문단 설정 등

---

적용 우선순위와 개별성

• 단계적 적용: 같은 태그에 여러 스타일 적용되도 단계적으로 적용 돼 마지막에 하나만 적용
  -> CSS의 개별성 규칙에 따라 결정
  
  • 기본 스타일 시트보다 사용자가 정의한 스타일 속성이 우선 적용
  • 같은 태그 요소의 선택자 여러 개 -> 한 속성만 적용

<개별성 규칙의 점수>

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

---

상속(inherit)

• 부모 요소에 적용된 스타일을 자식 요소가 그대로 물려받아 적용되는 현상
• 모든 속성이 전부 상속 X

---

단위

• 절대 단위: 어떤 환경이라도 동일한 크기로 보이는 단위
  • px(pixel): 모니터의 화면을 구성하는 사각형 1개의 크기
• 상대 단위: 웹 브라우저의 창 크기에 따라 상대적으로 결정되는 단위
  • %: 해당 속성의 상위 요소 속성값에 상대적인 크기 가짐
  • em: 부모 요소의 텍스트 크기에 상대적인 크기 가짐
  • rem: html 태그의 텍스트 크기에 상대적인 크기 가짐
  • vw: 뷰포트의 너비 기준으로 상대적인 크기 가짐
  • vh: 뷰포트 높이 기준으로 상대적인 크기 가짐

---

색상 표기법

• 키워드 표기법: 색상의 영문명을 속성값으로 사용하는 방법
• RGB(Red, Green Blue) 색상 표기법: 256개 숫자(0~255)로 표기
• HEX 표기법: Red, Gree, Blue에 해당하는 값을 각각 16진수로 변환 -> 00~ff로 나타내는 표기법

---

2. 텍스트 속성으로 텍스트 꾸미기

font-family/ font-size/ font-weight/ font-style/ font-variant/ color/ text-align
/ text-decoration/ letter-spacing/ line-height

font-family 속성

• 글꼴을 지정
• 속성값: 글꼴명, 쉼표(,)로 구분하고 1개 이상 나열
  • 한글이나 공백 있는 글꼴명은 큰따옴표("")로 감쌈
• (필수) 글꼴 유형(generic-family): 글꼴의 형태
  • serif: 삐침이 있는 명조 계열의 글꼴
  • sans-serif: 삐침이 없고 굵기가 일정한 고딕 계열의 글꼴
  • monospace: 텍스트 폭과 간격이 일정한 글꼴
  • fantasy: 화려한 글꼴
  • cursive: 손으로 쓴 것 같은 필기체 계열의 글꼴
• font-family:<글꼴1>, <글꼴2>, ... <글꼴 유형>;

---

font-size 속성

• 텍스트 크기 변경하고 싶을 때 사용
• 일반적인 텍스트 크기: 16px
• font-size:<크기>;

---

font-weight 속성

• 텍스트의 굵기 지정
• 속성값: 숫자 표기법과 키워드 표기법 사용할 수 있음
  • 숫자 표기법: 숫자 100 단위로 텍스트 굵기를 표현하는 방법, 100~900
  • 키워드 표기법: lighter, normal(400), bold(700), bolder
• font-weight:<숫자 표기법>|<키워드 표기법>

---

font-style 속성

• 글꼴의 스타일 지정
• 속성값: normal/ italic/ oblique(기울임꼴)
• font-style:<속성값>;

---

font-variant 속성

• 영문 텍스트를 크기가 작은 대문자로 변경
• 속성값: normal/ small-caps
• font-variant:<속성값>;

---

color 속성

• 텍스트의 색상 지정
• color:<속성값>;

---

text-align 속성

• 텍스트 정렬
• 속성값: left/ center/ right/ justify
• text-align:<속성값>;

---

text-decoration 속성

• 텍스트를 꾸며 주기 위해 사용
• 속성값: none/ line-through/ overline/ underline
• text-decoration:<속성값>;

---

letter-spacing 속성

• 자간을 조절
  자간: 글자 사이의 간경
• letter-spacing:normal<크기>;

---

line-height 속성

• 텍스트 한 줄의 높이를 지정
• 속성값: normal/ 숫자(font-size값에 숫자를 곱한 값)/ 퍼센트(font-size값에 비율 곱한 값)/ 크기
• line-height:normal<속성값>;

---

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

margin 영역/ border 영역/ padding 영역/ content 영역/ 박스 모델의 성격과 display 속성

 

박스 모델(box model): 모든 HTML 요소가 사각형 박스로 둘러 쌓여 있음

• margin: 요소의 외부 여백
• border: 요소의 테두리(경계선)
• padding: 요소의 내부 여백
• content: 요소의 내용

margin 영역

• 가장 외부에 있는 영역
• 요소의 외부 여백 담당
• margin-top/ margin-right/ margin-bottom/ margin-left:<크기>;
• margin 겹침 현상(margin collapse): 인접한 margin 값이 둘 중 더 큰 값으로 통일되는 것

---

border 영역

• 요소의 테두리(경계선)
• border-top/ border-right/ border-bottom/ border-left
• border:<border-width><border-style><color>;
  • 여러 속성값이 복합적으로 사용
  • border-width 속성: 테두리 굵기
  • border-style 속성: 테두리 모양
    • border-style:<속성값>;
    • none/ hidden/ solid(실선)/ double(이중실선)/ dotted(점선)/ dashed(파인 것처럼)
      / groove(테두리가 튀어나온 것처럼)/ ridge(테두리가 튀어나온 것처럼)
      / inset(요소가 파인 것처럼)/ outset(요소가 튀어나온 것처럼)

---

padding 영역

• 요소의 내부 여백 담당
• padding-top/ padding-right/ padding-bottom/ padding-left:<크기>;

---

content 영역

• width와 height
  • width
    • content 영역의 너비
    • width:<크기>;
  • height
    • content 영역의 높이
    • height:<크기>;
• box-sizing
  • box-sizing:<속성값>;
  • content-box: width, height 속성의 적용 범위를 content 영역으로 제한
  • border-box: width, height 속성의 적용 범위를 border 영역으로 제한

---

박스 모델의 성격과 display 속성

• 블록 성격
  • 요소의 너비가 콘텐츠 유무 상관없이 항상 가로 한 줄 다 차지하는 것
  • 무조건 줄 바꿈 
  • ex. hn, p, div
  • width, height, margin, padding
• 인라인 성격 
  • 요소의 너비를 콘텐츠 크기만큼 차지
  • 웹 브라우저의 수평 공간이 남아 있으면 한 줄로 배치
  • ex. a, span, strong
  • margin, padding
• 인라인 블록 성격
  • 너비가 콘텐츠의 크기만큼 차지(인라인 성격)하지만, 그 외 성격은 블록 성격
  • ex. img
  • width, height, margin, padding

---

4. 배경 속성으로 요소의 배경 설정하기

background-color/ background-image/ background-repeat/ background-size
/ background-position/ background-attachment/ background 속성으로 한 번에 지정

background-color

• 요소의 배경에 색상을 넣을 수 있음
• 속성값: 색상값
• background-color:<색상값>;

---

background-image

• 이미지 넣을 수 있음
• 속성값: 삽입할 이미지의 경로를 url() 함수로 지정
• background-image:url('이미지 경로');
• 주의사항
  1. 요소의 배경 크기 반드시 있어야 함
  2. 이미지 크기가 요소의 배경 크기와 맞지 않으면 어색하게 보임

---

background-repeat

• 이미지 반복 설정
• background-repeat:<속성값>;
  • no-repeat: 이미지 반복 X
  • repeat-x: 이미지 가로 방향으로 반복
  • repeat-y: 이미지 세로 방향으로 반복
  • repeat: 이미지 가로 세로 방향으로 반복
  • round: 반복, 이미지가 요소에 딱 맞도록 크기 자동 조절
  • space: 이미지가 잘리지 않도록 반복

---

background-size

• background-size:auto|cover|contain|<너비 높이>;
  • auto: 이미지 크기 유지
  • cover: 가로 세로 비율 유지, 크기 확대하거나 축소해 요소의 배경에 채움
  • contain: 가로 세로 비율 유지, 이미지가 배경 요소 안에 들어가도록 크기 확대하거나 축소
  • <너비 높이>: 이미지 크기 직접 지정

---

background-position

• 삽입하려는 이미지의 위치 결정
• background-position:<x 위치><y 위치>;

위치	속성값	설명
x	left, center, right	x축(가로) 방향의 위치
y	top, center, bottom	y축(세로) 방향의 위치
공통	px, rem, em, %	위치를 직접 지정

---

background-attachment

• 요소에 삽입된 이미지를 스크롤할 때, 이미지의 작동 방식 결정
• background-attachment:<속성값>;
  • local: 모두 스크롤
  • scroll: 요소 - 고정/ 웹 브라우저 - 스크롤
  • fixed: 모두 고정

---

background 속성으로 한 번에 지정

background:<color 속성값> <image 속성값> <repeat 속성값> <position 속성값/size 속성값> <attachment 속성값>;

---

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

position/ float/ clear

 

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

position 속성

• HTML 요소를 기본 흐름에서 벗어나 좌푯값에 따라 배치할 때 사용
• positon:<속성값>;
  • static: 요소를 기본 흐름에 따라 배치
  • relative: 요소를 기본 흐름에 따라 배치, 좌표 속성 사용할 수 있음
    
    • top/ right/ bottom/ left -> 기준으로 좌푯값 지정
    • 기준점: 요소의 왼쪽 위 모서리
  • absolute: 요소를 기본 흐름에서 벗어나 절대적인 좌표 위치에 따라 배치
    • 기준점: 웹 브라우저의 왼쪽 모서리 위
  • fixed: 요소를 기본 흐름에서 벗어나 절대적인 좌표 위치에 따라 배치, 스크롤 해도 고정
  • sticky: 요소를 static 값처럼 기본 흐름에 따라 배치, 지정한 좌표의 임계점에 이르면 fixed 값처럼 화면에 고정
• z-index 속성: z 위치를 결정
  • z-index:<정숫값>;

---

float 속성

• 적용 대상을 공중에 띄워 배치 -> 대상이 있던 위치를 빈 공간으로 인식
• width 속성 지정 X -> 요소가 가지고 있는 콘텐츠만큼 너비 자동 조정
• float:<속성값>;
  • none/ left/ right
• 이미지 요소와 텍스트 요소 배치
• 블록 성격 요소를 인라인 성격 요소처럼 배치
• 해당 자식 요소를 부모 요소가 제대로 인식 X -> 해결: clear, overflow 속성

---

clear 속성

• float 속성을 해제할 때 사용하는 속성
• clear:<속성값>;
  • left/ right/ both

---

6. 전환 효과 속성 적용하기

전환/ transition-property/ transition-duration/ transition-delay/ transition-timing-function
/ transition 속성으로 한 번에 지정

 

전환(transition): CSS에서 한 요소에 적용된 스타일 속성값을 다른 속성값으로 변하게 하는 것

transition-property

• 전환 효과를 적용할 대상 속성을 지정
• transition-property:<속성값>;
  • none/ all

---

transition-duration

• 전환 효과의 지속 시간
• 속성값: 초 단위
• transition-duration:<시간>;

---

transition-delay

• 전환 효과의 발생을 지연
• 속성값: 지연하고 싶은 시간

---

transition-timing-function

• 전환 효과의 진행 속도 지정
• 속성값: 정해진 키워드, cubic-bezier() 함수
  • linear - 처음과 마지막 속도 일정
  • ease - 처음에 속도 점점 빨라지다 중간부터 점점 느려짐
  • ease-in - 처음에 속도 느리지만 완료될 때까지 점점 빨라짐
  • ease-out - 처음에 속도 빠르지만 완료될 때까지 점점 느려짐
  • ease-in-out - 처음에 속도 느리지만 점점 빨라지다가 점점 느려짐
  • cubic-bezier(p1, p2, p3, p4) - 사용자가 정의한 속도로 진행

---

transition 속성으로 한 번에 지정

transition:<property>, <duration>, <timing-function>, <delay>;

---

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

키 프레임/ animation-name/ animation-duration/ animation-delay/ animation-fill-mode
/ animation-iterator-count/ animation-play-state/ animation-direction/ animation 속성으로 한 번에 지정

 

키 프레임

• 애니메이션이 진행되는 과정에서 특정 시점에서 발생해야 하는 여러 작업 정의하는 문법
• (필수) 시작과 종료에 해당하는 최소 2개 시점에 대한 스타일 정의
• 특정 시점: 0% ~ 100% (시간에 대한 퍼센트) -> from, to 키워드로 대체 가능

@keyframes <키 프레임명> {
	0%{/* CSS */}
    n%{/* CSS */}
    100%{/* CSS */}
}

---

animation-name

• 특정 요소에서 적용할 키 프레임명 지정
• animation-name:<키 프레임명>;

---

animation-duration

• 애니메이션을 지속할 시간
• 속성값: 초(s)나 밀리초(ms) 단위의 시간
• animation-duration:<지속 시간>;

---

animation-delay

• 애니메이션 실행을 지연
• 속성값: 초나 밀리초
• animation-delay:<지연 시간>;

---

animation-fill-mode

• 애니메이션이 실행되기 전과 후 스타일 지정
• ex. 애니메이션이 끝나도 원래 상태로 돌아가지 않고 종료된 시점 상태 유지
• 속성값
  • none: 실행 전/ 후
  • forwards: 실행 전/ 후
  • backwords: 실행 전/ 후
  • both: 실행 전/ 후

---

animation-ilterator-count

• 실행 횟수 조절
• (기본) 1회 실행하고 종료
• animation-iteration-count:<횟수>;

---

animation-play-state

• 애니메이션의 재생 상태 지정
• 속성값: paused/ running

---

animation-direction 속성

• 애니메이션의 진행 방향 지정
• animation-direction:<속성값>;

---

animation 속성으로 한 번에 지정

animation:<name><duration><timing-function><delay><iteration-count><direction><fill-mode><play-state>;

---

8. 변형 효과 적용하기

transform/ transform-origin

 

요소 자체를 변하게 하려면 (요소의 크기 변경, 위치 이동, 회전)

-> 변형(transform) 효과 속성 이용

transform 속성

• 요소에 특정 변형 효과 지정
• transform:<함수>;
  • translate(x, y) - 요소를 현재 위치에서 x(x축), y(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만큼 회전

<!-- 예시 -->
div:hover {
	/* 오른쪽으로 100px, 아래쪽으로 200px 이동 */
	transform:translate(100px, 200px); 
    /* x축 방향으로 2배 확대 */
    transform:scale(2);
}

---

transform-origin 속성

• 변형 기준점 변경
  • x축- left/ center/ right
  • y축 - top/ center/ bottom

<!-- 예시 -->
.box:hover {
	/* 오른쪽으로 회전 */
	transform:rotate(30deg);
    /* 왼쪽 위 모서리를 기준점으로 지정 */
    transform-origin:top left;
}

---

9. 웹 폰트와 아이콘 폰트 사용하기

웹 폰트

• 인증된 기관 또는 회사에서 웹 서버에 올려 놓은 폰트
• (+) 시스템에 글꼴이 없어도 모든 사용자가 같은 글꼴 사용할 수 있음
  -> 사용자가 웹 서버에서 폰트 참조해서 사용
• ex. 구글 폰트

<style>
	@import url('https://fonts~');
</style>

---

아이콘 폰트

다양한 아이콘을 이미지 파일(jpeg, png)가 아니라 CSS를 적용하는 방식으로 간단하게 사용

ex. Font Awesome, Material Icon

<!-- fontawesome -->
<head>
  <title>Font Awesome</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" 
  crossorigin="anonymous" referrerpolicy="no-referrer">
</head>

---

출처

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