반응형
CSS는 우리가 웹 페이지를 스타일하기 위해 사용하는 언어이다.
CSS란 무엇인가?
- CSS는 Cascade Style Sheet 의 약자이다
- CSS는 HTML 요소가 화면, 종이 또는 다른 매체에 어떻게 표시되는지 설명한다
- CSS는 많은 작업을 절약한다. 여러 웹 페이지의 레이아웃을 동시에 제어할 수 있다
- 외부 스타일시트는 CSS 파일에 저장된다
왜 CSS를 사용할까?
CSS는 다양한 장치 및 화면 크기에 대한 디스플레이의 디자인, 레이아웃 및 변형을 포함하여 웹 페이지의 스타일을 정의하는 데 사용된다.
| <!DOCTYPE html> <html> <head> <style> body { background-color: lightblue; } h1 { color: white; text-align: center; } p { font-family: verdana; font-size: 20px; } </style> </head> <body> <h1>나의 첫 CSS 예제</h1> <p>문단입니다.</p> </body> </html> |
위의 코드를 실행한 결과가 아래 그림이다.
CSS는 큰 문제를 해결하였다.
HTML은 웹 페이지를 포맷하기 위한 태그를 포함하도록 의도되지 않았다!
HTML은 다음과 같은 웹 페이지의 내용을 설명하기 위해 만들어졌다:
<h1>이것은 제목입니다</h1>
<p>이것은 단락입니다.</p>
HTML 3.2 사양에 <font>와 같은 태그와 색상 속성이 추가되었을 때, 웹 개발자들에게 악몽이 시작되었다.
모든 페이지에 글꼴과 색상 정보가 추가된 대형 웹 사이트의 개발은 길고 비용이 많이 드는 과정이 되었다.
이 문제를 해결하기 위해 월드 와이드 웹 컨소시엄(W3C)은 CSS를 만들었다.
CSS가 HTML 페이지에서 스타일 형식을 제거했다!
CSS가 많은 작업량을 절약시켰다.
스타일 정의는 일반적으로 외부 .css 파일에 저장된다.
외부 스타일시트 파일을 사용하면 파일 하나만 변경하여 전체 웹 사이트의 모양을 변경할 수 있다!
출처 : 이 글의 출처는 w3schools사이트를 참고하였으며 필자가 추가하여 정리한 글입니다.
반응형
'HTML > CSS문법' 카테고리의 다른 글
| CSS 색상(CSS Colors) (0) | 2023.07.02 |
|---|---|
| CSS 주석(CSS Comments) (0) | 2023.07.01 |
| CSS 추가하는 방법 (0) | 2023.06.30 |
| CSS 선택기(selector) (0) | 2023.06.29 |
| CSS Syntax(CSS 구문) (0) | 2023.06.28 |
댓글