4장
CSS란?
CSS : Cascading(연속적인) Style Sheets
마크업 언어인 html은 몸의 구조(뼈 근육)를 담당하고
CSS는 외적으로 꾸며주는(옷 신발) 역할을 한다고 생각하면 이해하기 쉽다
html을 꾸며주는 언어.
html이 웹 페이지의 정보를 표현한다면 CSS는 html을 보기 좋게 디자인 하는 역할
CSS 문법
h1 { color: yellow; font-size: 2em; }- 선택자 (selector) : h1
- 속성 (property) : color, font-size
- html의 속성과 구분해야 한다. attribute가 아닌 property다. 전혀 다른 내용이고 한국어로 번역 시 둘다 속성 으로 번역되기에 조심해야한다 - 값 (value) : yellow, 2em
- 선언 (declaration) : color:yellow; , fontsize:2em;
- 선언부 (declaration block) : { color: yellow; font-size: 2em; }
- 규칙 (rule set) : h1 { color: yellow; font-size: 2em; }
선택자와 선언부 사이에 개행을 할 수 있다
선언부와 선언부 사이에 개행을 할 수 있다
단. . . 속성명과 속성값 사이는 개행을 하면 안된다.
h1 {
color: yellow;
font-size: 2em;
}- 주석
/* 내용1
내용2
내용3 */CSS 적용 방식 4가지
- Inline 방식 :
<div style="..."> 내용 </div> 처럼 표현하는 방식
<p style="color: gray;"> Hello, CSS </p>- Internal 방식 :
<style> ... </style> 을 헤드에 선언하는 방식
<style>
p { color: gray; }
</style>- External 방식 :
<link rel="stylesheet" href="css/style.css"> 링크 활용하여 헤드에 선언- @import 방식 :
여러 이유로 잘 쓰이지 않음. 궁금하면 찾아볼 것
선택자
선택자는 복잡하고 다양한 요소들 사이에서 내가 원하는 요소만을 선택할 수 있도록 도와준다
완성도 있는 디자인을 표현하기 위해서는 반드시 내가 원하는 요소를 선택할 수 있어야 하기 때문에 매우 중요하다
활용 수준에 따라 아주 기본적이면서도 매우 복잡하므로 기초 부분을 반드시 잘 이해해야 한다
기본기를 잘 익혀야 어려운 선택자를 다룰 때도 잘 할 수 있다 !
요소 선택자 ( 태그 선택자 )
h1 { color: yellow; }
h2 { color: red; }
h3 { color: yellow; }
h4 { color: blue; }
h5 { color: yellow; }
h6 { color: gray; }Grouping : 선택자 혹은 선언은 그룹화가 가능하다.
- 선택자 묶기
h1, h2, h3, h4, h5, h6 { color: yellow; }- 전체 선택자
성능에는 좋지 않으니 가급적 지양하자
* { color: yellow; }- 선언들 묶기
h1 { color: yellow; font-size: 2em; background-color: gray; }- 선택자 & 선언부 묶기
h1, h2, h3, h4, h5, h6 { color: yellow; font-size: 2em;
background-color: gray; }클래스 선택자
요소에 구애받지 않고 스타일 규칙을 설정할 수 있는 가장 일반적인 방법이다.
.쩜 으로 클래스 선택자 활용!!
CSS: .foo{ font-size: 30px; }
HTML: <p class="foo"> ... </p>다중 클래스
CSS: .foo{ font-size: 30px; }
.bar{ color: blue; }
HTML: <p class="foo bar"> ... </p>id 선택자
#해시태그 로 id 선택자 활용!!
#bar{ background-color: yellow; }
<p id="bar"></p>- class 속성과의 차이점 : . 기호가 아닌 # 기호 사용, 태그의 class 속성이 아닌 id 속성을 참조, !!문서 내에 유일한 요소에 사용 즉 단 한번만 사용되어야 함!!, 구체성의 값이 다름
예문:
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>한번해보기</title>
<style media="screen">
.html { color: purple; }
.css { text-decoration: underline; }
#id-selector { font-size: 30px; }
</style>
</head>
<body>
<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>
<dt class="html css"">JS</dt>
<dd><span class="html css">JS</span>는문서의동작을 나타냅니다.</dd>
</dl>
<p id="id-selector">
id 선택자는 해쉬 기호를 사용합니다.
</p>
</body>
</html>- 선택자의 조합도 가능하다
- 요소와 클래스를 조합하여 선택 : p.bar {...}
- 다중 클래스를 조합하여 선택 : .foo.bar {...}
- 아이디와 클래스를 조합하여 선택 : #foo.bar {...}
속성 선택자
태그의 속성을 이용해서 요소를 선택하는 방법이다
[..]대괄호를 이용한다!!
1. 단순 속성으로 선택하기
/* 대괄호로 속성과 태그를 선택한다 */
CSS:
p[class]{ color: silver; }
p[class][id]{ text-decoration: underline; }
HTML:
<p class="foo">Hello</p>
<p class="bar">CSS</p>
<p class="baz" id="title">HTML</p>- 정확한 속성값으로 선택하기
/* 대괄호 안에 속성 값까지 넣어야 한다 */
CSS:
p[class="foo"]{ color: silver; }
p[id="title"]{ text-decoration: underline; }
HTML:
<p class="foo">Hello</p>
<p class="bar">CSS</p>
<p class="baz" id="title">HTML</p>- 부분 속성값으로 선택하기
~=, (캐럿기호)^=, $=, *= 를 활용한다!!
[class~="bar"] : class 속성의 값이 공백으로 구분한 "bar" 단어가 포함되는 요소 선택
[class^="bar"] : class 속성의 값이 "bar" 문자로 시작하는 요소 선택
[class$="bar"] : class 속성의 값이 "bar" 문자로 끝나는 요소 선택
[class*="bar"] : class 속성의 값이 "bar" 문자가 포함되는 요소 선택CSS:
[class~="color"] {font-style: italic;}
[class^="color"] {font-style: italic;}
[class$="color"] {font-style: italic;}
[class*="color"] {font-style: italic;}
HTML:
<p class="color hot">red</p>
<p class="cool color">blue</p>
<p class="colorful nature">rainbow</p>
<p class="nature iscolor">rainbow</p>문서 구조 관련 선택자
선택자 중에는 문서의 구조를 이용하여 선택하는 선택자도 있다
조합자 또는 결정자 라고 부른다
문서 구조를 이용해 더 유연하게 요소를 선택하고 스타일을 적용할 수 있다
- 자손 선택자
div span { color: red; }
선택자와 선택자 사이에 공백- 자식 선택자
div > span { color: red; }
> , 공백은 넣어도 안넣어도 ok- 인접 형제 선택자
div + span { color: red; }
+ , 인접형제는 바로 뒤의 형제요소임.
div요소 바로 뒤에 인접한 형제요소인 span요소 선택하라는 의미- 조합해서 사용
body > div table + ul { ... }
앞에서부터 하나씩 읽기
body 요소의 자식인 div 요소의 자손인 table 요소의 인접형제인 ul 선택가상 선택자
가상 선택자(pseudo selector)에는 가상 클래스(pseudo class)와 가상 요소(pseudo element)가 있다
가상 클래스 선택자는 특정 요소의 상태를 미리 추정하여 가상의 클래스로 스타일을 적용할 수 있는 선택자이다
지금 문서 내에 존재하지 않는 구조 즉 문서에 존재하지 않는 요소에 스타일을 부여할 수도 있고 특정 요소의 상태를 미리 추정해 가상의 클래스로 스타일을 지정할 수도 있다
가상 클래스
미리 정의해놓은 상황에 적용이 되도록 약속되어있는 보이지 않는 클래스
우리가 요소에 직접 클래스를 입력하는 것이 아니고 브라우저 스스로가 특정한 상황이 되면 자동적으로 클래스를 적용해준다.
예를들어 <p>...</ 요소에 마우스를 올리면
붉은 색으로 나타나게 하고 싶은 상황을 생각해보자.
그런데 CSS에서는 이를 동작하게 하기 위해서는 red{color: red;} 을 작성해야하고
이렇게 되면 바로 빨간색이 되어버리는 문제점이 발생한다.
그렇기에 자바스크립트를 이용해 특정 상황이 되면 이 요소에 red 클래스를 삽입하도록
별도의 처리를 하지만. 이는 다른 언어를 사용하는 경우이므로 개발 비용이 들어가는 일이다
그래서 CSS는 이런 정적 언어의 단점을 극복하기 위해 흔하게 사용되는 여러 패턴에 대하여
미리 정의를 해 놓고 가상 클래스로 제어할 수 있게 했다가상 클래스는 :(콜론) 기호를 써서 나타낸다
:pseudo-class{ property: value }굉장히 여러가지의 가상 클래스가 미리 정의되어있다. 필요할 때 사용하면 된다
강의에서는 자주 쓰이는 아주아주 기초적인 가상 클래스만 확인하였다
아래의 쉬운 가상 클래스들을 보고 가상 클래스라는 개념을 잡고갔다.
- 문서 구조와 관련된 가상 클래스
:first-child : 첫번 째 자식 요소 선택
:last-child : 마지막 자식 요소 선택
li:first-child { color: red; }
li:last-child { color: blue; }- 링크 관련된 가상 클래스
:link : 하이퍼링크이면서 아직 방문하지 않은 앵커
:visited : 이미 방문한 하이퍼링크를 의미
a:link { color: blue; }
a:visited { color: gray; }- 사용자 동작 관련 가상 클래스
:focus : 현재 입력 포커스를 갖고 있는 요소에 적용
:hover : 마우스 포인터가 위치해 있는 요소에 적용
:active : 사용자 입력에 의해 활성화된 요소에 적용
a:focus { background-color: yellow; }
a:hover { font-weight: bold; }
a:active { color: red; }가상 요소
가상 클래스와 비슷하지만 클래스가 아닌 요소라는 점만 다르다
현재 문서 내에 존재하지 않는 구조나 요소에 내용을 추가할 수 있고 스타일도 부여할 수 있다
이 떄 추가되는 새 콘텐츠는 당연하게도 HTML 코드에 직접 추가되지 않고 브라우저 화면에만 나타난다
미리 정의해놓은 위치에 삽입이 되도록 약속되어있는 보이지 않는 요소
주의. CSS3 부터는 가상 클래스와 가상 요소를 구별하기 위해 콜론: 대시 더블콜론:: 을 사용하기로 했다. 하지만 하위 브라우저에서 :: 문법을 지원하지 않는 문제가 있으므로 상황에 따라 : 기호를 사용해야 한다.!!
::before : 가장 앞에 요소를 삽입
::after : 가장 뒤에 요소를 삽입
이 둘은 content 라는 CSS 속성도 이용해줘야 내용 삽입이 가능한 점 알아두자
::first-line : 요소의 첫 번째 줄에 있는 텍스트
::first-letter : 블록 레벨 요소의 첫 번째 문자아래는 예시 코드이다
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>한번해보기</title>
<style media="screen">
p::before{
color: red;
content: "before 가상 요소를 활용한 내용;
}
p::after {
color: blue;
content: "after 가상 요소를 활용한 내용;
}
p::first-line {
color: yellow;
}
p::first-letter {
font-size: 3em;
}
</style>
</head>
<body>
<p>가나다라 마바사 아 자차 카 타
파 하 ABC DEFGHIJ KLMNOP QRSTUVW XY Z</p>
</body>
</html>구체성 ( 명시도 )
만약 어떤 요소에 적용된 CSS 스타일이 상충할 때 선택자는 어떠한 규칙이 우선되어야 하는지 정해진 룰이 있다. 이를 구체성이라고 한다
선택자를 얼마나 명시적으로 선언했느냐를 수치화 한 것
구체성의 값이 높을수록 우선되어 적용된다
예시 :
h1 { color: red; }
body h1 { color: green; }
h2.grape { color: purple; }
h2 { color: silver; }- 0, 0, 0, 0 ... 좌측부터 비교를 하고 결정된다 '영 영 영 영' 으로 읽는다
- 0, 1, 0, 0 : 선택장 있는 모든 id 속성 값
- 0, 0, 1, 0 : 선택자에 있는 모든 class 속성 값, 기타 속성, 가상 클래스
- 0, 0, 0, 1 : 선택자에 있는 모든 요소, 가상 요소
전체 선택자는 0, 0, 0, 0 을 갖는다.
또 조합자(>+~)는 구체성에 영향을 주지 않는다.
h1 {...} 0,0,0,1
body h1 {...} 0,0,0,2 앞에 것 보다 구체성 값이 높다. 즉 더 명시적으로 선언한 값이 높은 것이다.
.grape {...} 0,0,1,0
*.bright {...} 0,0,1,0
p.bright em.dark {...} 0,0,2,2
#page {...} 0,1,0,0
div#page {...} 0,1,0,1- 인라인 스타일은 1, 0, 0, 0 이다. 제일 높은 구체성을 갖고 있는 게 인라인 스타일로 선언된 규칙이다
CSS: p#page {color: red;}
HTML: <p id="page" style="color:blue">RED or BLUE?</p>
색상은 blue로 나온다.- !important : 별도의 구체성 값은 없지만 모든 구체성을 무시하고 우선권을 갖게끔 되어있다.
CSS: p#page {color: red; !important}
HTML: <p id="page" style="color:blue">RED or BLUE?</p>
색상은 red로 나온다.상속
CSS에서 상속은 어떤 스타일 규칙이 특정 요소 뿐만 아니라 그 자손 요소까지 적용되는 것을 말한다
상속은 구체성과 더불어 스타일 규칙들이 문서에 어떻게 적용되는지 이해하기 위한 또 다른 중요한 핵심 개념이다
상속 관계를 잘 활용하여 CSS의 생산성을 높일 수 있다.
CSS: h1 {color: gray;}
HTML: <h1>Hello, <em>CSS</em></h1>
em 요소는 부모의 color을 상속받아 회색으로 나타날까??
-> 박스모델 속성들은 상속되지 않는다.또 상속된 속성은 아무런 구체성을 가지지 못한다.
잘 이해가 안됐다. 나중에 다시 확인할 것
캐스케이딩
cascading은 스타일 규칙들이 어떠한 기준으로 요소에 적용되는지를 정한 규칙이다. 모든 스타일 규칙들은 폭포가 내려오는 모양처럼 단계적인 규칙에 따라 요소에 적용된다
일종의 룰이다
-
중요도(!important) & 출처 :
기본적으로 !important로 선언된 모든 규칙은 그렇지 않은 규칙보다 우선한다
출처는 제작자, 사용자, 사용자 에이전트(User Agent)로 구분한다 -
구체성
-
선언 순서 : 나중에 선언된 것이 우선이다
h1 {color: red;}
h1 {color: blue;} 어떤 것이 적용될까?끝.
