CSS는 Cascading Style Sheet의 약자로 웹사이트에 스타일을 추가하는 데 사용됩니다. 기본적으로 브라우저는 웹 사이트를 스타일이 없는 일반 HTML 문서로 렌더링합니다. CSS를 사용하면 다양한 HTML 요소의 크기, 텍스트, 색상, 정렬, 레이아웃(및 기타 많은 속성)을 수정하여 HTML 문서가 렌더링되는 방식을 제어할 수 있습니다. 따라서 CSS를 사용하여 버튼에 다양한 모양, 크기, 색상을 부여하고 웹사이트의 배경을 변경하며 로딩 스피너와 같은 애니메이션을 추가할 수 있습니다.
첫 번째 버전의 CSS는 1996년에 출시되었다. 스타일링으로 웹사이트를 렌더링하는 기능이 도입된 것은 이번이 처음이다. CSS 2의 두 번째 버전이 1998년에 출시되면서 빠르게 인기를 끌었다. 2000년까지 CSS는 세 번째 버전(CSS 3)이 출시될 정도로 인기를 끌었고 상당한 변화가 있었다.
CSS 3을 시작으로 개발은 모듈식으로 수정되었다. 전체 CSS 코드 베이스는 기능에 따라 더 작은 모듈들로 나뉘었고 그 이후로 새로운 모듈들이 계속해서 추가/업데이트되어 기존 기능들을 개선하거나 새로운 기능들을 추가하였다. 따라서 CSS 3은 현재 개발 중인 최신 버전의 CSS이며 CSS 4가 없는 이유이기도 합니다.
일반적인 CSS 블록은 하나 이상의 HTML 요소와 일치할 수 있는 선택기로 시작한다. 그런 다음 중괄호를 사용하여 해당 블록을 정의하고 그 안에 있는 특성을 지정하여 선택한 HTML 요소의 스타일을 제어할 수 있습니다. 속성과 함께 적용되는 특정 스타일은 속성에 할당된 값에 따라 달라집니다. 이 모든 것을 CSS 규칙이라고 합니다.
예를 들어, 다음은 HTML 단락 요소
에 적용되는 CSS 규칙입니다.
p {
background: red;
display: flex;
}위의 p는 선택기이고 키워드 배경과 표시는 속성이며 빨간색과 플렉스라는 용어는 이러한 속성의 값입니다. 이것은 브라우저에 의해 HTML 문서가 렌더링될 때 문단 요소에 적용되는 특정 스타일 속성입니다.
CSS에서 속성은 중괄호 { } 쌍 사이에 있고 모든 속성은 세미콜론()으로 끝나야 하며 선택기 + {...의 전체 조합은} 를 CSS 규칙이라고 합니다.
속성을 지정하는 방법
속성: 가치;
CSS - 계단식 스티 시트
스타일시트를 사용하면 HTML 요소의 스타일을 제어할 수 있지만 스타일시트의 계단식 특성은 코드 뒷부분에 정의된 CSS 규칙을 덮어쓰는 것을 의미합니다.
HTML
요소에 두 가지 규칙이 적용되는 다음 예를 생각해 보십시오.
p {
display: flex;
background: red;
color: white;
}
p {
display: flex;
background: blue;
color: green;
}위의 예에서,
에 적용된 초기 규칙은 흰색 글꼴이 있는 빨간색 배경입니다. 그러나 CSS의 계단식 특성 때문에 브라우저에 최종적으로 적용되고 렌더링되는 스타일은 녹색 글꼴의 파란색 배경이다.
CSS를 어디에 써야 합니까?
우리 웹사이트에 CSS를 추가하는 방법은 3가지가 있습니다.
1. 인라인 CSS
이 접근 방식에는 HTML 요소에 스타일 속성을 직접 추가하고 문자열 내부의 속성을 지정하는 작업이 포함됩니다. 그러나 이 방법은 문자열이 길어지고 관리 및/또는 디버깅이 어려워지기 때문에 권장되지 않습니다. 이 접근 방식의 한 가지 큰 단점은 우리가 원하는 모든 HTML 요소에 수동으로 CSS 블록을 추가해야 한다는 것입니다.
다음 예를 생각해 보십시오.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Web Hosting</title>
<link rel="shortcut icon" href="favicon.png">
</head>
<body>
<main>
<section style="background: red; color: white">
<h1>Upto 100 Gb Free</h1>
</section>
<section>
<h1>Zero downtime</h1>
</section>
<section>
<h1>24x7 Customer Support</h1>
</section>
</main>
</body>
</html>위의 예에서, 첫 번째 <섹션> 태그는 아래와 같이 인라인 CSS 스타일링을 가지고 있다.
<섹션 스타일="배경: 빨간색, 색상: 흰색">
이 접근 방식의 문제는 우리가 다른 두 개의 섹션 태그에 동일한 스타일을 적용하려면 모든 <섹션> 태그 안에 위의 코드를 수동으로 추가해야 한다는 것이다.
2. A <스타일> 태그 추가
</head>
<body>
<main>
<section style="background: red; color: white">
<h1>Upto 100 Gb Free</h1>
</section>
<section>
<h1>Zero downtime</h1>
</section>
<section>
<h1>24x7 Customer Support</h1>
</section>
</main>
</body>
</html>
```
위에서도 알 수 있듯이, <스타일> 안의 코드는...</style>은 <section> 태그에 적용되는 CSS 규칙이며, 이 경우 규칙은 HTML 문서의 모든 섹션 요소에 적용되므로 매번 작성할 필요가 없습니다!
<div class="content-ad"></div>
#### 3. 스타일시트 작성
스타일시트는 .css 파일 확장자로 끝나는 별도의 CSS 파일입니다. 이것은 우리가 모든 CSS 규칙을 작성하는 파일입니다. 스타일을 적용하기 위해서는 HTML 파일로 파일을 가져오기만 하면 됩니다.
CSS 규칙이 포함되어 있지 않은 다음 HTML 코드 조각을 생각해 보십시오. 스타일시트 파일 Index.css를 HTML 문서로 가져와 CSS를 적용합니다.
```js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>uHost</title>
<link rel="shortcut icon" href="favicon.png" />
<link rel="stylesheet" href="assets/styles/index.css" />
</head>
<body>
<main>
<section>
<h1>Upto 100 Gb Free</h1>
</section>
<section>
<h1>Zero downtime</h1>
</section>
<section>
<h1>24x7 Customer Support</h1>
</section>
</main>
</body>
</html>
```
다음 줄의 코드는 필요한 CSS 파일을 HTML 문서로 가져옵니다.
<div class="content-ad"></div>
<link rel="스타일시트" href="hyles/styles/index.css" />
원하는 위치에 .css 파일을 보관할 수 있지만 모든 스타일시트, 이미지, 비디오 및 기타 미디어를 저장할 자산 폴더를 만드는 것이 좋습니다. 스타일시트는 일반적으로 하위 폴더 스타일 아래에 유지되지만 무시될 수도 있습니다! css 파일을 가져오는 <link> 태그 안에 rel="stylesheet" 특성을 추가해야 합니다. 그렇지 않으면 스타일이 적용되지 않습니다!
별도의 CSS 파일을 추가하는 이러한 접근 방식은 관심사를 분리할 수 있기 때문에 권장되는 방법이다. HTML과 CSS는 별도의 파일로 분리되므로 보다 깔끔하게 읽을 수 있는 코드를 작성할 수 있으며 디버깅 및 향후 수정에도 도움이 된다. 또한 헤드 섹션(즉, <헤드> 내의 모든 것)의 팽창을 방지합니다.</head>) 태그를 지정하고 브라우저가 스타일시트를 캐시할 수 있도록 하여 HTML 파일을 다시 다운로드해야 할 경우 로딩 시간이 빨라집니다.
이것은 스타일링을 시작하기 위해 간단히 CSS에 있는 모든 것입니다! CSS에 대해 자세히 알아보려면 W3C(World Wide Web Consortium) CSS 워킹 그룹을 방문하십시오.
전체 CSS 및 HTML 코드 예제를 보려면 Github repo에 액세스할 수 있습니다(이 코드에 대한 폴더 소개를 확인하십시오).
<div class="content-ad"></div>
만약 당신이 이 기사를 좋아한다면, 그리고 그런 기사들로 계속 업데이트 되고 싶다면, Dev.to에서 저를 팔로우하고 트위터에서 팔로우 하세요.
저는 웹 개발, AI, 클라우드, 기업가정신, 기술 등 저를 흥미롭게 하는 모든 것에 대해 글을 씁니다!'css' 카테고리의 다른 글
| 기본 은행 시스템 (0) | 2022.01.19 |
|---|---|
| 컴퓨터가 없다고요? 다음은 전화기를 사용하여 웹 사이트를 구축하는 방법입니다. (0) | 2022.01.19 |
| 전자상거래 개발 (0) | 2022.01.19 |
| 애니메이션 햄버거 메뉴 (0) | 2022.01.19 |
| 어두워짐(모드) (0) | 2022.01.19 |
댓글