CSS의 정의와 개요에 대해서 알아보겠습니다.
[ Contents ]
1. CSS란?
CSS(Cascading Style Sheet): 웹페이지의 레이아웃이나 스타일, 디자인을 정의하는 언어
HTML이 웹페이지의 내용이나 구조를 담당한다면, CSS는 웹페이지를 꾸며주는 '서식'입니다. CSS를 통해서 색깔이나 크기, 여백, 배치까지도 조정할 수 있습니다.
그런데 왜 '계단형' 스타일 시트일까요? 그 이유는 스타일이 '중첩'해서 적용 가능하며, 동일한 속성일 경우 '우선순위'에 따라 적용되기 때문입니다.
즉 우선순위에 따라 스타일은 계층적으로 존재하며, 우선순위가 높은 스타일부터 하나씩 적용됩니다. 이에 대한 자세한 설명은 추후 글을 통해서 서술하겠습니다.
2. CSS 구성 요소
선택자 { 속성1: 속성값; 속성2: 속성값; }
'선택자'는 속성값을 적용할 태그(영역)를 의미합니다. 여러 속성을 한 번에 적용할 수 있으며, ;(세미콜론)으로 구분합니다. 속성이 1개일 때도 ;를 뒤에 붙여주는 게 좋습니다.
<head>
<style>
h2 {color: red; font-size: 40px;}
</style>
</head>
<body>
<h2>star가 되고나서</h2>
<h2>star7sss.tistory.com</h2>
</body>위 예제에서 선택자는 'h2' 태그이고, 적용한 속성은 color, font-size입니다.
이는 예시를 위한 코드이며, CSS는 .css파일에 따로 작성하고 불러와서 사용하는 게 좋습니다. CSS를 적용하는 방법은 크게 4가지가 있으며, 이는 이후 글에서 후술 하겠습니다.
3. CSS를 사용할 때의 장점
1. 스타일의 변경과 웹페이지 일관성 유지가 용이
2. 문서의 내용과 스타일 정보가 분리
3. CSS 파일은 로컬 PC의 캐시 메모리에서 재활용되므로 성능 향상
프로그래밍에서 동일한 코드를 반복해서 사용하는 것보다, '함수'를 정의해서 사용할 때의 장점과 유사합니다. IT업계에서는 동일한 코드를 '중복'해서 사용하는 걸 굉장히 싫어합니다. CSS의 도입도 유사한 맥락이라고 볼 수 있어요.
특정 태그에 일일이 동일한 스타일을 적용하지 않고도 한 번에 적용할 수 있으며, 유지보수도 굉장히 쉬워집니다. 또한 문서 내용과 스타일을 분리함으로써, 가독성도 올라가요. 거기다가 캐싱을 이용해서 성능도 향상되니, CSS 파일로 분리하지 않고 HTML에 일일이 스타일을 적용하는 사람은 때려도 무죄입니다.
'Web' 카테고리의 다른 글
| [CSS] 스타일을 지정하는 5가지 방법 (타입/자손/클래스/아이디/가상클래스 선택자) (0) | 2022.05.01 |
|---|---|
| [CSS] CSS를 적용하는 4가지 방법 (0) | 2022.04.30 |
| [HTML] 블록 태그와 인라인 태그의 종류와 차이점 (feat. div와 span) (0) | 2022.04.28 |
| [HTML] 시맨틱 태그, 웹페이지의 구조를 알려주는 주석 (0) | 2022.04.27 |
| [HTML] 하이퍼링크 태그 <a> (새 탭으로 열기, 페이지 내 이동) (0) | 2022.04.26 |
댓글