프론트엔드 - CSS 기본.

✔ css

1. css 기본.

◾ css 개요.

• Cascading Style Sheets의 약자.
  • 웹 페이지 표현을 위해 스타일 규칙을 모아 놓은 문서.
• 스타일 사용 이유
  • 웹 문서의 내용과 상관없이 디자인만 바꿀 수 있음.
    • https://www.w3schools.com/css/css_intro.asp
  • 다양한 기기에 맞게 탄력적으로 바뀌는 문서(반응형 웹)

◾ css 기본 문법.

• 선택자 {속성 : 값}
  • {} : 선언 블록.
  • [속성 : 값] : 선언.
    • 속성 : 바꿀 요소 (color, font, width, height, border, ...)
    • 값 : 속성에 적용할 값.
  • 여러 선택자는 comma(,)로 구분.
  • 여러 속성은 semi-colon(;)으로 구분.
  • 주석 : /* 내용 */

◾ 외부 스타일 시트 적용.

• <link> : 외부 스타일 시트 적용(연결).
  • rel : HTML 페이지와 링크된 파일간의 관계
  • href : CSS file 경로.
• @import : 스타일 시트 최상단에 위치.
  • @import url("file path"), @import "file path"
  • <link>와 달리 media 속성을 통해 보여지는 미디어 타입 설정.

◾ 내부 스타일 시트 적용.

• <style> : 내부 스타일 시트 적용
  • <style> 내부에 CSS 규칙 작성.
  • 외부 스타일 시트보다 우선 적용.

◾ 인라인 스타일 적용.

• 개별 element 마다 스타일 지정 : 유지보수가 힘듦.
• 우선순위 : 인라인 > 내부 > 외부

2. CSS 이해.

• 선택자(selector) : HTML 문서에서 CSS 규칙 적용 타겟
  • 일반 선택자, 복합 선택자, 가상 선택자 등

◾ 일반, 복합 선택자.

• 일반 선택자 : 전체 선택자, 타입 선택자, 클래스 선택자, ID 선택자.
• 복합 선택자 : 자식 선택자, 하위 선택자, 인접 형태 선택자, 일반 형제 선택자.

선택자	의미	사용법	CSS
전체 선택자	HTML 문서 모든 element 선택	*{}	2
타입 선택자	매칭되는 element 선택	E1, E2, E3 {}	1
클래스 선택자	class 속성 값과 매칭되는 element 선택	.class-name {}	1
ID 선택자	id 속성 값과 매칭되는 element	#id-name {}	1
하위 선택자	하위 element 선택	E1 E2{}	1
자식 선택자	직속 하위 element 선택	E1 > E2{}	2
인접 형제 선택자	인접 형제 관계인 element	E1+E2{}	2
일반 형제 선택자	형제 관계인 element 선택	E1~E2{}	3

◾ 가상 클래스 선택자.

선택자	의미
:link	방문하지 않은 링크 선택	1
:visited	방문한 링크 선택	1
:hover	지정된 요소에 마우스가 올라간 경우	1
:active	요소가 활성화 된 경우	1
:focus	요소에 포커스를 가질 경우	2
:first-child	부모의 첫 번째 자식	2
:last-child	부모의 마지막 자식	3
:nth-child(n)	n번째 자식	3
:enabled	enabled인 경우	3
:disabled	disabled인 경우	3
:checked	checked인 경우	3

◾ 가상 엘리먼트 선택자.

선택자	의미
::after	지정된 요소 뒤에 content 추가	2
::before	지정된 요소 앞에 content 추가	2
::first-letter	지정된 요소 첫 번째 문자 선택	1
::first-line	지정된 요소 첫 번째 라인 선택	1
::selection	사용자에 의해 선택된 요소의 위치 선택(드래그)	3