CSS란?
CSS는 Cascading Style Sheets의 약자로, 웹 페이지의 디자인과 레이아웃을 정의하는 스타일 시트 언어입니다. CSS는 HTML과 함께 사용하여 웹 페이지를 시각적으로 향상시키고 사용자 경험을 개선할 수 있습니다. HTML 요소에 대한 글꼴, 색상, 크기, 간격 등 웹페이지의 디자인과 레이아웃을 효과적으로 제어할 수 있습니다. CSS는 1996년에 W3C 표준 권고안으로 최초 제정됩니다. 이후 1998년에 CSS2가 발표되었으며, 2005년부터 현재 사용 중인 CSS3가 적용 및 개발되고 있습니다. CSS3부터는 다양한 기능과 선택자, 애니메이션 등 추가적인 기능을 제공합니다. CSS는 현재 모듈(module)별로 개발되고 있으며, 브라우저 공급자가 지원할 모듈을 자유롭게 선택할 수 있도록 하고 있습니다.
최신 버전의 CSS 표준 권고안에 대한 더 자세한 정보를 원한다면, W3C 공식 사이트를 방문하여 확인할 수 있습니다.
https://www.w3.org/TR/CSS/
CSS 표준 권고안의 모듈별 현재 상태에 대해 자세히 알고 싶다면, 다음 링크를 방문하여 확인할 수 있습니다.
https://www.w3.org/Style/CSS/current-work
CSS 구성 요소
CSS는 선택자(selector)와 선언부(declaration)로 구성됩니다. 선택자는 스타일을 적용할 HTML 요소를 선택하는 역할을 하고, 선언부에는 선택한 요소에 적용할 스타일 속성과 값이 포함됩니다.
선택자 { 속성 : 값; }여기서 선택자는 HTML 요소를 지정하고, 중괄호 { } 안에는 스타일 속성과 속성값을 입력합니다. 각 속성과 속성값은 콜론(:)으로 구분되며, 여러 개의 스타일은 세미콜론(;)으로 구분됩니다. 간혹 세미콜론(;)이 누락되어 오류가 나는 경우가 있으니 유의하여 입력하셔야 합니다.
예를 들어, 아래는 예시는 색상을 빨간색으로, 배경색을 노란색으로 지정하는 CSS 코드입니다.
h1 { color: red; background-color: yellow; }클래스(Class)와 ID 선택자
CSS 선택자는 HTML 요소의 태그 이름, 클래스(class), ID, 속성 등을 사용하여 요소를 선택합니다. 클래스는 한 페이지에 동일한 선택자가 여러 개 존재할 수 있으며 반면 ID 선택자는 한 페이지에 하나만 존재할 수 있습니다. 때문에 클래스 선택자를 이용하면 여러 요소에 한 번에 스타일을 적용할 수 있고, ID 선택자는 하나의 특정 요소에 스타일이 적용됩니다. CSS에서 클래스를 선택하려면 .클래스명을, ID를 선택하려면 #ID명 이라고 입력하면 됩니다.
ID선택자
#아이디명{ 속성1:속성값; 속성2:속성값; }class선택자
.클래스명{ 속성1:속성값; 속성2:속성값 }사용 예시
<style>
#id{border:solid 1px #ccc;}
.class{color:red; }
</style>
<div id="id">
<div class="class">안녕하세요</div>
<p class="class">현이코딩입니다.</p>
<p>감사합니다.</p>
</div>현이코딩입니다.
감사합니다.
CSS를 사용하는 이유
- 디자인과 레이아웃 분리 : CSS를 사용하면 웹 페이지의 디자인과 레이아웃을 HTML 코드로부터 분리할 수 있습니다. HTML은 웹 페이지의 구조를 담당하고, CSS는 디자인을 담당합니다. 이로써 코드의 가독성이 향상되고 유지 보수가 용이해집니다.
- 일관성과 재사용성 : CSS를 사용하면 스타일을 정의하여 여러 요소에 일관된 디자인을 적용할 수 있습니다. 스타일이 중복되는 것을 방지하고 코드의 양을 줄일 수 있으며, 스타일 시트를 다른 페이지에서 재사용할 수 있습니다.
- 유연한 스타일링 : CSS는 다양한 스타일 속성과 선택자를 제공하여 웹 페이지의 스타일링을 자유롭게 조정할 수 있습니다. 텍스트 스타일, 배경색, 여백, 테두리 등 다양한 요소를 조작하여 웹 페이지를 원하는 대로 디자인할 수 있습니다.
- 반응형 웹 디자인 : CSS를 사용하면 반응형 웹 디자인을 구현할 수 있습니다. 반응형 웹 디자인은 다양한 디바이스와 화면 크기에 맞게 웹 페이지의 레이아웃과 스타일을 조정하는 것을 의미합니다. CSS의 미디어 쿼리(Media Query)를 활용하여 화면 크기에 따라 다른 스타일을 적용할 수 있습니다.
- 접근성과 검색 엔진 최적화(SEO) : CSS를 사용하면 웹 페이지를 접근성 좋고 검색 엔진에 최적화된 형태로 디자인할 수 있습니다. 시맨틱 HTML태그와 함께 CSS를 사용하면 스크린 리더와 같은 보조 기술을 사용하는 사용자들에게도 웹 페이지를 적절히 전달할 수 있습니다. 또한, 검색 엔진은 웹 페이지의 콘텐츠를 이해하기 쉽게 만들어주는 CSS를 긍정적으로 평가합니다.
CSS 종류와 적용방법
CSS를 적용하는 방법에는 인라인 스타일(Inline Style), 내부 스타일(Internal Style), 외부 스타일(External Style)이 있습니다. 각각의 특징과 사용법을 살펴보겠습니다.
인라인 스타일(Inline Style)
인라인 스타일은 HTML 요소의 속성으로 HTML에 직접 스타일을 지정하는 방법입니다. HTML 태그 내에 style 속성을 사용하여 스타일을 적용합니다. 이 방식은 한 번 설정된 스타일을 변경하기가 매우 어려우며, 스타일 시트를 사용하는 많은 이점을 잃게 됩니다. 따라서 이 방식은 될 수 있으면 꼭 필요한 경우에만 사용해야 합니다. 인라인 스타일은 특정 요소에 대한 스타일을 직접 정의하므로 우선순위가 가장 높습니다. 그러나 인라인 스타일은 스타일을 하나의 HTML 요소에만 적용되기 때문에 재사용성이 낮고, 코드의 가독성을 저하시킬 수 있습니다. 따라서 일반적으로 규모가 작은 스타일 조정이 필요할 때 사용됩니다.
예시
<h1 style="color: red; font-size: 20px;">제목</h1>내부 스타일(Internal Style)
내부 스타일은 HTML 문서 내에 <style>태그를 사용하여 스타일을 정의하는 방법입니다. <style>태그는 일반적으로 <head>태그 내에 위치합니다. 내부 스타일 시트는 해당 HTML 문서에만 스타일을 적용할 수 있습니다. 내부 스타일은 하나의 HTML 문서에서만 적용되며, 해당 문서 내의 모든 요소에 스타일을 적용할 수 있습니다. 스타일을 일괄적으로 적용할 수 있으므로 인라인 스타일보다 재사용성이 높고, 코드의 가독성을 높일 수 있습니다.
예시
<head>
<style>
h1 {
color: red;
font-size: 20px;
}
</style>
</head>
<body>
<h1>안녕하세요</h1>
</body>외부 스타일(External Style)
외부 스타일은 별도의 CSS 파일로 스타일을 정의하고 HTML 문서에 연결하여 사용하는 방법입니다. CSS 파일은 .css 확장자를 가지며, HTML 문서에서 <head>태그에 <link>태그를 사용하여 연결합니다. 외부 스타일 시트는 웹 사이트 전체의 스타일을 하나의 파일에서 변경할 수 있습니다. 외부 스타일은 여러 HTML 문서에서 재사용할 수 있습니다. 이는 웹 사이트 전체에 일관된 디자인을 적용하기에 유용합니다. 또한, HTML과 CSS를 분리하여 유지 보수가 용이하며 문서의 가독성이 높으며 효과적으로 사용할 수 있습니다.
예시
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>제목</h1>
</body>
CSS 적용 우선순위
CSS에서 스타일 규칙들이 서로 충돌할 때, 스타일의 우선순위에 따라 어떤 스타일이 적용될지 결정됩니다. 스타일의 우선순위는 다음과 같은 규칙에 따라 결정됩니다.
CSS 적용 우선순위
!important > 인라인 스타일 > ID > class > tag > 상속된 속성!important
속성 값 뒤에 !important를 붙이면 다른 어떤 스타일보다도 높은 우선순위를 가집니다.
h1{ color : red !important; }인라인 스타일(Inline Style)
인라인 스타일은 HTML 요소의 style 속성에 직접 지정된 스타일입니다.
인라인 스타일은 다른 모든 스타일 규칙보다 우선시 됩니다.
<h1 style="color: red;">ID 스타일(ID Style)
ID 선택자(#)를 사용하여 스타일이 정의된 요소에 적용됩니다. ID 스타일은 클래스 선택자와 태그 선택자보다 우선시됩니다.
#myElement { color: red; }클래스 스타일(Class Style)
클래스 선택자(.)를 사용하여 스타일이 정의된 요소에 적용됩니다. 클래스 스타일은 태그 선택자보다 우선시됩니다.
.myClass { color: red; }태그 스타일(Tag Style)
HTML 요소의 태그 이름을 직접 사용하여 스타일이 정의된 요소에 적용됩니다.
h1 { color: red; }상위 요소의 스타일(Inheritance)
요소가 부모 요소로부터 상속하는 스타일입니다. 일반적으로 텍스트 스타일 관련 속성(font, color, text-align 등)이 상속됩니다.
스타일 우선순위(Source Order)
동일한 우선순위를 가진 스타일 규칙이 있다면, 마지막으로 선언된 규칙이 우선적으로 적용됩니다. 따라서 스타일 시트 파일에서 나중에 정의된 규칙이 앞선 규칙을 덮어씁니다. <link>로 연결된 css도 동일한 스타일에 대해서 마지막에 연결된 css가 우선순위를 가집니다.
h1{ color : red; }
h1{ color : blue; } <- 우선 적용우선순위 규칙을 이해하면 CSS 스타일 규칙 간 충돌을 효과적으로 해결할 수 있습니다. 일반적으로 더 구체적인 선택자와 인라인 스타일이 다른 스타일 규칙보다 우선시됩니다. 그리고 스타일 규칙의 선언 순서도 중요한 역할을 합니다.
'CSS' 카테고리의 다른 글
| [CSS] 박스모델 개념 알기쉽게 설명! (0) | 2024.02.23 |
|---|
