CSS란?
Cascading style sheets의 약자이며
style sheets → 웹 페이지 스타일을 정리해두는 문서를 의미하고
Cascading → 마치 폭포처럼 떨어지듯이 스타일이 적용될 때 우선순위를 가지고 적용되는 것을 의미한다.
간단하게 정리하자면 웹 페이지를 구성하는데 뼈대인 HTML이라는 것이 필요하다면
그러한 문서를 꾸며주기 위해 CSS파일을 사용한다는 것이다.
CSS에는 어떻게 작성이 되어 있을까?
여기서 주의 해야될 사항으로는 HTML의 속성은 attribute로 표기하지만 CSS에서의 속성은 property로 표현한다는 것에 주의하도록하자
CSS 적용하기
CSS처럼 스타일만을 적용할 수 있는 파일이 만들어지기 전에는 HTML문서에 바로 스타일들을 적용을 하였다.
하지만 점점 스타일이 발전이 되어왔고 HTML문서 내에서 모든 스타일적인 부분을 작성하기에 어려움이 발생했기에 CSS파일을 따로 만들어 스타일들을 관리하기 시작하였다.
인라인 방식
각각의 요소안에 바로 스타일을 적용하는 방식
<div style="color : red;"> inline스타일적용 </div>내부 스타일 시트
style태그를 만들어서 스타일 적용하기
<head>
<style>
h1 {
font-size: 16px;
}
</style>
</head>외부 스타일 시트
HTML문서에 외부 폴더에 있는 .css(확장자)를 적용하기
head태그 내에 존재해야 된다.
<link rel="stylesheet" href="style.css">어떠한 방법을 적용하든 동일한 스타일을 주었다면 똑같은 모습이 나오게 된다.
다중 스타일 시트
<haed>
<style>
@import url(style.css);
</style>
</head>- link 태그와 마찬가지로 head 섹션에 들어가 있어야 한다.
- head 섹션 내부에 style 태그를 만들고 그 안에서 @import 를 사용해야 된다.
link태그로 연결하면 되는데 왜 사용하는 것일까?
웹 페이지에 적용하고 싶은 css파일이 많아지는 경우에 모든 파일을 link로 적용시키는 것도 상관은 없지만 복잡하게 작성되어서 알아보기 힘든 코드가 작성된다. 그래서 분기를 시켜주는 것처럼 link태그로 연결을 한 style.css파일에서 또 다른 외부의 css파일을 로드 함으로써 조금 더 알아 보기 쉽게 형성을 해준다.
- @charset : 스타일시트에서 사용하는 문자 인코딩을 지정합니다. 문서에서 가장 먼저 선언합니다.
- @import : 다른 스타일 시트에서 스타일 규칙을 가져옵니다. @charset 바로 다음에 선언되어야 합니다.
- @font-face : 디바이스에 없는 폰트를 다운받아 적용할 때 사용합니다.
- @keyframes : 애니메이션을 만들 때 사용합니다.
- @media : 사용자 디바이스에 따른 스타일을 분기 처리하고자 할 때 사용합니다.
- @supports : 특정 CSS 속성을 브라우저가 지원하는지 확인하고 스타일을 선언하고자 할 때 사용합니다.
'Programming > Style' 카테고리의 다른 글
| CSS 선택자(Selector) (0) | 2022.09.08 |
|---|---|
| RESET CSS (0) | 2022.09.08 |
| CSS 스타일 적용순서 (0) | 2022.09.08 |
| CSS margin 겹침현상 (0) | 2022.09.08 |
| CSS Box-sizing (0) | 2022.09.05 |