CSS 는 무엇인가? (Cascading Style Sheets)

CSS

 

 

Cascading Style Sheets는 웹페이지의 스타일을 지정하는 강력한 도구이다.

 

HTMl 은 웹페이지의 구조와 내용을 제공한다면, 

CSS는 해당 내용의 모양과 디자인을 제어할 수 있다.

CSS를 사용하면 글꼴 및 색상에서 레이아웃 및 애니메이션까지 여러 가지를 제어할 수 있다.

 

건축을 지을때 기초공사와 구조틀을 잡았다면

이제 도장을하고 인테리어를 해서 꾸미는 것은  CSS와 비슷하다고 보면 된다.

 

 

CSS는 HTML 요소를 선택하고 스타일을 적용하여 작동한다.

태그 이름, 클래스, ID 또는 기타 특성을 기반으로 특정 요소를 대상으로 하는

선택기를 사용하여 스타일을 적용할 수 있다.

Style 은 상속 될 수도 있다. 즐, 상위 요소에 적용된 스타일이 하위 요소에도 자동으로 적용된다.

 

몇 가지 예시이다.

 

body {
  font-family: Arial, sans-serif;
  background-color: #f5f5f5;
}

h1 {
  color: #007bff;
  font-size: 36px;
  text-align: center;
}

p {
  font-size: 18px;
  line-height: 1.5;
}

.button {
  display: inline-block;
  background-color: #007bff;
  color: #fff;
  padding: 10px 20px;
  border-radius: 5px;
  text-decoration: none;
}

 

이 예시에서는 본문, h1 , p 및  button 선택을 해서 스타일을 정의했다.

 

각각 스타일이 수행하는 작업은 다음과 같다.

 

본문은 전체 페이지의 글꼴 모음과 배경색을 설정한다.

h1 은 모든 <h1> 태그의 색상, 글꼴 크기 및 텍스트정렬을 설정해 줬다.

 

p는 모든 <p> 태그의 글꼴 크기와 줄 높이를 설정했다.

 

.button 은 표시, 배경 색, 텍스트 색상, 패딩, 테두리 반경 및 텍스트 장식을 포함하여,

"button"이라는 클래스가 있는 모든 요소에 대한 스타일을 설정했다.

 

이것들은 CSS 가 할 수 있는 몇 가지의 예시일 뿐이다.

CSS는 복잡하고 정교한 디자인을 만들 수 있는 다양한 선택기, 속성 및 값을 제공한다.

 

다양한 화면 크기와 장치에 적응하는 반응형 디자인을 만들고,

애니메이션과 전환을 사용하여 페이지에 동적 효과를 추가할 수 있고,

 

기기 또는 화면 크기에 따라서 다양한 스타일을 적용하려면 미디어 쿼리를 사용하면 된다.

bootstrap 또는 materialize와 같은 프레임워크를 사용하여서 사전 제작된 CSS 클래스 및

구성 요소를 사용하여서 반응형 디자인을 빠르게 생성할 수도 있다.

 

전반적으로 CSS는 웹디자인을 위한 필수적인 도구언어이며 이를 마스터하면 아름답고 기능적이며,

사용자 친화적인 웹 페이지를 만드는데 큰 도움이 될 수 있다.