CSS로 시작

시작하자 ...

정의

CSS는 웹 페이지 콘텐츠의 모양을 수정하는 데 사용되는 스타일 언어이므로 웹 페이지 콘텐츠의 표시 및 디자인을 변경하는 데 도움이 되고 창의성을 표현할 수 있으며 이를 달성하는 방식에서 자유를 얻을 수 있습니다.

통사론

CSS의 구문은 간단하고 이해하기 쉽습니다.

selector {
   property1: value;
   property2: value;
}

첫 번째 부분은 선택기입니다. HTML 요소를 선택합니다. 다음으로 여는 괄호와 닫는 괄호가 있어야 합니다. 선택한 HTML 요소에 적용할 스타일을 정의합니다. 선택기와 일치하는 HTML 요소에 대한 색상, 글꼴 크기와 같은 스타일. 예시:

h3 {
  color: blue;
}

선택기

많은 유형의 선택자가 있지만 가장 일반적으로 사용되는 세 가지 유형은 요소, 클래스 및 ID 선택자입니다.

요소

html element {
  property: value;
}

HTML 요소를 선택기로 사용할 수 있습니다.
<h3> Title </h3>

h3 {
  color: blue;
}

그러면 웹 페이지의 모든 h3 요소가 선택됩니다.

수업

.classname {
  property: value;
}

클래스 선택기는 가장 일반적으로 사용되는 다재다능한 것으로 클래스 속성으로 HTML 요소를 선택할 수 있습니다.
<h1 class="big-header"> Title </h1>

.big-header {
  color: purple;
}

마침표는 뒤에 오는 모든 것이 HTML 요소 이름이 아니라 클래스 이름임을 CSS에 알려줍니다. 예를 들어 다음과 같이 재사용 가능한 구성 요소를 만드는 가장 쉬운 방법을 제공합니다.

사이트에 기본 스타일을 공유하지만 배경색과 같이 각각에 고유한 항목이 있는 3가지 종류의 버튼이 있는 경우 기본 공통 스타일을 사용하는 세 가지 모두에 대해 하나의 클래스를 가질 수 있고 고유한 스타일을 사용하는 각각에 대해 세 가지 다른 클래스를 가질 수 있습니다.
<button class="btn btn-1"> Button 1 </button><button class="btn btn-2"> Button 2 </button><button class="btn btn-3"> Button 3 </button>

.btn {
    padding: 10px;
    color: white;
}
.btn-1 {
    background-color: blue;
}
.btn-2 {
    background-color: purple;
}
.btn-3 {
    background-color: red;
}

고유한 스타일에 대해 3개, 일반 스타일에 대해 1개를 만들었고 HTML 요소의 클래스 특성에 클래스 이름을 모두 포함하고 공백으로 구분해야 합니다.

ID

#element-ID {
  property: value;
}

일반적으로 사용되는 또 다른 선택기는 ID 선택기입니다. 또한 HTML 요소의 속성인 id 속성을 사용하여 선택하는 것과 관련이 있습니다. 여기서 차이점은 요소는 하나의 id만 가질 수 있으며 HTML 페이지를 통해 고유해야 한다는 것입니다.
<h1 id="main-header"> Title </h1>

#main-header {
      color: white;
}

이 선택기의 경우 클래스 이름 앞에 마침표를 사용한 것과 마찬가지로 파운드 기호 다음에 ID 이름을 사용해야 합니다.
클래스 선택자가 가장 일반적으로 사용되는 이유를 알 수 있습니다. 위의 버튼 예를 들면 HTML 페이지를 통해 고유하기 때문에 id 선택자와 함께 사용할 수 없습니다.



선택기 결합

.selector-1.selector-2 {
          property1:value;
          property2:value;
}

여러 선택기를 결합하여 HTML 요소를 정의할 수도 있습니다. 공백 없이 사용 중인 모든 선택기의 이름만 지정하면 됩니다. 예를 들어:<h1 class="large-header">Title </h1>

h1.large-header {
         font-size: 200%;
}

<h2 id="big-blue" class="large-blue"> Title </h2>

#big-blue.large-blue {
         font-size: 200%;
}

선택자를 다음을 사용하는 메서드와 결합할 수도 있습니다.
HTML 페이지의 조상-자식 요소 관계.

.ancestor .child {
         property: value;
}

여기서 조상과 자식 선택자 사이에 쉼표를 사용해야 합니다. 예를 들어:

 <div>
   <p> Selection </p>
   <p> Selection </p>
   <p> Selection </p>
   <span>
      <p> Selection </p>
   </span>
 </div>

div p {
    color: red;
}

다른 부모가 있더라도 div 요소의 모든 p 요소를 선택합니다.

선택자를 결합하는 또 다른 방법은 쉼표를 사용하여 동일한 방식으로 스타일을 지정하려는 요소를 정의하는 것입니다.

.big {
    font-size: 200%;
    color: purple;
}
.large {
    font-size: 200%;
    color: purple;
}

.big, .large {
    font-size: 200%;
    color: purple;
}

오늘은 여기까지입니다 여러분,
고맙습니다!



CSS를 시작으로 다른 할부로 돌아올 것입니다.