CSS?
종속형 시트 또는 캐스케이딩 스타일 시트(Cascading Style Sheets, CSS)는 마크업 언어가 실제 표시되는 방법을 기술하는 언어로, HTML과 XHTML에 주로 쓰이며, XML에서도 사용할 수 있다. W3C의 표준이며, 레이아웃과 스타일을 정의할 때의 자유도가 높다.
HTML이 웹사이트의 구조를 담당한다면 CSS는 스타일을 담당한다.
CSS는 selector, property value로 구성되어 있다.
selector(선택자) : 스타일을 적용시킬 태그를 명시한다.
property : 적용할 스타일을 지정한다.
value : property에 대한 값을 지정한다.
HTML페이지에 스타일을 적용하는 방법에는 3가지가 있다.
1. inline
HTML태그 안에다가 적용한다.
다른 CSS파일에 적용한 것 보다 가장 먼저 적용한다.
<p style="border:1px;color:red;font-size:2em;">태그 안에 style=과 함께 적용하며 ';'으로 property:value를 구분하는 것을 볼 수 있다.
2. internal
style 태그로 지정한다.
구조와 스타일이 섞이게 되므로 유지보수가 어렵다.
별도의 CSS파일을 관리하지 않아도 되며 서버에 CSS파일을 부르기 위해 별도의 브라우저가 요청을 보낼 필요가 없다.
<head>
<style>
p {
font-size : 2em;
border:1px solid gray;
color: red;
}
</style>
</head>
<body>
<div>...</div>
</body><style>태그 안에 값을 지정한다.
3. external
외부파일(.css)로 지정하는 방식이다.
CSS 코드가 아주 짧지 않다면 가급적 이 방법으로 구현하는 것이 가장 좋다.
현업에서는 여러개의 CSS 파일로 분리하고 이를 합쳐서 서비스에서 사용하기도 한다.
internal 코드와 같은 css코드를 구현하고, style.css와 같은 별도 파일로 만든다.
이후에 아래처럼 link태그로 추가하면 된다.
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
...
</body>
</html><link>태그 아래에 href=를 이용해 css 파일 경로를 지정한다.
4. 우선순위
inline은 별도의 우선순위를 갖지만, internal 과 external은 우선순위가 동등합니다. 따라서 겹치는 선언이 있을 경우 나중에 선언된 속성이 반영된다.
CSS 상속
상속이란 상위에서 적용한 스타일은 하위에도 반영됨을 의미한다.
재사용 측면에서 좋다. 만약 그게 안되어 있다면 굉장히 엘리먼트마다 다양한 속성이 필요한데 매번 정의해야하는 번거로움이 생긴다.
하지만 모든 CSS 속성이 상속이 되는 것은 아니다.
box-model이라고 불리는 속성들(width, height, margin, padding, border)과 같이 크기와 배치 관련된 속성들은 하위 엘리먼트로 상속이 되지 않는다.
Cascading
CSS는 여러 가지 스타일 정보를 기반으로 최종적으로 경쟁에 의해서 적절한 스타일이 반영된다.
여기서 경쟁이란 CSS 파일에서 설정을, 정의를 해놨거나, 아니면 inline으로 또 정의를 해놨거나 중복으로 정의된 경우 어떠한 기준으로 스타일을 최종적으로 반영하느냐를 의미한다.
- 선언방식에 따른 차이
inline > internal > external
- 동일한 경우 나중의 것이 적용됨
- 더 구체적으로 표현된 것이 먼저 적용됨
- id > class > element
더 자세히 알고 싶다면 구글에 css specificity를 검색
[부스트코스 관련 강의 링크]
CSS 선언방법 - https://www.edwith.org/boostcourse-web/lecture/16673/
상속과 우선순위 결정 - https://www.edwith.org/boostcourse-web/lecture/16674/
'Tech > BoostCourse - WEB' 카테고리의 다른 글
| [부스트코스] CSS (3/3) (0) | 2020.02.07 |
|---|---|
| [부스트코스] CSS (2/3) (0) | 2020.02.07 |
| [부스트코스] HTML (0) | 2020.02.05 |
| [부스트코스] 웹 프로그래밍을 위한 중요한 용어와 WAS (0) | 2020.02.02 |
| [부스트 코스] 웹서버 (0) | 2020.02.02 |
