반응형
1. CSS [Cascading Style Sheet]
- HTML과 함께 웹을 구성하는 기본 프로그래밍 요소
- 웹 문서의 디자인 요소를 담당한다.
- HTML과 분리하여 정의가 가능하다
- 자바스크립트와 연계가 가능하고, 템플릿의 생성이 가능하다 [라이브러리 생성 -> 재활용 가능]
- 페이지 검사기능을 이용하면서 우선순위 확인을 해야한다.
-> 웹 문서와 분리하여 디자인만 바꾸거나, 웹 내용만 수정할 수가 있다. -> 유지보수성
-> 다양한 디바이스에서 동적으로 바뀌는 디자인 -> 반응형 디자인
-> DOM [Document Obejct Model] -> 폭포수 모델 [부모-자식의 디자인 상속]
[웹 디자인 도구 : SASS]
2. CSS 기본 문법
선택자 {속성:값; 속성:값....}
h1 {color:red; font-size:15px;}- CSS의 구성
- 선택자
- 스타일을 지정할 HTML 요소 [태그, 아이디]
- 선언부
- CSS 속성 이름과 값이 포함
- 속성이 여러 개일 경우 여러줄에 걸쳐 작성이 가능하다.
- 선택자
CSS의 핵심은 선택자를 사용하는 것이고, 특정부분의 선택자 지정을 용이하게 하기 위해서는
HTML의 구조적 설계가 중요하다
3. CSS 적용 방법
1) 내부 스타일 시트
- HTML파일에 스타일을 기술하는 기초적인 방법
- <head></head> 태그 사이에 <style></style> 태그 부분에 작성
- css의 재활용이 어렵다
<head>
<style>
body {
background-color: red;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>
...
</body>2) 외부 스타일 시트
- css를 작성하는 가장 기본적인 방법
- 별도의 파일에 css문서 작성하고 필요로 하는 css를 불러와 사용
- 동일한 서버에 있거나 url로 불러오기 가능
<link rel="stylesheet" type="text/css" href="mystyle.css">
<link rel="stylesheet" type="text/css" href="http://cdn.site.com/css/mystyle.css">3) 인라인 스타일
- html 태그에 필요한 디자인 속성을 직접 작성하는 형식
- 일관된 디자인 체계를 유지하는 데 방해가 된다.
- 선택자가 필요없다
- 재활용이 불가능하다
- 유지보수가 어렵다
<h1 style="color:blue; margin-left:30px;">This is a heading</h1>
4. 캐스캐이딩과 우선순위
- 캐스캐이딩
- CSS에서 디자인 속성이 html 문서의 구조인 DOM 구조에서 상속을 의미
- 상위 태그에서 정의된 디자인 속성은 하위 태그로 상속
- 하위 태그에 상위 태그에 정의된 디자인 속성을 변경할 수 있다.
- 우선 순위
- 동일한 디자인 속성이 적용되어있는 경우 가장 나중에 정의되는 스타일에 우선순위를 부여
- 인라인 스타일시트> 내부 스타일 시트 > 외부 스타일 시트 > 브라우저 디자인 정의
반응형
'Programming > Web Programming (2021)' 카테고리의 다른 글
| [웹프로그래밍] 3. HTML 기본태그 (0) | 2021.04.19 |
|---|---|
| [웹프로그래밍 실습] 6. CSS 기초 (0) | 2021.04.19 |
| [웹프로그래밍 실습] 2. 월드와이드웹과 HTML (0) | 2021.04.05 |
| [웹프로그래밍] 2. 월드와이드웹과 HTML (0) | 2021.03.29 |
| [웹프로그래밍] 1. 개발환경 구축하기 (0) | 2021.03.14 |
