<section1 : CSS개요 및 CSS 기본 사용법>
CSS란? Cascading Style Sheets 의 약자로 html태그를 화면상에 어떻게 표현할 지 설정함
▶ css사용하는 이유
css는 디자인, 레이아웃, 다양한 기기 및 화면 크기에 따른 디스플레이의 다양성 문제를 포함한 웹 페이지의 스타일을 정의할 때 사용함
화면의 크기에 따라 다른 모양의 사이트를 일일이 만든다는 것은 매우 힘들고 비용이 많이 든다
그런데 이것은 CSS로 해결됨
CSS의 미디어쿼리를 사용해서 화면 크기에 자동으로 반응한 사이트를 만들 수 있다(반응형 웹)
그리고 방대한 웹 사이트에서 매 페이지마다 폰트 정보와 색상 정보를 추가한다는 것은 많은 시간이 필요한 작업이고,
결국 웹 사이트 개발비를 상승시킴 => 이런문제를 해결하기 위해 W3C에서 CSS를 만들게 됨
결국 체계적인 웹 사이트 개발가 이에 따른 개발비용 감소라는 장점도 가지게 됨
▶CSS기본 사용법
-위치 : 위치에 따라 3가지 방법으로 작성할 수 있음
1. 스타일시트를 태그의 style 속성에 기술
: 스타일을 지정할 태그의 style 속성에 직접 지정하는 방법으로 인라인 스타일시트라고 부르며, 간단한 속성을 지정할 때 사용함
참고) 글자색 파랑이 지정됨
장점 : 가장 간단한 방법
단점 : 스타일이 지정된 태그에서만 적용된다는 단점이 있음
2. 스타일시트를 HTML 문서내에 포함해서 작성
이 방법은 html 문서 안에 <style> 태그를 사용해서 스타일시트를 작성하며, 내부 스타일시트라고 부름
스타일태그는 일반적으로 <head> 태그안에 쓴다
3. 스타일시트를 별도의 파일로 작성
스타일시트를 여러 웹 페이지에서 재사용할 목적으로 별도의 파일로 저장해서 사용하며, 외부스타일시트라고 부른다
웹 어플 전체에 적용할 공통의 스타일시트를 작성할 때 주로사용하는 방법.
사실 html 문서 안에 스타일시트 코드까지 기술되어 있으면 문서의 가독성이 떨어지기 때문에 가급적이면 별도의 파일로 저장해서 사용하는 것이 좋음
스타일시트를 별도의 파일로 작성할 때 확장자는 .css이다.
-작성규칙
스타일시트를 구성하는 규칙집합 : 실렉터와 선언블록으로 구성됨
선언블록 안에는 선언들을 기술할 수 있음
스타일시트 선언에 키워드가 사용되는데,CSS키워드는 큰 따옴표 또는 작은따옴표 사이에 쓰면 안된다
예) color: green; 바른 선언
color : "green"; 틀린 선언
-실렉터 종류
1. 타입 실렉터
: HTML 태그명(엘리먼트명)으로 스타일시트 집합을 작성함
특정 태그에 같은 스타일을 지정할 때 사용함
예) h1 {
color : green;
font-size: 20px;
}
2. 유니버설 실렉터
-속성 실렉터 :p[id]
-id실렉터 : .area{
-클래스 실렉터 : #display
-HOVER : 마우스 포인터가 위치하는 경우 적용되는 스타일을 기술.
-조건실렉터 : 주로 특정 태그 중 조건을 만족하는 태그에만 스타일을 지정할 때 사용
▶1개의 태그에 스타일을 2개 이상 중첩하면 1개만 적용된다!!
그 우선순위는 가장 처음에 온 스타일 설정을 최우선으로 수행하고 그 다음의 설정은 수행되지 않는다
따라서 1개의 태그에 스타일을 2개 이상 중첩하면 안된다.
'HTML&CSS&JavaScript > 교재' 카테고리의 다른 글
| CH4- sec3 태그를 표현하는 CSS와 Advanced CSS3 (0) | 2025.02.27 |
|---|---|
| CH4- sec2 태그를 표현하는 CSS와 Advanced CSS3 (0) | 2025.02.26 |
| CH3 - sec2 문서를 구조화하는 HTML (0) | 2025.02.22 |
| CH3 - sec1 문서를 구조화하는 HTML (0) | 2025.02.21 |
| CH2 - sec 1,2 코드를 작성하고 실행하는 개발 환경 설정 (1) | 2025.02.20 |