목차
- CSS
1-1. 문서내용 + 디자인 = 웹페이지 - style
2-1. style과 stylesheet
2-2. style 기본 형식 - stylesheet
3-1. 인라인 스타일시트
3-2. 내부 스타일시트
3-3. 외부 스타일시트
1. CSS
1-1. 문서내용 + 디자인 = 웹페이지
HTML의 style 속성 또는 <style> 태그 통해서도 스타일 적용은 가능하다. 하지만 이들이 결합돼 있으면 디자인 일괄 변경하는 데 있어 번거로움 내지는 까다로움이 따르게 마련이다. 작성했던 대로 하나하나의 요소를 일일이 바꿔줘야 하기 때문이다.
- 문서 내용 작성을 담당하는 HTML 통해 골조를 만들고, 여기에 디자인을 덧붙이면 웹페이지가 완성된다.
- 즉 문서내용/디자인을 분리해 작업하고 있는 것이다.
2. style
2-1. style과 stylesheet
- style은 정해진 속성을 입력해 웹페이지를 꾸미는 것이다.
- stylesheet는 웹페이지에서 반복적으로 쓰는 style을 모아놓은 것이다.
2-2. style 기본 형식
✅ 선택자 { style 속성 : 속성값; }
p { text-align : center; }
- 선택자(selector)는 어떤 태그에 스타일을 적용할지 선언하는 것이다. CSS 선택자 선택이 잘 치러져야 스타일 변경까지 알맞게 도달할 수 있다.
- 중괄호 {} 안에서 원하는 속성 여러 개를 나열해 설정할 수도 있다.
3. stylesheet
❗ 수업 중에는 변경사항을 빗대어가며 살펴야 하는 번거로움이 있어 '내부 스타일시트'를 사용할 것이다. 하지만 개발을 완료한 시점에는 반드시 '외부 스타일시트'로 분리하는 것이 유지보수 측면에 있어 최선이다. 문서내용/디자인간에 구분한 뒤, 링크(link)를 통해 읽어오도록 만들어야 한다는 점을 유념하자.
❗ 사용 권장 : 인라인 스타일시트 → 내부 스타일시트 → 외부 스타일시트
3-1. 인라인 스타일시트 .html
<body>
<div style="background-color : lightblue;">
...
</body>- .html 파일의 <body>에서 각 요소들의 style 속성 통해 적용한다.
- 인라인 스타일시트 사용이 권장되지는 않는다. 유지보수를 고려해서라도 HTML/CSS간에 구분이 있어야 하고, 만약 변경이 필요할 때는 일일이 다뤄야 하기 때문이다.
3-2. 내부 스타일시트 .html
<head>
<style>
table { background-color : lightblue; }
</style>
</haed>- .html 파일 안에서 작성하는 내부 스타일시트 예시이다.
- HTML 문서 상단의 <head> 안에서 <style> 태그 통해 적용할 수 있다.
3-3. 외부 스타일시트 .css
- 별도의 CSS 파일을 읽어와 적용하는 방법을 외부 스타일시트라고 한다: 예) style.css
<link href="style.css" rel="stylesheet" type="text/css">
- 외부로부터 .css 파일을 읽어들일 때는 <link> 태그를 사용한다.
'Frontend > CSS' 카테고리의 다른 글
| [CSS3] 색상 및 배경 스타일 | 이미지 | background (0) | 2022.02.11 |
|---|---|
| [CSS3] 목록 스타일 | 불릿 기호 변경/삭제 | list-style (0) | 2022.02.11 |
| [CSS3] 텍스트 스타일 | 문단 스타일 | font | text (0) | 2022.02.11 |
| [CSS3] link | 외부 스타일시트 | 웹 폰트 | CSS 단위 (0) | 2022.02.10 |
| [CSS3] 선택자 | 선택자 우선순위 | 태그 | 아이디 | 클래스 (0) | 2022.02.10 |
