CSS 란 무엇입니까?

게시 됨: 2019-03-08

2020년 4월 22일 최종 업데이트

Cascading Style Sheets for the web World Wide Web(www)에서 CSS는 Cascading Style Sheets의 약어입니다. CSS는 마크업 언어, 일반적으로 HTML로 작성된 문서의 표현을 설명하는 데 사용되는 스타일 시트 언어입니다. CSS는 웹 페이지의 레이아웃과 콘텐츠가 화면, 종이 또는 기타 미디어에 표시되는 방식을 결정합니다. CSS는 한 번에 여러 웹 페이지의 레이아웃을 제어하기 때문에 많은 작업을 절약합니다.

문서는 일반적으로 HTML과 같은 마크업 언어를 사용하여 구조화된 텍스트 파일입니다. 문서를 제시한다는 것은 Chrome, Firefox, Opera, Microsoft Edge 등과 같은 웹 브라우저를 통해 컴퓨터 화면에 시각적으로 표시되는 사용 가능한 형식으로 변환하는 것을 의미합니다. 웹 브라우저는 문서에 CSS 규칙을 적용하여 문서가 표시되는 방식에 영향을 줍니다.

이 블로그는 CSS(Cascading Style Sheets)에 대한 일반적인 소개로, CSS(Cascading Style Sheets)가 무엇이며 웹에서 사용되는 용도를 정의합니다. CSS의 훌륭하고 흥미로운 세계에 깊이 들어가지 않고 이에 대한 기본적인 질문에 답하는 소개입니다.

저것! 회사는 전 세계 에이전시에 매력적이고 효과적인 웹 디자인 서비스를 제공합니다. 당사의 화이트 라벨 웹 디자인 서비스에 대해 자세히 알아보고 귀하와 귀하의 클라이언트가 웹 존재를 구축하거나 개선하도록 도울 수 있는 방법에 대해 알아보십시오. 오늘 시작하세요!

CSS는 1994년에 시작되었습니다. W3C에서 만들고 유지 관리합니다. W3C의 CSS 작업 그룹은 사양이라는 문서를 만듭니다. 사양이 논의되고 W3C 회원이 공식적으로 비준한 후에는 권장 사항이 됩니다.

CSS1(Cascading Style Sheets level 1)은 1996년 12월 W3C에서 권장 사항으로 나왔습니다. CSS2는 1998년 5월에 W3C 권장 사항이 되었습니다. 1998년에 시작된 CSS 레벨 3은 아직 개발 중입니다. CSS3는 CSS2 사양과 모듈이라는 새로운 사양의 조합입니다. CSS 사양은 HTML 콘텐츠가 표시되는 방식을 업데이트하도록 설정된 값이 있는 속성 집합으로 구성됩니다.

CSS는 마크업 언어 문서를 표시하는 프로세스를 단순화하기 위해 왔습니다. 다음과 같은 다양한 속성을 제어할 수 있습니다.

  • 텍스트의 색상,
  • 글꼴 스타일,
  • 단락 사이의 간격,
  • 열의 크기와 배치 방법,
  • 배경 이미지 또는 색상,
  • 레이아웃 디자인,
  • 화면 크기에 따른 디스플레이 변화(미디어 쿼리).

CSS를 어떻게 적용합니까?

Cascading Style Sheets for the web HTML 문서에 스타일을 적용하는 네 가지 방법이 있습니다. 가장 일반적으로 사용되는 방법은 HTML 문서 내부의 <style> 요소에 포함된 외부 CSS 파일입니다. 다른 시트 스타일이 지정되면 스타일은 다음과 같은 우선 순위를 가진 새 스타일로 계단식으로 배열됩니다(숫자가 높을수록 덜 중요함).

우선순위 4: 브라우저 기본값

브라우저에는 우리를 위해 미리 작성된 몇 가지 스타일이 포함되어 있습니다. 때때로 우리는 이러한 미리 로드된 스타일을 원하지 않으므로 재정의할 수 있습니다. 최신 CSS 사양을 지원하지 않거나 CSS 속성을 사용하는 자체 형식이 있는 일부 브라우저가 있습니다. 이 때문에 HTML 문서에 CSS를 작성할 때 주의해야 합니다.

That! Company White Label Services

우선순위 3: 외부 스타일 시트 파일

