# CSS
1. 환경설정
1) node 설정
https://nodejs.org/ 다운받고 설치(기본설치)
cmd 창에서 node -v 입력하고 버전확인.
2) VSC( Visual Studio Code ) 설치
https://code.visualstudio.com/ 다운받고 설치(기본설치)
3) 워크스페이스 작성
2. CSS 역할 및 버전
역할: html 에 시각적 표현을 지정해서 스타일 관리.
css1: 1996년
css2: 1998년
css3: 현재까지도 개발중. ( 표준화 버전 )
3. CSS 적용 방법 3가지
1) 인라인 스타일( inline style )
- html 의 시작태그에서 style 속성으로 스타일을 지정하는 방법.
ex) <p>Hello</p>
<p style="color: red" >Hello2</p>
<span style="color: red" >Hello2</span>
2) 내부 스타일 ( internal style )
- html 내의 <head> 에 <style> 태그 이용해서 스타일을 지정하는 방법.
ex)
<head>
<style>
p, span {
color: red;
}
</style>
</head>
<body>
<p>Hello2</p>
<span>Hello3</span>
</body>
- <style> 태그의 css 속성들이 길어질 수 있음.
다른 html 에서 동일한 css 일지라도 중복 정의해야 된다.
3) 외부 스타일 ( external style )
- html 외부에 *.css 가진 외부 파일로 작성하고
필요한 html 에서 불러다가 사용. ( <link> 태그 이용 )
- 같은 *.css 파일을 사용하는 여러 html 페이지는 맨 처음 요청한 페이지에서
다운로드 받은 css 파일을 웹브라우저에 저장 ( 캐시메모리 ) 해두고
다른 페이지에서 재사용한다.
ex) #main.css
p, span {
color: red;
}
# a.html ( b.html )
<head>
<link rel="stylesheet type="text/css" href="main.css">
</head>
<body>
<p>Hello2</p>
<span>Hello3</span>
</body>
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS 적용방법 3가지</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="test.css">
<style>
/* class 명으로 css 를 설정할때는 '.클래스명' 사용한다. */
.x {
/* COLOR: BLUE; 속성명과 속성값은 대소문자 구별 안함.*/
color: blue;
}
</style>
</head>
<body>
<!-- 인라인 스타일 -->
<p style="color: red;">Hello1</p>
<span style="color: red; background-color: yellow;">Hello2</span>
<!-- 내부 스타일(internal style) - <style> 태그사용 -->
<p class="x">Hello3</p>
<span class="x">Hello4</span>
<!-- 외부 스타일(external style) - link 사용 -->
<p id="a">Hello5</p>
<span id="b">Hello6</span>
</body>
</html>
4) 우선순위
인라인 스타일 > 기본적으로는 내부 스타일 > 외부 스타일
- 단, 내부 와 외부는 뭘 먼저 선언하는가에 따라서 달라진다.
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS 적용방법 3가지</title>
<!-- 2,3. <link> | <style> 중 뭐가 먼저 선언됬냐에 따라서 순위가 바뀜(순차문) -->
<link rel="stylesheet" href="test2.css">
<style>
p {
color: blue;
}
</style>
</head>
<body>
<!-- 1. 우선순위가 가장높음 -->
<p style="color: aqua;">Hello</p>
</body>
</html>
4. CSS ( Cascading Style Sheet )
1) 캐스캐이딩 ( Cascading )
html
head body
|
div
|
p
- 개념:
DOM 트리의 상위요소에서 정의한 스타일이 하위 요소로 전달되는 개념이다. ( 상속개념 )
하나의 요소에 여러 스타일이 지정될 수 있음을 뜻함.
이러한 규칙은 충돌을 발생시킴. 해결방법은 명시도( Specificity ) 를 사용한다.
하위에서 재정의 가능
- 기본적인 CSS 명시도
인라인스타일 > id > css의 class, 속성 > 태그
ex) <a href=""></a>
<p class="y"></p>
<span id="x"></span>
* 다음은 명시도 가중치 표현식이다.
( visual studio code 에서 css 선택자 위에서 마우스 오버하면 확인이 가능 )
# id 의 명시도 값: ( 1, 0, 0 ) ==> 가중치: 100 이라고 생각하자
.class 와 속성 의 명시도 값: ( 0, 1, 0 ) ==> 가중치: 10 이라고 생각하자
태그의 명시도 값: ( 0, 0, 1 ) ==> 가중치: 1 이라고 생각하자
<!DOCTYPE html>
<html lang="en">
<head>
<title>캐스캐이딩과 명시도</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body style="color: red;">
<div>
111
<div style="color: blue;">
222
<div style="color: aqua;">
333
</div>
</div>
</div>
</body>
</html>
- !import
=> 권장안함
=> 기본적인 명시도의 가중치값을 완전히 무시하고 최우선 순위를 가짐.
( 인라인 스타일보다 우선권이 더 높음 )
ex) div {
color: aqua !important;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>캐스캐이딩과 명시도</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
#xxx {
color: red;
}
.yyy {
color: blue;
}
div {
color: aqua !important;
}
[herf] {
color: bisque;
}
</style>
</head>
<body>
<div>
111
<div id="xxx" class="yyy">
222
<div style="color: brown;">
333
</div>
</div>
<a href="">daum.net</a>
</div>
</body>
</html>
선택자를 결합해서 구체적으로 지정할 수록 명시도가 올라간다.
지정된 선택자를 모두 사용하기 때문임.
명시도 참조사이트:
https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
<!DOCTYPE html>
<html lang="en">
<head>
<title>캐스캐이딩과 명시도2</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
#xxx h1 {
color: red;
}
h1 {
color: blue;
}
</style>
</head>
<body>
<div id="xxx">
<h1>Hello</h1>
</div>
</body>
</html>
'[study]이론정리 > HTML & CSS & JavaScript' 카테고리의 다른 글
CSS 2일차 - 선택자(2), BEM, 의사클래스, 의사요소 (0) | 2024.04.23 |
---|---|
CSS 1일차 - 선택자 (0) | 2024.04.22 |
HTML 2일차 - 시멘틱 태그, 사용자 입력, form, img, iframe, 특수문자 (0) | 2024.04.22 |
HTML 2일차 - table, list, span (0) | 2024.04.22 |
HTML 2일차 - 1일차 요점 (0) | 2024.04.22 |