이 기사는 다음과 같은 흥미롭고 중요한 주제를 제시합니다. 선택자 및 지원하는 실제 데모와 함께 후속 작업을 수행합니다. 이 기사에서는 다음 사항을 다룰 것입니다.
그럼 시작하겠습니다.
HTML 요소 스타일 지정
CSS 선택기에 들어가기 전에 CSS가 무엇인지 이해합시다. HTML이 골격으로 간주되는 경우 CSS (Cascading Style Sheets)는 근육과 피부와 같습니다. 두뇌는 JavaScript입니다. 따라서 웹 페이지의 경우 CSS 스타일은 기본적으로 레이아웃과 디자인입니다. 이미지와 텍스트의 위치에서 글꼴 크기와 배경색에 이르기까지 CSS는 브라우저에서 HTML 요소가 어떻게 보이는지 제어합니다.
CSS 선택자가 무엇인지 잘 이해하면 CSS를 더 잘 이해할 수 있습니다. 이러한 선택기를 사용하면 특정 HTML 요소를 대상으로 지정하여 올바른 스타일을 적용 할 수 있습니다.
HTML 요소를 선택하는 방법을 이해하고
요소를 선택하는 방법?
웹 페이지의 나머지 콘텐츠와 다른 스타일로 특정 제목을 지정하려고합니다. 이제 CSS 선택기를 사용하여 HTML 요소를 대상으로 지정하여 스타일을 다르게 지정할 수 있습니다. CSS 선택기는 특정 CSS 규칙 집합이 적용되는 요소를 정의하는 데 도움이됩니다. 스타일을 지정할 요소를 정확하게 선택할 수있는 다양한 유형의 CSS 선택기가 있습니다. 전체 웹 페이지에 일반적인 스타일을 지정한 다음 페이지의 다른 요소에 스타일을 적용 할 수 있습니다.
선택기는 CSS 규칙의 일부이며 이러한 선택기는 CSS 블록 선언 바로 앞에옵니다. 더 나은 이해를 위해 아래 이미지를 참조하십시오.
CSS 선택기 문서로 이동
CSS 선택자
이 선택기를 사용하면 이름으로 HTML 요소를 선택할 수 있습니다.
아래 코드를 고려하십시오.
p {텍스트 정렬 : 가운데 색상 : 자홍}이 스타일은 모든 단락에 적용됩니다.
단락 1
2 항
이 코드는 다음과 같은 출력을 제공합니다.
이 스타일은 모든 단락에 적용됩니다.
단락 1
2 항
위 코드에서 HTML 요소는 가운데 정렬되어 있으며 '자홍색'색상을 사용합니다.
CSS 선택기 문서로 이동
CSS ID 선택기
HTML 요소의 id 속성을 선택하여 특정 요소를 선택할 수 있습니다. ID는 페이지에 고유하므로 id 속성을 사용하여 올바른 요소를 선택할 수 있습니다.
스냅 샷에서 aws 시작 인스턴스
'#'다음에 해당 요소의 ID를 사용하여 HTML 요소를 선택할 수 있습니다. 예를 들어 '#firstname'은 ID가 'firstname'인 요소를 선택합니다.
다음 코드를 고려하십시오.
# para1 {text-align : 가운데 색상 : 주황색}Hello World
이 단락은 영향을받지 않습니다.
위 코드의 출력은 다음과 같습니다.
Hello World
이 단락은 영향을받지 않습니다.
위 출력에서 볼 수 있듯이 id =”para1 ″을 포함하여 해당 요소의 색상을 주황색으로 변경할 수있었습니다. 이것이없는 다른 요소는 영향을받지 않습니다.
CSS 선택기 문서로 이동
CSS 클래스 선택기
클래스 선택기를 사용하여 특정 클래스 속성이있는 HTML 요소를 선택할 수 있습니다. 마침표 (마침표 기호) 다음에 클래스 이름을 사용하여 선택기를 정의 할 수 있습니다. 예를 들어 .intro는 클래스가 'intro'인 요소를 선택합니다. 한 가지 명심해야 할 점은 클래스 이름을 숫자로 시작할 수 없다는 것입니다.
다음 코드를 고려하십시오.
.center {text-align : 중앙 색상 : 분홍색}이 제목은 분홍색이며 가운데 정렬됩니다.
이 단락은 분홍색이며 가운데 정렬됩니다.
위 코드의 출력은 다음과 같습니다.
이 제목은 분홍색이며 가운데 정렬됩니다.
이 단락은 분홍색이며 가운데 정렬됩니다.
특정 요소에 대해 CSS 클래스 선택기를 사용할 수 있습니다. 하나의 특정 요소 만 스타일을 지정하려면 클래스 선택기와 함께 요소 이름을 사용할 수 있습니다.
예를 들어 다음 코드를 고려하십시오.
p.center {text-align : 가운데 색상 : 분홍색}이 제목은 영향을받지 않습니다.
이 단락은 분홍색이며 가운데 정렬됩니다.
위 코드의 출력은 다음과 같습니다.
PHP 창을 설치하는 방법
이 제목은 영향을받지 않습니다.
이 단락은 분홍색이며 가운데 정렬됩니다.
출력에서 볼 수 있듯이 제목 h2는 스타일의 영향을받지 않습니다. 'p.center'를 지정 했으므로 단락 만 스타일의 영향을받습니다.
이 CSS 선택기 기사로 넘어 가서,
CSS 범용 선택기
이 유형의 선택기는 페이지의 모든 요소를 선택하는 와일드 카드 문자로 간주 할 수 있습니다. 페이지의 모든 요소를 선택하며 '*'로 지정됩니다.
예를 들어, 아래 코드를 고려하십시오.
* {색상 : 진한 녹색 글꼴 크기 : 30px}테스트입니다 (작은 글꼴)
이것은 단락입니다.
위 코드의 출력은 다음과 같습니다.
Hello World
테스트입니다 (작은 글꼴)
이것은 단락입니다.
출력에서 볼 수 있듯이 그룹 선택기를 사용하여 정의 된 모든 요소는 동일한 스타일 정의를 갖습니다. 중앙 정렬되고 글꼴 색상은 청록색입니다.
이것으로이 기사의 끝으로 이동합니다.
우리를 확인하십시오 강사 주도의 라이브 교육 및 실제 프로젝트 경험과 함께 제공됩니다. 이 교육을 통해 백엔드 및 프런트 엔드 웹 기술을 사용하는 기술에 능숙 해집니다. 여기에는 웹 개발, jQuery, Angular, NodeJS, ExpressJS 및 MongoDB에 대한 교육이 포함됩니다.
질문이 있으십니까? 기사의 댓글 섹션에 언급 해 주시면 다시 연락 드리겠습니다.