CSS는 "Cascading Style Sheet"의 약자입니다.
CSS는 색상, 레이아웃 및 글꼴을 포함하여 웹 페이지의 표현을 설명하는 언어입니다.
CSS는 클래스(class) 기반 CSS, 태그(tag) 기반 CSS, ID 기반 CSS의 세 가지 유형입니다.

다음은 CSS의 다양한 변형입니다.
CSS1, CSS2, CSS2.1, CSS3, CSS4

다음은 CSS의 장점 중 일부입니다.
-, 접근성
-, 다중 장치 호환성
-, 페이지가 빠르게 로드됩니다.
-, 유지 보수가 쉽습니다.
-, 오프라인 브라우징

CSS 선택자는 스타일을 지정하려는 요소를 선택하는 데 사용되는 패턴입니다.
CSS 선택기 테스터를 사용하여 다양한 선택기를 보여줍니다.

CSS에는 여러 유형의 선택기가 있습니다.
-, CSS에는 여러 유형의 선택기가 있습니다.
-, CSS ID 선택기
-, CSS 범용 선택기
-, CSS 요소 선택기
-, CSS 그룹 선택기 및 기타 선택기 등...

웹 페이지에 CSS를 통합하는 세 가지 방법이 있습니다.
-, 인라인 메서드(또는) CSS
-, 내부 메소드(또는) CSS
-, 외부 메서드(또는) CSS

Inline css : html 문서 본문의 태그에 작성되는 css를 인라인 css라고 합니다.
Internal css : head 태그의 html 문서 내에서 내부적으로 작성되는 css를 내부 css라고 합니다.
External css : 외부에서 작성되고 head 태그 내에서 연결되는 css를 External css라고 합니다.

