웹
스타일 요소를 입력하려면
head부분에<style> </style>을 넣어줘야한다.
선택자 - 요소 선택자
선택자는 복잡하고 다양한 요소들 사이에서 내가 원하는 요소만을 선택할 수 있도록 도와준다.
요소 선택자는 선택자 부분에 태그의 이름이 들어간다.
그룹화가 가능해서 h1, h2 { color:yellow, font-size: 2em} 이런 식으로도 표현이 가능하다.
선택자 - 클래스 선택자
요소에 구애받지않고 스타일 규칙을 적용할 수 있다.
<span class="foo">처럼 요소부분에 class를 선언하고 head의 style 부분에 h1 {color:yellow} 처럼 .foo {style:yellow}를 입력하면 된다.
선택자 - ID 선택자
클래스 선택자와 비슷하지만 class 와 . 을 사용하는 대신 id=""와 #를 사용한다.
주의할 사항은 문서내에 유일한 요소에 사용한다는 것이다. 즉, 단 한번만 사용되어야 한다. id선택자로 규칙을 적용시킬 수 있는 요소는 단 하나밖에 존재하지 않는다.
다중 CLASS
class를 삽입할 때 여러개의 CLASS를 삽입할 수 있다.
.foo {font-size:30px;}
.bar {color:blue;}
<p class="foo bar"> 이런 식이다.
선택자의 조합
p.bar {}
요소와 클래스의 조합
.foo.bar {}
다중 클래스
#fo.bar {}
아이디와 클래스의 조합이렇게 조합하면 둘중 하나가 아닌 둘다 해당하는 항목에 css를 적용하는 것이다. and이다.
선택자 - 속성 선택자
3가지 경우의 수가 존재한다.
단순 속성으로 선택
p[class] { color: silver; }
p[class][id] { text-decoration: underline; }<p class="foo">Hello</p>
<p class="bar">CSS</p>
<p class="baz" id="title">HTML</p>첫 번째는 class 속성이 있는 요소이면 color: silver 규칙이 적용.
두 번째는 class 속성과 id 속성이 함께 있어야 text-decoration: underline 규칙이 적용.
정확한 속성값으로 선택
p[class="foo"] { color: silver; }
p[id="title"] { text-decoration: underline; }부분 속성값으로 선택
p[class~="color"] { font-style: italic; } color 라는 단어가 포함
p[class^="color"] { font-style: italic; } color 라는 단어로 시작
p[class$="color"] { font-style: italic; } color 라는 단어로 끝남
p[class*="color"] { font-style: italic; } color라는 글자가 포함됨.(ex. colorful)선택자 - 문서 구조 관련 선택자
위에 그림처럼 각각의 요소들은 부모와 자식으로 구성되어있다. 또한 넓게 보면 조상과 자손으로도 구분해 볼 수 있다.
<html>
<body>
<div>
<h1><span>HTML</span>: Hyper Text Markup Language</h1>
</div>
<p>HTML과 CSS와 JAVASCRIPT를 이용해서 멋진 웹 사이트를 제작할 수 있습니다.</p>
</body>
</html>자손 선택자
자손 선택자는 선택자 사이에 아무 기호없이 그냥 공백으로 구분.
이 선택자는 <div>의 자손 요소인 <span>를 선택하는 선택자.
자식 선택자
>
이 선택자는 <div>의 자식 요소인 <h1>를 선택하는 선택자.
인접 형제 선택자
+
형제 관계이면서 바로 뒤에 인접해 있는 요소를 선택하는 선택자.
일반 형제 선택자
~
틸트(~) 를 사용한다.
형제 관계이면서 뒤에 있는 해당 요소 전체를 선택하는 선택자.
