CSS 정의 / 스타일 형식 / 스타일 시트

23.03.07 ver

1. 참고 도서 & 자료

• 웹 표준의 정석 http://aladin.kr/p/Fyssu

https://academy.dream-coding.com/courses/portfolio

Do it! HTML + CSS + 자바스크립트 웹 표준의 정석

---

웹 표준의 시작

HTML로는 웹 사이트의 내용을 나열하고

CSS로는 웹 문서의 디자인을 구성한다는 아이디어

 

2. CSS(cascading style sheets)

CSS를 공부한다는 것은 다양한 속성을 알아보고 각 속성마다 어떤 값을 사용하는지 배워 가는 것이다.

▶ HTML과 함께 웹 표준의 기본 개념

▶ HTML 태그로 작성한 웹 문서 내용에 디자인으로 옷을 입혀준다.

▶ 텍스트나 이미지, 배경의 크기나 배치 방법 등의 요소를 이용하여 디자인을 담당한다.

▶ 웹 디자인이나 웹 개발에서 매우 중요하다. HTML보다 더 많은 역할을 한다.

 

Cascading : 폭포같은, 계속되는, 연속되는

Style Sheets : 스타일 시트

=> 우선순위가 있는 스타일 시트

다시 말해, 두 가지 이상의 스타일이 있을 때 어떤 우선순위에 따라 적용할지 결정

 

Q. 우선순위?

1. 사용자 정의

2. 코드

- 구체적일수록 높다

- 태그 < .클래스 < #아이디 < 인라인 < !important

- 그러나 왠만해서는 !important를 사용하지 않는 것이 좋다. 유지보수하기에 힘들다.

- 동일한 레벨에서는 나중에 작성한 스타일이 우선순위가 높다.

3. 브라우저

 

 

■ 왜 스타일을 사용할까?

웹 문서에서 스타일(style)이란 HTML 문서에서 자주 사용하는 글꼴이나 색상, 정렬, 각 요소의 배치 방법과 같이 문서의 겉모습을 결정짓는 것을 말한다.

 

■ 반응형 웹 디자인

CSS를 이용하면 HTML로 작성한 내용은 그대로 두고 해당 기기에 맞게 CSS만 바꿔 주면 같은 내용을 여러 기기에서 볼 수 있다. 웹 문서를 따로 만드는 것이 아니라 웹 문서에서 작동하도록 만드는 것이 바로 스타일의 역할이다.

 

■ 스타일 형식 알아보기

선택자 { 속성1: 속성값; 속성2: 속성값2; }

선택자 : 스타일을 어드 태그에 적용할 것인지 알려주는 것

스타일 규칙 : 속성과 값이 하나의 쌍으로 이루어진 것 / 여러 줄로 표기할 수도 있고, 또는 한 줄로 표기할 수 있다.

세미콜론(;)으로 구분해서 스타일 규칙을 여러 개 지정할 수 있다.

 

■ 스타일 시트 알아보기

웹 문서 안에서는 스타일 규칙을 여러 개 사용한다. 이런 스타일 규칙을 한눈에 확인하고 필요할 떄마다 수정하기 쉽도록 한군데 묶어 놓는 것을 '스타일 시트'라고 한다.

 

1. 브라우저 기본 스타일
- CSS를 사용하지 않은 웹 문서라 하더라도 웹 브라우저에 표시할 떄는 기본 스타일을 사용한다.

 

2. 사용자 스타일 : 사이트 제작자가 만든다.

1) 인라인 스타일
- 스타일 시트를 사용하지 않고 스타일을 적용할 대상에 직접 표시하는 방법

(개인적으로, 인라인 스타일보다는 tailwindCSS를 추천)

<h1>ABC</h1>
<p style="color: blue;">ABC 초콜릿은 오지리널이 짱.</p>
<p>ABC초콜릿 블루베리는...</p>
<p>개인적으로는 아쉬운 맛</p>

2) 내부 스타일 시트

- 웹 문서 안에서 사용할 스타일을 같은 문서 안에 정리한 것

 

3) 외부 스타일 시트

- 사이트를 제작할 때는 여러 웹 문서에서 사용할 스타일을 별도 파일로 저장해 놓고 필요할 때마다 가져와서 사용하는 것이 일반적이다. 이렇게 따로 저장해 놓은 스타일 정보를 외부 스타일 시트라 한다. *.css라는 파일 확장자를 사용한다.

 

- 외부 스타일 시트 파일에 스타일을 작성할 때는 <style> 태그를 사용하지 않는다. 외부 스타일 시트는 웹 문서에 연결해야 스타일이 적용된다. 연결할 때는 <link> 태그를 사용한다.

<link rel="stylesheet" href="외부 스타일 시트 파일 경로">

---

3. 질문

Q. CSS 소스 경량화

• CSS 소스에 주석을 넣거나 줄 바꿈하는 것은 웹 사이트 작성자가 알아보기 쉽도록 하는 것일 뿐 웹 브라우저에는 아무 으미가 없다. 하지만 CSS 소스는 네트워크를 이용해 파일로 내려받으므로 되도록이면 파일 크기가 작은 것이 좋다. 그래서 CSS 소스가 길면 주석이나 줄 바꿈, 공백 등을 제거하고 꼭 필요한 정보만 남겨서 파일을 작게 만들어 사용한다. 이것을 CSS 소스 경량화(minify)라고 한다. 'css minify' 또는 'css compress'를 검색하면 다양한 툴을 찾을 수 있다.