Tag Base : html의 태그를 신청할 때 사용하는 css를 tag base css라고 합니다. 태그 기반 CSS는 태그(body,img, ul, li,p,table,h1 ~ h6..etc)로 표시됩니다.
Class Base : html의 요소를 재정의하는 데 사용되는 css를 class base css라고 하며 이름 앞에 점(.)을 붙입니다. 클래스 기반 CSS 파일은 단일 문서를 여러 번 사용합니다. 예: ( .sample{color:#000;} )
ID Base : 블록 요소를 생성하는 데 사용되는 CSS를 ID 기반 CSS라고 합니다. html 없이 테이블(셀)을 생성하는 대안입니다. 이름 앞에 (#)로 표시됩니다. ID 기반 css 파일은 단일 문서의 단일 시간에 사용하고 있습니다. 예: #헤더, #배너 등

Padding : 패딩은 콘텐츠와 테두리 사이의 공간을 정의하는 데 사용됩니다. (경계 내부)
Margin : 여백은 테두리 외부의 공간입니다. (경계 외부)
CSS 개별 패딩 및 여백 속성을 사용하여 위쪽, 오른쪽, 아래쪽 또는 왼쪽과 같은 요소의 다른 면에 대해 다른 패딩과 여백을 쉽게 지정할 수 있습니다.

CSS 상자 모델은 기본적으로 모든 HTML 요소를 감싸는 상자입니다.
여백, 테두리, 패딩 및 실제 콘텐츠로 구성됩니다.

자식 선택자는 부모 요소에 스타일을 적용하는 데 사용할 수 있으며 이는 자식 요소로 내려갑니다.
아래는 예시입니다 - body > input{ color: #FFFFF1; }

<link> 태그와 title 속성을 사용하여 여러 스타일 시트를 결합할 수 있습니다.
제목 값을 사용하면 하나 이상의 <link> 태그를 서로 연결할 수 있습니다.
결합 후 해당 테마는 결합된 것으로 적용되고 사용자에게 표시됩니다.

구문은 다음과 같습니다.
<link rel= “text/css” href="bootstrap.css" title="combined">
<link rel= “text/css” href="style.css" title="combined">
<link rel= “text/css” href="slider.css" title="combined">

스타일 시트를 결합하는 또 다른 방법은 <style> 태그에 사용할 수 있는 가져오기를 사용하는 것이며 구문은 다음과 같이 주어질 수 있습니다.
@import url(site_url);

유사 요소를 사용하면 요소 자체가 아닌 요소의 일부를 사용할 수 있습니다.
CSS가 작성되는 전체 블록에 사용되는 블록 수준 요소에 적용됩니다.
이렇게 하면 요소의 하위 부분이 단락 및 제목처럼 스타일이 지정될 수 있습니다.

예를 들어:
selector:pseudo-element {property:value;}
p: first-line {text-transform: lowercase;}

CSS2와 CSS3의 주요 차이점은 CSS3이 모듈이라고도 하는 여러 섹션으로 나뉩니다.
CSS2와 달리 CSS3 모듈은 많은 브라우저에서 지원됩니다.

의사 요소는 일부 선택기에 특수 효과를 추가하는 데 사용됩니다.
CSS는 HTML 마크업에 스타일을 적용하는 데 사용됩니다.
문서에 대한 추가 마크업이나 스타일 지정이 불가능한 경우에는 CSS에서 의사 요소(pseudo-element)라고 하는 기능을 사용할 수 있습니다. 실제 문서를 방해하지 않고 문서에 추가 마크업을 허용합니다.

차원 속성은 다음과 같이 정의할 수 있습니다.
-, Height
-, Max-height
-, Max-width
-, Min-height
-, Min-width
-, Width

HTML 요소의 위치를 ​​지정하기 위해 CSS를 사용하는 동안 겹침이 발생할 수 있습니다.
Z 인덱스는 겹치는 요소를 지정하는 데 도움이 됩니다. 양수 또는 음수일 수 있는 숫자이며 기본값은 0입니다.

CSS의 주석은 /* 및 */ 로 추가할 수 있습니다.

따옴표는 URL에서 선택 사항이며 단일( ' ' ) 또는 이중( " " )일 수 있습니다.

트위닝은 두 번째 이미지로 발전하는 첫 번째 이미지의 모양을 얻기 위해 두 이미지 사이에 중간 프레임을 만드는 프로세스입니다.
주로 애니메이션을 만드는 데 사용됩니다.

CSS 카운터는 검사자가 변수가 사용된 횟수를 추적하는 CSS 규칙에 의해 증가될 수 있는 변수입니다.

두 개 이상의 지정된 색상 사이에 부드러운 변환을 표시할 수 있는 CSS의 속성입니다.
CSS에는 두 가지 유형의 그라디언트가 있습니다.
-, Linear Gradient
-, Radial Gradient

HTML 웹 페이지에서 사용되는 flexbox의 여러 속성이 있습니다.
-, flex-direction
-, flex-wrap
-, flex-flow
-, justify-content
-, align-items
-, align-content

CSS에서 상자 모델은 모든 HTML 요소를 묶는 상자이며 여백, 테두리, 패딩 및 실제 콘텐츠와 같은 기능을 포함합니다.
상자 모델을 사용하여 요소 주위에 테두리를 추가할 수 있는 권한을 얻고 요소 사이의 공간을 정의할 수도 있습니다.

font-awesome과 같은 아이콘 라이브러리를 사용하여 HTML 웹페이지에 아이콘을 추가할 수 있습니다.
인라인 HTML 요소에 주어진 아이콘 클래스의 이름을 추가해야 합니다. (<i> 또는 <span>) . 아이콘 라이브러리의 아이콘은 CSS로 사용자 정의할 수 있는 확장 가능한 벡터입니다.

navigation bars을 사용하여 일반 HTML 페이지를 사용자별 및 보다 동적인 웹 페이지로 만들 수 있습니다.
기본적으로 링크 목록이므로 <ul> 및 <li> 요소를 사용하는 것이 완벽합니다.
ul { list-style-type: none; margin: 0; padding: 0; }

important 선언은 일반 선언보다 더 중요한 선언으로 정의됩니다.
실행하는 동안 이러한 선언은 덜 중요한 선언을 재정의합니다.
예를 들어 중요한 선언이 있는 두 명의 사용자가 있는 경우 선언 중 하나가 다른 사용자의 선언을 재정의합니다.
예를 들어 :
Body {background: #FF00FF !important; color: blue}
이 본문에서 배경은 색상보다 중요도가 더 큽니다.

인라인 요소(Inline element)에는 너비와 높이를 설정하는 요소가 없으며 줄 바꿈도 없습니다.
예 : em, strong 등
블록 요소(Block element) 사양:
그들은 줄 바꿈이 있습니다.
컨테이너를 설정하여 너비를 정의하고 높이도 설정할 수 있습니다. 인라인 요소에서 발생하는 요소를 포함할 수도 있습니다.

CSS 스프라이트 사용의 이점은 다음과 같습니다.
작은 이미지 세트를 포함하는 큰 이미지가 있는 기술입니다.
이러한 이미지는 CSS를 사용하여 여러 이미지로 분해할 수 있습니다.
큰 이미지나 페이지를 더 빨리 로드하여 많은 시간을 절약할 수 있습니다.
HTTP 요청을 줄입니다.
또한 웹 사이트의 레이아웃과 디자인에 유연합니다.
CSS 스프라이트의 개념은 다양한 작은 이미지를 하나의 이미지로 결합하기 때문에 웹 페이지의 로딩 시간을 줄이는 데 사용됩니다. 그것은 http 요청의 수와 로딩 시간을 줄입니다.

미디어마다 대소문자를 구분하지 않으므로 속성이 다릅니다.
-, Aural – 사운드 신디사이저 및 음성용
-, Print – 인쇄 시 내용 미리보기 제공
-, Projection - 프로젝터에 CSS를 투영합니다.
-, Handheld - 휴대용 장치를 사용합니다.
-, Screen - 컴퓨터 및 노트북 화면.

색상은 두 가지 방법으로 지정할 수 있습니다.
-, 색상은 6개의 문자, 즉 16진수 색상 코딩으로 표시됩니다. 숫자와 문자의 조합으로 #이 앞에 옵니다.
예: g {색상: #00cjfi}
-, 빨강, 초록, 파랑의 혼합은 색을 나타냅니다. 색상 값도 지정할 수 있습니다.
예 : rgb(r,g,b):
이 유형에서 값은 정수 0과 255 사이에 있을 수 있습니다. rgb(r%,g%,b%): 빨간색, 녹색 및 파란색 백분율이 표시됩니다.

-, Font-style
-, Font-variant
-, Font-weight
-, Font-size/line-height
-, Font-family
-, Caption
-, Icon