본문 바로가기

풀스택 공부/Udemy: The Complete 2024 Web Development

Introduction to CSS: Why do we need CSS?

CSS란 무엇인가?

CSS는 "Cascading Style Sheets"의 약자로, 웹사이트의 스타일을 정의하고 미적으로 개선하기 위해 사용하는 언어이다. 이름처럼 스타일이 "폭포처럼" 계층적으로 적용되며, 가장 일반적인 설정에서부터 가장 구체적인 설정까지 단계적으로 적용된다.

CSS의 필요성 및 역사

1. 초창기 웹 개발의 문제

초창기 인터넷에서는 HTML만으로 웹사이트를 구성했기 때문에 개발자들이 원하는 대로 웹사이트를 스타일링하기 어려웠다. 당시의 HTML에는 글꼴, 색상, 정렬과 같은 스타일 속성을 지정할 수 있는 기능이 부족했다.

2. HTML 3.2의 도입 (1997)

폰트 태그: 글꼴 크기, 색상, 글꼴 종류 지정 가능.

센터 태그: 콘텐츠를 화면 중앙에 배치 가능. 그러나, HTML에 스타일 정보를 직접 추가하면 코드가 복잡해지고 가독성이 떨어지는 문제가 있었다.

3. CSS의 등장 (1996)

W3C 컨소시엄에서 CSS를 도입하여 HTML의 콘텐츠와 스타일을 분리.

CSS는 웹사이트의 스타일을 별도의 파일로 관리할 수 있게 하여 HTML 코드의 간결성과 유지보수성을 크게 향상시켰다.

CSS의 기능 및 장점

HTML은 콘텐츠의 구조를 정의하고, CSS는 스타일(폰트, 색상, 레이아웃 등)을 지정한다.

스타일과 콘텐츠를 분리함으로써 유지보수가 쉬워지고, 코드 재사용성이 높아진다.

CSS만으로 HTML의 변경 없이 디자인을 완전히 변경할 수 있다.

 

CSS의 실제 효과

CSS는 단순한 HTML 페이지를 아름답게 변형시킬 수 있다. CSS가 적용되지 않은 페이지는 기본 텍스트와 구조만 보이지만, CSS를 추가하면 글꼴, 색상, 레이아웃 등이 개선되어 전문적인 디자인을 구현할 수 있다.

 

결론

CSS는 웹사이트를 시각적으로 풍부하게 만들고, 스타일과 콘텐츠를 분리하여 개발 효율성을 높이는 필수 기술이다. 다음 단계에서 CSS를 활용해 실제로 웹사이트를 스타일링하는 방법을 배울 수 있다.