CSS : Cascading Style Sheets
html(마크업 언어) 꾸며주는 언어, html을 보기좋게 디자인하는 역할
문법
h1 { color: yellow; font-size:2em; }선택자(selector) - "h1"
-> 어느요소 꾸밀꺼야?
속성(property) - "color"
값(value) - "yellow"
-> 어떻게 꾸밀꺼야?
선언(declaration) - "color: yellow", "font-size: 2em"
선언부(declaration block) - "{ color: yellow; font-size:2em; }"
규칙(rule set) - "h1 { color: yellow; font-size:2em; }"
주석
/* */
CSS의 적용
inline
해당 요소에 직접 스타일 속성을 이용해서 규칙들을 선언하는 방법
선택자는 필요x 선언부에 내용만 스타일 속성의 값으로 넣어주면 됩니다.
<boby> <p style="color" : gray;">Hello,css</p> <p> aaaa </p>
External
외부 스타일 시트 파일을 이용한 방법
외부 스타일 시트 : 스타일 규칙들을 별도의 외부 파일을 만들어 넣는 방식
(확장자 주로 .css) 파일 관리가 편하면서도 용량이 작음.
<link rel="stylesheet" href="css/style.css">*style.css p { color : yellow; }link 태그 (head 태그 내에 선언) href 로 연결
Import
스타일 시트 내에서 다른 스타일 시트 파일을 불러오는 방식
잘 안씀.
@import url("css/style.css");
선택자
요소선택자 (= 태그선택자)
가장 기본이 되는 선택자이며, 태그 선택자
h1 { color: yellow; } <!-- 선택자 부분에 태그 이름-->
그룹화
h1, h2, h3, h4, h5, h6 { color: yellow; } <!-- 쉼표이용해서 그룹화 가능-->* { color: yellow; } <!-- 성능에 좋지않아 잘 안씀 --> <!-- *(별표, asterisk) 기호로 문서 내에 모든 요소를 선택 -->h1 { color: yellow; font-size: 2em; background-color: gray; } <!-- 선언 그룹화-->h1, h2, h3, h4, h5, h6 { color: yellow; font-size: 2em; background-color: gray; } <!-- 선택자 & 선언 그룹화-->
class 선택자
css
.foo {fnot-size : 30px;} html
<p class="foo"> ... </p>어느 요소든지 class 속성값이 "foo"로 선언된 요소가 있다면 해당 스타일 규칙을 적용
.html { color: purple; }
.css { text-decoration: underline; }
<dl>
<dt class="html">HTML</dt>
<dd><span class="html">HTML</span>은 문서의 구조를 나타냅니다.</dd>
<dt class="css">CSS</dt>
<dd><span class="css">CSS</span>는 문서의 표현을 나타냅니다.</dd>
</dl>다중 클래스
<p class="foo bar"> ... </p><dl>
<dt class = "html css"> JS </dt>
<dd> <span class = "html css"> JS </span>는 문서의 동작을 나타냅니다. </dd>
</dl>id 선택자
class 와 유사
css
#bar { background-color: yellow; }<p id="bar"> ... </p>class 선택자와의 차이점
1. .기호가 아닌 #기호 사용
2.태그의 class 속성이 아닌 id 속성을 참조
3.문서 내에 유일한 요소에 사용
4.구체성
가장 큰 차이점은 class와 달리 id는 문서 내에서 유일해야 한다는 점
(단한번만 사용가능!)
속성 선택자
선택자는 조합 가능
선택자의 조합
css/* 요소와 class의 조합 */ p.bar { ... }/* 다중 class */ .foo.bar { ... }/* id와 class의 조합 */ #foo.bar { ... }
속성 선택자
- 단순 속성으로 선택
대괄호안에 속성이름 들어감
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>
- 정확한 속성값으로 선택
p[class="foo"] { color: silver; }
p[id="title"] { text-decoration: underline; }
<p class="foo">Hello</p>
<p class="bar">CSS</p>
<p class="baz" id="title">HTML</p>
- 부분 속성값으로 선택
<p class="color hot">red</p>
<p class="cool color">blue</p>
<p class="colorful nature">rainbow</p>p[class~="color"] { font-style: italic; } /* 1, 2번째 요소 */
p[class^="color"] { font-style: italic; } /* 1, 3번째 요소 */
p[class$="color"] { font-style: italic; } /* 2번째 요소 */
p[class*="color"] { font-style: italic; } /* 1, 2, 3번째 요소 */[class~="bar"] : class 속성의 값이 공백으로 구분한 "bar" 단어가 포함되는 요소 선택
[class^="bar"] : class 속성의 값이 "bar"로 시작하는 요소 선택
[class$="bar"] : class 속성의 값이 "bar"로 끝나는 요소 선택
[class*="bar"] : class 속성의 값이 "bar" 문자가 포함되는 요소 선택
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>css</title>
<style>
p[class$="color"] { font-style: italic; }
</style>
</head>
<body>
<p class="color hot">red</p>
<p class="cool color">blue</p>
<p class="colorful nature">rainbow</p>
</body>
</html>
부모-자식
조상-자손
형제
문서 구조 관련 선택자
자손 선택자
div span { color: red; }선택자 사이에 아무 기호없이 그냥 공백으로 구분
자식 선택자
div > h1 { color: red; }선택자 사이에 꺽쇠 기호(>) 사이에 공백있어도 상관 x
인접 선택자
div + h1 { color: red; }선택자 사이에 + 기호 사이에 공백있어도 상관 x
조합해서 사용
body 요소의 자식인 div 요소의 자손인 table 요소 바로 뒤에 인접한 ul 요소 선택!
body > div table + ul { ... }
가상 클래스
css만으로 구성 가능 눈에 보이진 않음
:pseudo-class {
property: value;
}관련 링크 https://developer.mozilla.org/ko/docs/Web/CSS/Pseudo-classes
문서 구조와 관련된 가상 클래스
:first-child : 첫 번째 자식 요소 선택
:last-child : 마지막 자식 요소 선택
li:first-child { color: red; }
li:last-child { color: blue; }
<ul>
<li class="first-child">HTML</li>
<li>CSS</li>
<li class="last-child">JS</li>
</ul>앵커 요소와 관련된 가상 클래스
:link : 하이퍼 링크이면서 아직 방문하지 않은 앵커
:visited : 이미 방문한 하이퍼링크를 의미
하이퍼 링크 란?
앵커 요소에 href 속성이 있는 것을 의미
a:link { color: blue; }
a:visited { color: gray; }사용자 동작과 관련된 가상 클래스
a에서 자주사용 a에만 쓸 수 있는 것은 아니며, 이 조건에 맞는 상황이 되는 요소들은 다 사용이 가능합니다.
a:focus: 현재 입력 초점을 가진 요소에 적용
a:hover: 마우스 포인터가 있는 요소에 적용 ex )마우스 올렸을때
a:active: 사용자 입력으로 활성화된 요소에 적용
<a를 클릭할 때 또는 button를 눌렀을 때처럼 순간적으로 활성화>
a:focus { background-color: yellow; }
a:hover { font-weight: bold; }
a:active { color: red; }가상요소
미리 정의해놓은 위치에 삽입이 되도록 약속되어있는 보이지않는 요소
HTML 코드에 존재하지 않는 구조 요소에 스타일을 부여
CSS3부터는 가상 클래스와 가상 요소를 구분하기 위해
가상 요소에는 ::(더블 콜론) 기호를 사용
더많은 가상요소 종류 보기
선택자들마다 지원 브라우저 범위가 제각각이기 때문에 잘 확인하고 사용하기
:before : 가장 앞에 요소를 삽입
:after : 가장 뒤에 요소를 삽입
:first-line : 요소의 첫 번째 줄에 있는 텍스트
:first-letter : 블록 레벨 요소의 첫 번째 문자
p::before { content: "###" }
p::after { content: "!!!" }
before와 after 가상 요소는 애초에 내용이 없는 상태로 생성되기 때문에
내용을 넣기 위해 content 속성을 이용
<p>
<before>###</before>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<after>!!!</after>
</p>
p::first-line { ... }
p::first-letter { ... }
<p>
<first-letter>L</first-letter>orem ipsum dolor sit amet
</p>
<p>
<!-- 모니터 가로 해상도에 따라 요소가 포함하는 내용이 변동됩니다. -->
<first-line>Lorem ipsum dolor sit amet </first-line> aa
</p>구체성
선택자를 얼마나 명시적으로(구체적으로) 선언했느냐를 수치화
구체성의 값이 클수록 우선으로 적용
구체성은 아래의 규칙대로 계산됩니다.
조합자 란? >,+h1 { ... } /* 0,0,0,1 */ body h1 { ... } /* 0,0,0,2 */ 요소 두개 있으니깐 .grape { ... } /* 0,0,1,0 */ class 니깐 *.bright { ... } /* 0,0,1,0 */ 전체는 영향x class니깐 p.bright em.dark { ... } /* 0,0,2,2 */ 클래스2개+요소(p,em)2개 #page { ... } /* 0,1,0,0 */ id div#page { ... } /* 0,1,0,1 */ 요소+아이디
인라인 스타일로 했을경우?
-> 1,0,0,0 제일 높은 구체성 가지고있음.
p#page { color: red; } /* 0,1,0,1 */
<p id="page" style="color:blue">Lorem impusm dolor sit.</p>
/* bule 로 나옴 */ important
별도의 구체성 값은 없지만, 모든 구체성을 무시하고 우선권
p#page { color: red !important; }
/*속성값 뒤 한 칸 공백을 주고 느낌표 기호와 함께 씀 */
<p id="page" style="color:blue">Lorem impusm dolor sit.</p>
/* red 로 나옴 */상속
어떤 스타일 규칙이 특정 요소뿐만 아니라 그 자손 요소까지 적용되는 것
margin, padding, background, border 등 박스 모델 속성들은 상속되지 않는다. (상식선에서 구분됨)
상속된 속성은 아무런 구체성x
(속성은 구체성 못 물려받는다는 것 0,0,0,0 도 아님 그냥 없다.)
cascading
(구체성도 cascading중 하나)
cascading에는 다음과 같이 3가지 규칙이 있습니다.
- 중요도(!important)와 css출처
- 구체성
- 선언 순서
중요도(!important)와 css출처
CSS 출처는
제작자 ex ) 사이트 개발자가 작성한 css
사용자 ex) 사이트 방문한 일반사용자들의 css
사용자 에이전트(user agent) 브라우저에 기본적으로 내장된 css
우선순위
사용자 (!important) (거의 안쓰긴함)
제작자 (!important)
제작자 스타일
사용자 스타일
사용자 에이전트 스타일
