업데이트: 2024년 5월 5일 오후 4시 51분
CSS는 웹 문서의 디자인을 정하는 언어입니다. CSS는 웹 문서의 디자인을 정하는 언어입니다. 예쁘게 꾸미기 위한 다양한 태그와 스타일보다는 동작과 원리에 대한 핵심 지식을 배우는 것이 중요합니다. 이 문서에서는 HCSS의 중요 개념을 소스 코드를 통해 배울 수 있습니다.
실시간 검색어 보러가기 »CSS는 Cascading Style Sheet의 약자로, 폭포수처럼 문서의 스타일을 적용시킨다는 뜻입니다. CSS가 나오기 전에는 웹 문서를 꾸미려면 해당 태그나 속성을 하나하나 붙여야 했습니다. 예를 들어 여러 개의 웹 문서에서 기존 글꼴이 마음에 들지 않아 바꾸려면 어떻게 해야 할까요? 해당 웹 문서의 모든 <font> 태그를 찾아가며 하나씩 수정을 해야 했지요. 글꼴 뿐만 아니라 배경색, 모양, 레이아웃도 마찬가지였어요. 이와 같이 HTML에서는 문서에 디자인을 입히고, 바꾸는 것이 너무 번거로웠기 때문에 디자인을 효과적으로 적용하기 위해 만든 것이 CSS입니다.
이번 강의에서는 CSS의 기본 개념과 구조, 문법등을 배우게 됩니다. CSS는 HTML로 만들어진 콘텐츠에 레이아웃과 디자인요소를 정의하는 기술로 잘 설계된 css 는 재활용이 가능하며 나아가 테마, 템플릿의 형태로 확장할 수 있습니다. 또한 자바스크립트와 연계해 콘텐츠의 내용이나 디자인을 동적으로 처리할 경우에도 유용하게 사용됩니다.
CSS는 실제로 프로그래밍 언어는 아닙니다. 마크업(markup) 언어 도 아닙니다. Style sheet 언어 입니다. HTML 문서에 있는 요소들에 선택적으로 스타일을 적용할 수 있다는 말입니다. 예를 들면, HTML 페이지에서 모든 문단 요소들을 선택하고 그 문단 요소들 안에 있는 텍스트를 빨갛게 바꾸려고 한다면 다음과 같이 CSS를 작성할 것입니다.
CSS는 Cascading Style Sheets의 약자로, HTML 문서의 스타일을 정의하는 스타일 시트 언어입니다. HTML은 텍스트와 같은 페이지의 실제 콘텐츠를 만드는 데 사용되는 반면 CSS는 레이아웃, 시각 효과 등 웹 페이지를 아름답고 매력적으로 만들어줍니다. HTML이 구조를 제공한다면, CSS는 이를 더욱 매혹적인 디지털 경험으로 바꿔줍니다.
CSS는 HTML 문서에 세 가지 방법으로 추가할 수 있습니다: