CSS #1
1. 환경설정 (html과 동일)
1) node 설정
https://nodejs.org/ 다운 받고 설치 (기본 설치)
cmd창에서 node -v 입력하고 버전 확인
2) VSC 설정
- https://code.visualstudio.com/ 다운받고 설치 (기본 설치)
- VSC 확장팩 설치
2. css 역할 및 버전
역할 : html에 시각적 표현을 지정해서 스타일 관리
css1 : 1996년
css2 : 1998년
css3 : 현재까지도 개발 중 (표준화 버전)
3. css 적용 방법 3가지
1) 인라인 스타일 (inline style)
- html의 시작 태그에서 style 속성으로 스타일을 지정하는 방법
- 중복해서 적어야된다는 단점이 있다
- 예>
<p style="color:red">Hello</p>
<span style="color:red">Hello</span>2) 내부 스타일 (internal style)
- html의 head 태그에 style 태그를 이용해서 스타일을 지정하는 방법
- 태그와 스타일 태그가 분리되어 있다
- 다른 html 파일에서 동일한 속성을 주려면 중복해서 적어야한다는 단점이 있다
- 예>
<head>
<style>
p, span{
color:red;
}
</style>
</head>
<body>
<p>Hello2</p>
<span>Hello3</span>
</body>3) 외부 스타일 (external style)
- html 외부에 *.css라는 외부 파일로 작성하고 필요한 html에서 불러다 사용하는 방법 (link 태그 이용)
- 같은 css 파일을 사용하는 여러 html 페이지가 있을 경우 맨 처음 요청한 페이지에서 다운로드 받은 css 파일을 웹브라우저에 저장해두고 재사용한다
- 예>
- main.css
p, span{
color:red;
}- main.html
<head>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<p>Hello2</p>
<span>Hello3</span>
</body>4. CSS (Cascading Style Sheet)
1) 캐스캐이딩 (cascading)
html
|
head body
|
div
|
p- 개념 : DOM 트리의 상위 요소에서 정의한 스타일이 하위 요소로 전달되는 개념 (상속 개념)
- 하위 요소에서 재정의가 가능하다
2) 명시도 (specificity)
-
개념 : 선택자 (selector) 마다 우선순위가 있다. 즉 마지막에 설정했다고 해서 덮어쓰는 것이 아님
-
기본적인 css 명시도 ★
인라인 스타일 > id (#id) > 속성값 ([href]), class (.class) > 태그 (div) -
명시도 값
#id의 명시도 값 : (1,0,0)
.class의 명시도 값 : (0,1,0)
태그의 명시도 값 : (0,0,1)
속성의 명시도 값 : (0,1,0) -
!important
권장 안 함
기본적인 명시도의 가중치값을 무시하고 최우선 순위를 가짐
예>
div {
color: aqua; !important;
}- 선택자를 결합해서 구체적으로 지정할수록 명시도가 올라간다
예> 명시도가 (1,0,1)이 됨
#xxx h1{
color: red;
}5. CSS 선택자 (selector)
- DOM 트리 계층 구조
- 개별적인 요소를 노드 (node)라고 부른다
- 노드 종류 3가지
element node: tag 의미
text node: 리터럴 값 의미
attribute node: 속성의미
nodelist : 같은 부모의 자식의 모임 (배열로 받음)
html
|
head body
| |
title div p span a - href
link | | |
script div "다음" "daum.net"
style |
p
|
"hello"1) 개념
- DOM의 요소를 접근(선택)하는 방법
2) 문법
(1) 전체 선택자
- * 로 표현
- DOM 트리에 있는 모든 태그가 선택됨
- 예>
<style>
*{
color:red;
}
</sytle>(2) 태그 선택자
- 태그명으로 표현
- 여러 개 선택할 경우 쉼표(,) 사용
<style>
p, div, #xx, .yy{
color:red;
}
</sytle>(3) id 속성 선택자
- #id로 표현
- 중복 불가
- 예>
<style>
#xxx{
color:red;
}
</style>
<p id="xxx">Hello</p>(4) class 속성 선택자
- .class로 표현
- 중복이 가능
- 한 번에 여러 개 지정 가능. 공백으로 구분한다 (class= "yyy yyy2")
cf) 헷갈릴만한 선택자 표현식 예
<style>
.select .aaa{ <== class가 select를 찾고 그 자손으로 class가 aaa인 요소 반환.
}
.select.aaa{ <== class가 select 이면서(그리고 and) class가 aaa인 요소 반환.
}
.select,.aaa{ <== class가 select가 이거나( 또는 or) class가 aaa인 요소 반환.
}
</style>(5) 계층 구조
1- 자식
- 부모 > 자식
- #xxx > p{
}
2- 자손 (공백)
- 부모 자손 (자식 포함)
- #xxx p{
}
3- 형제
- 선택자 + 형제
- 인접한 바로 뒤의 형제 요소 선택
- #xxx + p{
}
4- 형제들
- 선택자 ~ 형제들
- 인접한 요소 뒤의 모든 형제요소 반환
- #xxx ~ p{
}
(6) 속성으로 찾기
- 특정 속성으로 구성된 요소를 찾을 때 사용됨
- 예>
<a href="http://www.daum.net">다음</a>
<a href="https://www.naver.com">네이버</a>
<a href="https://www.navercloud.com">네이버</a>
<link href="" >1- 속성명으로 찾기
a[href]{
}
2- 정확히 일치하는 속성값으로 찾기
a[href="http://www.daum.net"]{
}
3- 지정된 속성값으로 시작하는 요소 찾기
a[href^="https"]{
}
4- 지정된 속성값으로 끝나는 요소 찾기
a[href$="com"]{
}
5- 지정된 속성값이 포함된 요소 반환
a[href*="naver"]{
}
