CSS 문법

이 튜토리얼에서는 스타일 시트에서 CSS 규칙을 정의하는 방법을 배울 것입니다. 이를 통해 CSS 속성을 설정하여 HTML 요소의 스타일을 설정할 수 있습니다. 다른 HTML 요소는 다른 CSS 속성을 설정할 수 있습니다. CSS 속성은 CSS 규칙으로 조직될 수 있습니다. CSS 규칙은 여러 CSS 속성을 모아 모든 속성을 CSS 규칙이 맞춤된 HTML 요소에 적용합니다

CSS 문법 이해하기

CSS 스타일 시트는 규칙의 집합으로 구성되며, 이 규칙들은 웹 브라우저에 의해 해석되어 문서의 해당 요소에 적용됩니다. 예를 들어, 문서의 각 요소(예: 문단, 제목 등)에 적용됩니다

CSS 규칙은 주로 두 부분으로 구성되며, 하나는 선택자, 다른 하나는 하나 이상의 선언입니다:

선택자는 CSS 규칙이 HTML 페이지의 어떤 요소에 적용되는지 지정합니다

또한 블록 내의 선언은 요소가 웹 페이지에서 어떤 형식을 가지는지 결정합니다. 각 선언은 속성과 값을 포함하며, 이 값들은 콜론(:)으로 구분됩니다:로 구분되며, 선언 그룹은 괄호로 감싸집니다;를 끝으로 하며, 선언 그룹은 괄호로 감싸집니다{}를 가질 수 있습니다.

이 속성은 변경하려는 스타일 속성입니다. 이들은 글꼴, 색상, 배경 등일 수 있습니다. 각 속성은 값이 있으며 예를 들어 color 속성은 value blue또는#0000FFetc.

h1　{color:blue;text-align:center;}

CSS가 더 읽기 쉽게 만들기 위해 각 행에 하나의 선언을 배치할 수 있습니다. 예를 들어:

h1　{
　　　　color:　blue;
　　　　text-align:　center;
　　　}

위의 예제에서h1은 선택자입니다.color와text-align은 CSS 속성이며, 주어진blue（h1태그 내 텍스트의 색상을 파란색으로 합니다)와center(h1태그 내 텍스트를 가운데 정렬합니다)이属性的 상응 값입니다.

CSS 주석을 작성하다

주석은 일반적으로 소스 코드를 더 이해하기 쉽게 만들기 위해 추가됩니다. 다른 개발자(또는 앞으로 소스 코드를 편집할 때)가 사용하려는 CSS를 이해하는 데 도움이 됩니다. 주석은 프로그래머에게 중요하지만, 브라우저는 무시합니다.

CSS 주석은 시작됩니다/*로 끝납니다*/예를 들어:

/*　This　is　a　CSS　comment　*/
h1　{
　　　　color:　blue;
　　　　text-align:　center;
}
/*　This　is　a　multi-다중 행을 지나는 CSS 주석　*/
p　{
　　　　font-size:　18px;
　　　　text-transform:　uppercase;
}

CSS 코드의 일부를 주석으로 만들어 디버깅할 수 있습니다. 예를 들어:

h1　{
　　　　color:　blue;
　　　　text-align:　center;}
/*p　{
　　　　font-size:　18px;
　　　　text-transform:　uppercase;}
*/

CSS에서의 대소문자 구분

CSS 속성 이름과 많은 속성 값은 대소문자를 구분하지 않습니다. 하지만 CSS 선택자는 대소문자를 구분합니다. 예를 들어:.maincontent와.mainContent두 개의 다른 class 클래스 선택자입니다. 대소문자를 구분합니다.

따라서, 보안을 위해, CSS 규칙의 모든 구성 요소가 대소문자를 구분한다고 가정해야 합니다.

내부다음 장중국에서, 여러 가지 유형의 CSS 선택자를 배울 것입니다.