<CSS 기초> 01. CSS의 기본과 사용

 

1. CSS 기본

 CSS는 Cascading Style Sheet의 약자이다. 기존의 HTML은 웹 문서를 다양하게 설계하고 수시로 변경하는데 많은 제약이 따른다. 이를 보완하기 위한 것이 스타일 시트이고 스타일 시트의 표준이 CSS이다.

 

 CSS는 즉 웹 문서의 전반적인 스타일을 미리 저장해 둔 스타일시트이다. 문서 전체의 일관성을 유지할 수 있고, 세세한 스타일 지정의 필요를 줄어들게 하였다. 즉 더 다양한 디자인을 더 효율적으로 할 수 있게 되었고 유지와 보수도 기존에 비해 간편해졌다.

 

2. CSS 사용

 우리가 작성했던 HTML에서 CSS스타일을 입히는 방법은 총 3가지가 존재한다.

 

 첫째, HTML문서의 태그에 속성으로 style을 주는 것이다. 이 스타일 속성에 CSS 코드를 입력함으로써 그 태그에 스타일을 줄 수 있다. 그러나 이는 HTML문서에 하나하나 입히는 것이므로 매우 비효율적일 뿐만아니라 유지보수도 어려워진다.

 

 둘째, HTML문서의 헤더에 <style> 태그를 주는 것이다. 이는 첫번째 방식에 비해 조금 효율적으로 보일 수 있으나 이 또한 HTML문서안에서 작업하게되면 후에 유지보수가 매우 번거로울 수 있다. 특별한 경우가 아니라면 쓰지 않는 것이 좋다.

 

 셋째, 가장 보편적인 방법으로 HTML문서의 헤더에 link태그를 이용하여 CSS문서에 연결을 시켜주는 것이다. CSS문서의 경로를 입력하여 HTML문서에 작성했던 CSS 스타일을 적용할 수 있다. 이는 스타일을 고치고 싶을 경우 CSS에서만 수정하면 되므로 유지 보수가 효율적으로 동작할 수 있다.

 

 

 

---

 

 

 

참고

 

이 글은 구름에듀에서 관련 강의를 구매하여 수강 후 공부하며 작성한 글입니다.

모든 내용과 코드 및 이미지는 직접 재구성하였습니다.

 

 

김버그의 HTML&CSS는 재밌다 - 구름EDU

 

 

CSS