CSS란 ?
웹 페이지의 스타일을 정의하는 W3C 표준 스타일 언어 입니다. 웹 페이지의 구조를 담당하는 HTML과는 달리 색상, 폰트 , 레이아웃 등 디자인 요소를 제어합니다. HTML은 건물 구조를 만드는 역할을 하고 CSS는 그 건물의 인테리어를 담당하는 것 입니다.
CSS의 필요성
초창기 HTML에서는 스타일을 태그에 직접 정의하는 인라인 스타일 방식이 사용되었습니다. 그러나 이 방식은 HTML 구조와 스타일이 혼합되어 유지보수 및 확장성이 떨어지는 문제를 야기했습니다. 이러한 문제를 해결하기 위해 W3C는 CSS를 도입하여 웹 페이지의 구조와 디자인을 분리했습니다. 이제 CSS를 수정하는 것만으로도 웹사이트의 전체적인 디자인을 바꿀 수 있게 되었습니다.
CSS의 장점
- 유지보수 용이성 : CSS를 사용하면 웹피이지의 내용을 수정하더라도 디자인에는 영향을 미치지 않기 때문에 유지보수가 수월합니다.
- 다양한 기기 지원 : CSS는 반응형 웹 디자인을 가능하게 하여 동일한 HTML 구조를 사용하면서도 다양한 기기에 맞춰 스타일을 조정할 수 있습니다.
CSS 기본 문법
CSS의 기본 문법은 선택자와 스타일 규칙으로 구성됩니다.
1. CSS 스타일 형식
- 선택자 : CSS 스타일을 적용할 HTML 요소를 지정합니다.
- 스타일 규칙 : 중괄호 {} 안에 속성명(property)과 값(value)의 쌍으로 스타일 정보를 입력합니다.
- 속성명 예 : `color` , `font` , `width` , `height` , `border` 등
- 여러 스타일을 작성할 경우 각 속성 뒤에 세미콜론 ; 을 붙입니다.
가독성을 높이기 위해 줄 바꿈과 들여쓰기를 사용하는 것이 권장됩니다.
2. CSS 주석
- 주석은 `/*` 와 `*/` 사이에 작성되며 한 줄 또는 여러 줄을 포함할 수 있습니다.
- 웹 브라우저에서 소스 보기를 통해 주석 내용이 노출되므로 중요한 정보는 포함하지 않는 것이 좋습니다.
CSS 스타일 적용 방법
1) 인라인 스타일 (Inline style)
- HTML 태그의 style 속성에 직접 스타일 규칙을 작성하는 방법입니다.
- 특별한 경우를 제외하고는 사용을 권장하지 않으며 우선순위가 가장 높습니다.
- 장점 : 간단한 수정이 필요할 때 유용하며 특정 요소에만 스타일을 적용할 수 있습니다.
- 단점 : 코드가 복잡해지며 스타일을 재사용할 수 없고 유지보수가 어렵습니다. 또한 우선순위가 가장 높기 때문에 나중에 CSS 파일로 변경하기 어려울 수 있습니다.
2) 내부 스타일 시트 (Internal style sheet)
- 웹 페이지 내부에서 스타일을 정의하는 방법으로 <head> 태그 안에 <style> 태그를 사용합니다.
- 각 웹 페이지마다 반복해서 작성해야 하므로 번거로울 수 있습니다.
- 장점 : 해당 문서에서만 적용되기 때문에 다른 페이지에 영향을 미치지 않으며 HTML 파일 하나에 모든 스타일을 관리할 수 있습니다.
- 단점 : 여러 웹페이지에서 동일한 스타일을 적용하려면 각 페이지마다 스타일을 반복 작성해야하므로 비효율적입니다.
3) 외부 스타일 시트 (External style)
- CSS 코드를 별도의 파일로 저장하고 HTML 문서에서 링크하여 사용하는 방법입니다.
- 장점 : 여러 웹페이지에서 공통적으로 사용할 수 있으며 코드의 재사용성이 높고 유지보수가 용이합니다. CSS 파일을 한 번만 수정하면 연결된 모든 페이지에 변경 사항이 반영됩니다.
- 단점 : HTML 문서와 별도로 관리해야 하므로 파일 관리가 필요합니다.
4) CSS @import
- CSS 파일 내에서 다른 CSS 파일을 가져오는 방법입니다.
- 장점 : 여러 CSS 파일을 하나로 통합할 수 있어 구조화된 스타일 관리를 지원합니다.
- 단점 : 페이지 로딩 속도에 영향을 줄 수 있으며 우선순위가 낮아 스타일 충돌이 발생할 수 있습니다.
5) CSS 프레임워크 사용
- Bootstrap , Tailwind CSS 등과 같은 CSS 프레임워크를 사용하여 미리 정의된 스타일과 구성 요소를 활용하는 방법입니다.
- 장점 : 빠른 개발이 가능하고 일관된 디자인을 유지할 수 있습니다. 반응형 웹 디자인을 쉽게 구현할 수 있습니다.
- 단점 : 프레임워크의 규칙을 이해해야 하며 불필요한 코드가 포함될 수 있습니다.