캐스케이딩 스타일 시트(CSS)를 어떻게 사용합니까?
CSS 란 무엇입니까?
CSS(Cascading Style Sheets)는 콘텐츠의 글꼴, 색상, 크기 및 간격 변경, 여러 열로 분할, 애니메이션 및 기타 장식 요소 추가와 같은 웹 페이지 스타일 및 레이아웃에 사용되는 스타일 시트 언어입니다. .
계단식 스타일 시트는 규칙으로 구성됩니다. CSS 규칙은 하나 이상의 선택자와 대괄호 안에 세미콜론으로 구분된 선언 목록으로 구성됩니다.
예시:
p {color: teal;}
p를 선택기라고 합니다.중괄호
{ } 사이의 정보를 선언이라고 합니다.color는 재산입니다.teal는 값입니다.CSS 사용
CSS를 사용하면 하나 이상의 웹 페이지의 모양과 느낌을 사용자 정의할 수 있습니다. 단일 페이지 또는 사이트의 모든 페이지에서 주어진 항목 중 하나, 여러 개 또는 모두를 신속하고 효율적으로 타겟팅할 수 있습니다.
CSS는 3가지 방법으로 HTML 문서에 추가할 수 있습니다.
인라인 - HTML 요소 내에서 style 속성을 사용하여
내부 -
<head> 섹션의 요소 사용외부 - 요소를 사용하여 외부 CSS 파일에 연결
인라인 CSS
첫 번째는 인라인 스타일을 사용하는 것인데 여기서 style 속성을 사용하여 개별 요소에 직접 적용합니다.
다음 예에서
<h1> 요소의 텍스트 색상은 파란색이고 <p> 요소의 텍스트 색상은 빨간색입니다.<h1 style=“color:blue;”>A Blue Heading</h1>
<p style=“color:red;”>A red paragraph.</p>
내부 CSS
내부 CSS는 HTML 페이지의
<head> 섹션에 있는 요소 내에 정의됩니다.아래 예는 해당 페이지에 있는 모든
<h1> 요소의 텍스트 색상을 파란색으로 변경합니다.<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
외부 CSS
많은 HTML 페이지는 모양을 설정하기 위해 외부 스타일 시트에 의존합니다.
사용할 각 HTML 페이지의 섹션에 외부 스타일 시트에 대한 링크를 추가합니다.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
모든 텍스트 편집기를 사용하여 외부 스타일 시트를 만들 수 있습니다. 파일은 .css 확장자로 저장해야 하며 HTML 코드를 포함하지 않아야 합니다.
"styles.css" 파일은 다음과 같이 표시됩니다.body {
background-color: powderblue;
}
h1 {
color: blue;
}
p {
color: red;
}
외부 스타일 시트는 웹 사이트에서 CSS를 사용하는 가장 효율적인 방법입니다(전용 CSS 파일에서 사이트 스타일을 추적하고 구현하는 것이 더 쉽습니다). 반면 내부 스타일 시트와 인라인 스타일은 경우에 따라 활용할 수 있습니다. 개별 스타일 수정이 필요한 경우 기준입니다.
Reference
이 문제에 관하여(캐스케이딩 스타일 시트(CSS)를 어떻게 사용합니까?), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/max88git/how-do-you-use-cascading-style-sheets-css-fbb텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