<link> 요소는 HTML 문서에 외부 스타일시트 파일을 포함하는 데 사용할 수 있습니다. 외부 스타일 시트는 확장자가 ".css"인 별도의 텍스트 파일입니다. 이 텍스트 파일 내에서 모든 스타일 규칙을 정의한 다음 <link> 요소를 사용하여 <head>…</head> 태그 내의 HTML 문서에 이 파일을 포함합니다.

 <link rel="stylesheet" type="text/css" href="style.css" />

우선순위 2: HTML 문서에 포함

규칙을 포함하는 <style> 요소를 사용하여 CSS 규칙을 HTML 문서에 넣을 수 있습니다. <style>…</style> 태그는 <head>…</head> 태그 안에 배치됩니다.

 <스타일>
 선택기 {
 재산 가치;
 }
 </스타일>

우선순위 1: HTML 요소의 인라인

모든 HTML 요소의 style 속성을 사용하여 스타일 규칙을 정의할 수 있습니다. 이 규칙은 해당 요소에만 적용됩니다.

 <p>안녕하세요!</p>

CSS 규칙 재정의

HTML 문서에 스타일 시트 규칙을 적용하는 네 가지 방법을 설명했습니다. 다음은 스타일 시트 규칙을 재정의하는 규칙입니다.

모든 인라인 스타일 시트가 가장 높은 우선 순위를 갖습니다. 따라서 <style>…</style> 태그에 정의된 규칙이나 외부 스타일 시트 파일에 정의된 규칙을 재정의합니다.

<style>…</style> 태그에 정의된 모든 규칙은 외부 스타일 시트 파일에 정의된 규칙보다 우선합니다.

외부 스타일 시트 파일에 정의된 모든 규칙은 가장 낮은 우선 순위를 가지며, 이 파일에 정의된 규칙은 위의 두 규칙이 적용되지 않는 경우에만 적용됩니다.

CSS 선택기

CSS 규칙은 브라우저에서 해석된 다음 HTML 문서의 해당 요소에 적용됩니다. 스타일 규칙은 세 부분으로 구성됩니다.

  • Selector -는 요소 이름, ID, 클래스, 속성 등을 기반으로 HTML 요소를 "찾기"(또는 선택)하는 데 사용됩니다.
  • Property -는 CSS의 스타일 유형입니다. 색상, 테두리, 배경, 글꼴, 디스플레이, 텍스트 정렬, 여백, 줄 간격 등이 될 수 있습니다.
  • 값 -는 속성에 할당됩니다. 예를 들어 background-color 속성은 red 또는 green 값을 가질 수 있습니다.

CSS 규칙 구문

CSS 규칙의 구문은 선택기와 속성 및 값 선언으로 구성됩니다.

 선택자 { 속성: 값; }

선택기는 스타일을 지정할 HTML 요소를 가리킵니다.

선언 블록(중괄호)에는 세미콜론으로 구분된 하나 이상의 선언이 있습니다.

각 선언에는 콜론으로 구분된 CSS 속성 이름과 값이 포함됩니다.

CSS 규칙을 작성한 다음 여러 HTML 요소 및 문서에서 동일한 규칙을 재사용할 수 있습니다. CSS를 사용하면 스타일이 지정된 요소에만 적용되는 HTML 인라인 태그 속성을 매번 작성할 필요가 없습니다. 하나의 CSS 규칙을 작성하고 해당 태그 요소의 모든 항목에 적용합니다. 따라서 코드가 적을수록 페이지가 더 빨라집니다.

외부 또는 포함된 스타일 규칙을 사용하면 HTML 문서의 변경 및 유지 관리가 간단합니다. 스타일 규칙만 변경하면 HTML 문서의 모든 요소가 자동으로 업데이트됩니다. CSS를 사용하면 미디어 쿼리를 통해 여러 장치 화면 크기에 액세스할 수 있습니다. 미디어 쿼리를 사용하면 두 가지 이상의 장치 유형에 맞게 HTML 문서를 최적화할 수 있습니다. 동일한 HTML 문서를 사용하여 다른 버전의 웹 페이지를 표시할 수 있습니다.

더 읽어보기

다시 말하지만, 이 게시물은 CSS와 HTML 문서를 제어하는 ​​데 사용할 수 있는 다양한 것에 대한 독자의 관심을 거의 열어주지 않습니다. 웹에서 매우 강력하고 매우 중요한 부분입니다. 더 자세히 알아볼 수 있는 몇 가지 주요 리소스는 다음과 같습니다.

W3C 학교

MDN

CSS 튜토리얼