CSS를 사용하여 코드를 작성하기 전에 마스터해야 할 첫 번째 주제는 구문입니다. syntax 단어 위협적으로 들릴지 모르지만 단순히 코드를 작성하기 위해 CSS에서 사용하는 규칙을 나타냅니다. 이러한 규칙은 표준이므로 다른 사람의 코드를 쉽게 읽을 수 있습니다.
CSS 구문의 가장 중요한 두 부분은 선택자와 선언 블록입니다. 선택기는 웹 페이지에서 스타일을 적용하려는 요소를 가리키는 데 사용되며 선언 블록은 선택한 요소에 적용하려는 스타일의 윤곽을 나타냅니다.
이 튜토리얼에서는 예제와 함께 CSS 구문의 기본 사항과 CSS 스타일의 구조에 대해 설명합니다. 또한 CSS에서 주석을 작성하는 방법에 대해서도 논의할 것입니다. 이 튜토리얼을 읽고 나면 자신만의 CSS 스타일을 작성하는 데 필요한 지식을 얻게 될 것입니다.
CSS 스타일 규칙
CSS에서 스타일시트는 웹사이트가 사용자 화면에 표시되는 방식을 결정하는 일련의 규칙을 저장합니다. 예를 들어 스타일시트는 웹 페이지의 텍스트 색상이나 특정 헤더에서 사용하는 글꼴 크기의 윤곽을 나타낼 수 있습니다.
이러한 규칙은 선택자와 선언이라는 두 부분으로 구성된 표준 구조를 따릅니다. 전반적으로 CSS에 스타일 규칙이 표시되는 방식은 다음과 같습니다.
h1 {
color: blue;
}
이 특정 스타일은 모든 <h1>의 색상을 설정합니다. 웹 페이지의 요소를 파란색으로 바꿉니다. 이제 이 스타일을 두 구성 요소로 나누어 작동 방식을 분석해 보겠습니다.
CSS 선언
CSS 스타일의 첫 번째 부분은 선언입니다. Declaration 웹 페이지의 요소에 적용하려는 특정 스타일에 대한 또 다른 단어입니다.
CSS 스타일 규칙은 하나 이상의 선언을 포함해야 하며 원하는 만큼 선언을 포함할 수 있습니다. 따라서 웹 페이지에서 상자의 너비와 높이를 100px로 설정하고 배경색을 파란색으로 설정하려면 하나의 선언에서 그렇게 할 수 있습니다.
참가자의 81%는 부트캠프에 참석한 후 기술 직업 전망에 대해 더 자신감을 느꼈다고 말했습니다. 지금 부트캠프에 참여하십시오.
부트캠프 졸업생은 부트캠프 시작부터 첫 직장을 찾는 데까지 6개월도 채 걸리지 않았습니다.
선언은 다음과 같은 두 부분으로 구성됩니다.
- 속성. 요소에 적용해야 하는 스타일 속성입니다(예:색상, 배경색, 너비, 높이).
- 가치. 이 부분은 속성이 어떻게 표시되어야 하는지 브라우저에 알려줍니다(즉, 상자의 색상을 "녹색" 또는 "빨간색"으로 설정할 수 있음).
다음은 CSS 선언 구문입니다.
property: value;
CSS 속성이 먼저 나타난 다음 콜론(:)으로 구분됩니다. 콜론 다음에 정의한 속성에 할당하려는 값이 옵니다.
각 CSS 선언은 세미콜론(;)으로 끝나야 합니다.
다음은 두 CSS 선언의 예입니다.
color: blue; font-size: 16px;
첫 번째 선언은 HTML 요소의 글꼴 색상을 "파란색"으로 설정합니다. 두 번째 선언은 단일 요소의 글꼴 크기를 "16px"로 설정합니다. 이 두 선택자는 모두 속성 이름으로 시작하고 속성에 할당하려는 값과 쉼표가 뒤에 옵니다.
선언은 중괄호 안에 저장됩니다.
CSS 선택기
마지막 섹션에서 선언을 사용하여 웹 요소에 스타일을 적용하는 방법에 대해 논의했습니다. 그러나 선언은 CSS 구문의 한 부분일 뿐입니다. 다른 부분은 특정 선언 세트를 적용해야 하는 요소를 브라우저에 알려주는 선택기입니다.
다음은 CSS 선택기의 구문입니다.
selector {
// List of declarations
}
선택기는 스타일 집합을 적용해야 하는 요소를 브라우저에 지시합니다. 예를 들어 모든 <div>의 너비를 설정하려는 경우 요소를 "500px"로 변경하려면 다음 규칙을 사용하면 됩니다.
div {
width: 500px;
}
div 이 경우 선택자이며 CSS 규칙의 시작 부분에 있습니다. 그런 다음 앞에서 논의한 구문을 사용하여 중괄호로 선언을 정의합니다. 이 규칙은 모든 <div>의 너비를 설정합니다. 웹 페이지의 요소를 "500px"로 조정합니다.
CSS 선택기에 대해 자세히 알아보려면 CSS 선택기에 대한 초보자 가이드를 읽어보세요.
선언과 선택자는 함께 CSS 스타일 규칙을 구성합니다.
CSS 주석
지금까지 CSS에서 스타일 규칙을 작성하는 방법에 대해 논의했습니다. 그러나 스타일 시트에 작성된 모든 텍스트가 스타일 규칙은 아닙니다.
CSS 스타일 시트는 주석을 저장할 수도 있습니다. 주석은 스타일시트의 코드를 더 쉽게 이해할 수 있도록 개발자가 작성한 텍스트 블록입니다. 주석은 브라우저에서 무시되므로 원하는 만큼 스타일시트에 주석을 추가할 수 있습니다.
의견을 작성하는 것은 여러 가지 이유로 유익합니다.
첫째, 주석을 작성하면 작성하는 동안 코드를 추적할 수 있으며 향후 코드 블록을 이해하는 데 도움이 필요할 때 참조할 수 있는 생각의 기록을 얻을 수 있습니다. 둘째, 주석을 작성하면 코드 블록을 작성하지 않은 개발자가 코드 블록의 목적과 코드 작성 의도를 이해할 수 있습니다.
CSS 주석은 /* 구문으로 시작하여 */ 구문으로 끝납니다.
한 줄 및 여러 줄 주석
CSS에 나타날 수 있는 주석에는 한 줄과 여러 줄의 두 가지 유형이 있습니다.
한 줄 주석은 스타일 시트의 한 줄에만 있는 주석입니다. 다음은 스타일 규칙 위에 나타나는 CSS의 한 줄 주석의 예입니다.
/* This style sets the font size of all <p> tags to 16px */
p {
font-size: 16px;
}
이 코드에서 주석은 /*와 */ 마커 사이에 나타납니다. 주석 아래에는 앞에서 논의한 구문을 사용하는 스타일 규칙이 있습니다.
여러 줄 주석은 스타일 시트에서 두 줄 이상에 걸쳐 있는 주석입니다. 다음은 CSS 여러 줄 주석의 예입니다.
/* This style sets the font size of all <p> tags to 16px
and also sets the color of the text to gray */
p {
font-size: 16px;
color: gray;
}
이 주석은 두 줄에 걸쳐 있으며 CSS 스타일을 설명합니다.
결론
다른 프로그래밍 언어와 마찬가지로 CSS에는 언어를 사용하여 코드를 작성하는 방법을 정의하는 몇 가지 기본 구문이 있습니다.
CSS에는 스타일 규칙을 구성하는 두 가지 구성 요소가 있습니다. 선언과 선택기입니다. 선언은 요소에 적용하려는 스타일이고 선택자는 선언이 적용될 요소를 선택하는 데 사용됩니다.
또한 CSS에는 나중에 참조할 수 있도록 코드에 메모를 작성할 수 있는 주석 기능이 있습니다. 주석은 브라우저에서 무시됩니다.
이 자습서에서는 CSS 구문의 기본 사항과 CSS 스타일 시트에 주석을 추가하는 방법에 대해 설명했습니다. 이제 전문 웹 개발자처럼 CSS 스타일 규칙과 주석을 작성할 준비가 되었습니다!