230414(금) [WEB2 JS] _ 9~11강 CSS 기초
https://youtube.com/playlist?list=PLuHgQVnccGMBB348PWRN0fREzYcYgFybf
WEB2-JavaScript
www.youtube.com
[9강] CSS 기초 : style 속성
- CSS는 디자인할 때 사용할 수 있는 언어이다.
- style 속성(property) 안에는 CSS가 온다.
<body>
<h1 style="color:powderblue;background-color:coral">TestSentence</h1>
</body>*style 속성이 여러가지일 경우, ";"으로 구분하여 나열하면 됨
*속성 입력 방법은 "css background color property"와 같은방법으로 검색하면 됨
[10강] CSS 기초 : style 태그
- style 속성보다 효율적인 방법
- <div>, <span>의 태그를 사용하여 표현 (의미와 기능이 없는 태그)
*<div>은 개행O
<span>은 개행X
<body>
<p>
<span style="font-weight:bold;">Far</span> <span style="font-weight:bold;">far</span> away,
behind the word mountains,
<span style="font-weight:bold;">far</span> from the countries Vokalia and Consonantia,
there live the blind texts.
</p>
</body>
-> class를 지정하면,한번에 style을 변경할 수 있음
*class이름은 <style> 안에서 ".(classname)"으로 표시한다
<head> //꼭 head태그 인 것은 아님
<style>
.farClass{
font-weight:bold;
}
</style>
</head>
<body>
<p>
<span class="farClass">Far</span> <span class="farClass">far</span> away,
behind the word mountains,
<span class="farClass">far</span> from the countries Vokalia and Consonantia,
there live the blind texts.
</p>
</body>[11강] CSS 기초 : 선택자
- 선택자 : 특정 요소들을 선택해서 스타일을 적용할 수 있게 해주는 것
- 선택자의 3종류
1. 태그 선택자(Type Selector)
: 웹페이지 내의 모든 동일태그에 광범위하게 적용가능
ex) <div>, <span>
표현 : (태그이름){ ... }
2. 클래스 선택자(Class Selector)
: 그룹핑하여 적용
ex) <span class="farClass">
표현 : .(클래스이름){ ... }
3. ID 선택자(ID Selector)
: 중복되지 않는 선택자로, 한 가지 대상을 식별할 때 사용
ex) <p id="farId">
표현 : #(ID이름){ ... }
- 선택자 우선순위 : ID 선택자 > 클래스 선택자 > 태그 선택자
(좁은범위 --------------------------> 넓은범위)
<head>
<style>
span{
color:green;
}
.farClass{
color:blue;
}
#farId{
color:red;
}
</style>
</head>
<body>
<p>
<span id="farId" class="farClass">Far</span> //선택자 우선순위에 의해 red
<span class="farClass">far</span> away, //선택자 우선순위에 의해 blue
behind the word mountains,
<span>far</span> from the countries Vokalia and Consonantia, //선택자 우선순위에 의해 green
there live the blind texts.
</p>
</body><결과>
Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.