1. CSS란 무엇인가?
Cascading Style Sheet 의 약자이며, 종속 연결되는 스타일 지정 문서를 말한다.
HTML 태그의 모양을 변경하는 통합 문서체계를 말하며, 구조화 된 내용을 꾸미는 역할을 한다.
2. 브라우저의 기본 스타일
브라우저의 종류에 따라 기본 폰트의 구현이나 스타일이 결정된다.
때문에 개발자는 주로 사용하는 브라우저에 대해서 호환성을 고려하여 개발을 진행한다.
Chrome, Microsoft Edge, Safari 등 Major한 브라우저로 개발을 진행하는 것이 용이하다.
3. html에서의 스타일 지정: 명령어의 마무리 지정 [ ; ]
디자인 요소는 복합적으로 이루어져 있다.
때문에 style을 복수로 지정하는 경우가 발생하는데 이런 경우, style 간의 혼동을 방지하여야 한다.
이에 사용하는 ; (세미콜론)을 사용하여 컴퓨터가 인지할 수 있는 명령어의 끝을 지정해줘야 한다.
4. 왜 CSS를 사용하여야 할까?
style 지정 방법은 다양하다.
해당 Tag에 style을 직접 도입하는 In-Line 방식은 Tag에 지정된 style을 확인하기 쉽다는 장점이 있지만, 전체 코드가 길어지고 개발 속도가 느려지는 단점이 있다.
이에 style을 지정할 때 각 Tag 별로 주는 것이 아니라 해당 Tag가 속한 대분류에 style을 주는 것이 더욱 효율적이다.
이러한 기법을 CSS라고 한다.
<p style=”background-color: green;”>1번 항목</p>
<p style=”background-color: green;”>1번 항목</p>
/*위와 아래의 구현된 화면은 기능이 동일하다.*/
<head>
<style>
p{background-color: green;}
</style>
</head>
5. CSS 사용시 기본 규칙: style은 head에 적용한다.
CSS의 이점은 지정할 style을 한번 지정하면 html 문서에서 모두 동일하게 적용할 수 있다는 것이다.
이에 생산 속도가 증가하고 분업이 용이하게 되었다.
재밌는 점은 해당 style을 head안에 도입하는 것인데, 컴퓨터가 데이터를 이해하는 순서가 위에서 아래로, 즉 head에서 먼저 시작하기 때문이다.
style 태그를 통해 지정한 영역은 마지막에 지정한 정보로 고정되는데, p의 스타일을 2번 지정하거나 style 태그를 새로 생성하여 p를 재차 지정한다면 마지막으로 지정한 데이터로 화면이 구현된다.
<style>
td{background-color: blue;}
p{background-color: blue;}
p{background-color: red;} <!--해당 컬러로 화면에 구현된다.-->
</style>
<style>
td{background-color: red;} <!--해당 컬러로 화면에 구현된다.-->
</style>
만약 어느 항목만 특정하게 style을 지정하고 싶다면, 현재 단계에서는 in-line 방식으로 적용할 수 있다.
(in-line 방식은 head에서 지정한 <style></style>의 영향을 받지 않는다.)
Tip. CSS 주석은 Tag 주석인 <!-- -->가 아닌 /* */을 주석으로 사용한다.
6. CSS의 기본 형식
CSS는 특정 Tag안에서 모양을 지정해주는 일련의 기법이다.
다양한 속성을 지정할 수 있다는 장점이 있다.
[선택자{ 속성1: 값; 속성2:값; 속성3:값;}] 과 같이 속성에 따라 ; 로 데이터를 구분하고 적절한 들여쓰기, 혹은 집단 규범에 따라 데이터의 구분을 진행하여야 한다.
만약 해당 과정이 진행되지 않는다면 데이터가 혼재되어 수정이 어려운 단점이 있고, ;를 사용하지 않으면 구현이 안될 가능성도 있다.
7. CSS와 HTML 분리 (해당 방법을 Chapter 10을 완료하기 전까지 사용하지 않는다)
실제 웹 페이지는 한 페이지에 수 많은 정보를 가지고 있다.
문제는 이러한 정보로 인해 데이터 구조 파악이 어려울 수 있다는 것이다.
또한 프로그래밍은 단위 기간 동안 최대의 효율을 구축하는 것을 목표로 한다.
이에 대부분 현업에서는 CSS와 HTML을 분리하여 사용한다.
분리하는 방법은 다음 정보를 <style></style> 대신에 삽입하는 것이다.
<link rel="stylesheet" href="style.css">
href는 CSS 파일의 경로 지정이다.
rel은 형식을 말하는 것이기 때문에 CSS 경우 stylesheet이다.
style 적용의 우선 순위는 동일하기 때문에 이러한 분업 환경에서는 인라인 태그를 되도록 사용하지 않는다.
'CSS > 기본 이론' 카테고리의 다른 글
| [CSS] Chapter 06. Color의 이해 (0) | 2021.05.16 |
|---|---|
| [CSS] Chapter 05. font의 속성 (0) | 2021.05.15 |
| [CSS] Chapter 04. 그룹을 지정하는 Tag (0) | 2021.05.14 |
| [CSS] Chapter 03. CSS Selector (선택자) (0) | 2021.05.13 |
| [CSS] Chapter 02. CSS Style Precedence (0) | 2021.05.12 |
