CSS는 웹 사이트의 모양을 디자인하고 아름답게 하는 데 가장 중요한 도구 중 하나입니다. CSS의 기초와 사용법을 알려드립니다.
CSS는 HTML 뷰티 스타일을 변경할 수 있습니다.
CSS는 웹 페이지의 스타일을 지정하는 데 사용하는 언어입니다.
CSS란 무엇입니까?
- CSS는 Cascading Style Sheets를 나타냅니다.
- CSS는 HTML 요소가 화면, 종이 또는 기타 미디어에 표시되는 방식을 설명합니다.
- CSS는 많은 작업을 절약합니다. 한 번에 여러 웹 페이지의 레이아웃을 제어할 수 있습니다.
- 외부 스타일시트는 CSS 파일에 저장됩니다.
CSS 데모 - 하나의 HTML 페이지 - 여러 스타일!
여기에서는 4개의 다른 스타일시트와 함께 표시된 하나의 HTML 페이지를 보여줍니다. 다양한 스타일을 보려면 아래의 "스타일시트 1", "스타일시트 2", "스타일시트 3", "스타일시트 4" 링크를 클릭하십시오.
CSS를 사용하는 이유
CSS는 다양한 장치 및 화면 크기에 대한 디스플레이의 디자인, 레이아웃 및 변형을 포함하여 웹 페이지의 스타일을 정의하는 데 사용됩니다.
body {
background-color: lightblue;
}
h1 {
color: white;
text-align: center;
}
p {
font-family: verdana;
font-size: 20px;
}CSS는 큰 문제를 해결했습니다
HTML은 웹 페이지 서식을 지정하기 위한 태그를 포함하도록 의도된 적이 없습니다!
HTML은 다음과 같이 웹 페이지의 내용을 설명하기 위해 만들어졌습니다.
<h1> 제목입니다</h1>
<p> 단락입니다.</p>
<font> 와 같은 태그와 색상 속성이 HTML 3.2 사양에 추가되었을 때 웹 개발자에게는 악몽이 시작되었습니다. 모든 단일 페이지에 글꼴과 색상 정보가 추가되는 대규모 웹사이트 개발은 길고 비용이 많이 드는 과정이 되었습니다.
이 문제를 해결하기 위해 W3C(World Wide Web Consortium)에서 CSS를 만들었습니다.
CSS가 HTML 페이지에서 스타일 서식을 제거했습니다!
CSS는 많은 작업을 절약합니다!
스타일 정의는 일반적으로 외부 .css 파일에 저장됩니다.
외부 스타일시트 파일을 사용하면 파일 하나만 변경하여 전체 웹사이트의 모양을 변경할 수 있습니다!
CSS 구문
CSS 규칙은 선택기와 선언 블록으로 구성됩니다.
선택기는 스타일을 지정할 HTML 요소를 가리킵니다.
선언 블록에는 세미콜론으로 구분된 하나 이상의 선언이 있습니다.
각 선언에는 콜론으로 구분된 CSS 속성 이름과 값이 포함됩니다.
여러 CSS 선언은 세미콜론으로 구분하고 선언 블록은 중괄호로 묶습니다.
p {
color: red;
text-align: center;
}설명된 예
p는 CSS의 선택기입니다(스타일 지정하려는 HTML 요소를 가리킴: <p>).color는 속성이고red는 속성 값입니다.text-align은 속성이고center는 속성 값입니다.