[CSS 소개]
Cascading Style Sheets
-HTML 꾸며주는 언어
-html : 웹페이지 정보 표현 | CSS : 디자인
CSS Zen Garden: The Beauty of CSS Design
So What is This About? There is a continuing need to show the power of CSS. The Zen Garden aims to excite, inspire, and encourage participation. To begin, view some of the existing designs in the list. Clicking on any one will load the style sheet into thi
www.csszengarden.com
[CSS 문법과 적용]
CSS 문법
h1 {color : yellow; font-size: 2em;}
<!--h1 : 선택자 (selector) -> 어느 요소를 꾸밀 것인지-->
<!--{ } 부분 : 어떻게 꾸밀 것인지-->
<!--color : 속성-->
<!--yellow : 속성값-->
<!--color : yellow -> 선언
font-size : 2em;도 선언임-->
<!--{ // } : 선언부-->
<!--h1까지 다 합쳐진 부분 : 규칙-->선택자(selector)
속성(property)
값(value)
선언(declaration)
선언부(declaration block)
규칙(rule set)
css 주석
/* (내용) */
css 적용 방식
/* Inline */
<div style="..."> 내용 </div>
/* Internal */
<style> ... </style>
/* External */
<link rel="stylesheet href="css/style.css">
/* @import */
@import url('css/style.css');
글자 색 넣기 (Inline)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>css</title>
</head>
<body>
<p style="color: gray;">Hello, CSS</p>
<p>css is my life...ㅋㅋ</p>
</body>
</html>
글자 색 넣기 (Internal)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>css</title>
<style>
p {color : gray}
</style>
</head>
<body>
<p>Hello, CSS</p>
<p>css is my life...ㅋㅋ</p>
</body>
</html>
head요소에 들어간다.
<body> 요소 안 <p> 태그에 해당하는 텍스트들을 전부 회색으로 바꾼다.
다른 색으로 바꾸고 싶으면 haed - style 태그 안 색상만 변경하면 되는 편리함이 있다.
(External)
외부 스타일.
별로의 CSS 파일을 생성.
확장자가 .css 가 되어야 함.
<head> 태그 내 <link>태그를 이용해 입력해야 함.
/* 별도의 css 파일 생성 - boost.css */
p {
color: gray;
}<!--.css 파일 경로를 .html파일 내 <head> - <link> 태그 내 입력-->
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>css</title>
<link href="./boost.css" rel="stylesheet">
</head>
<body>
<p>Hello, CSS</p>
<p>css is my life...ㅋㅋ</p>
</body>
</html>
<p>로 작성된 부분이 gray 색으로 나타남.
-> 용량도 작고 간단하고 편리하기 때문에 .css 파일을 따로 만들어 link 경로를 적어주는 방법을 대부분 사용한다.
(import)
스타일 시트 내 다른 스타일 시트 파일 불러오는 방식.
<style> 내부 상단이나 외부 스타일 시트 파일 상단에 선언.
성능상 좋지 않아 거의 안쓰임.
[선택자 1]
선택자(Selector)
-요소 선택자
-class 선택자
-id 선택자
-속성 선택자
요소 선택자(태그)
h1 {color: yellow;}
h2 {color: yellow;}
h3 {color: yellow;}
h4 {color: yellow;}
h5 {color: yellow;}
h6 {color: yellow;}-> 한 번에 선언하기 위해서는 그룹화 진행해야 함
선택자
h1, h2, h3, h4, h5, h6 {color: yellow;}전체 선택자
* : asterisk (아스테리스크)
* {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;}
[선택자 2]
Q HTML 문자는 보라색 글자색상을, CSS 문자는 밑줄을 선언
<dl>
<dt>HTML</dt>
<dd><span>HTML</span>은 문서의 구조를 나타냅니다.</dd>
<dt>CSS</dt>
<dd><span>CSS</span>는 문서의 표현을 나타냅니다.</dd>
</dl><!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>css</title>
<style media="screen">
.html {color: purple;}
.css {text-decoration: underline;}
</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>
</dl>
</body>
</html>
class 선택자
css
.foo { font-size: 30px;}html
<p class="foo"> ... </p>
다중 class
css
.foo {font-size: 30px;}
.bar {color: blue;}html
<p class="foo bar"> ... </p>
Q. "JS" 문자는 보라색 글자색상, 밑줄 두 스타일 모두 적용
<dt>JS</dt>
<dd><span>JS</span>는 문서의 동작을 나타냅니다.</dd><!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>css</title>
<style media="screen">
.js {color: purple;}
.js {text-decoration: underline;}
</style>
</head>
<body>
<dl>
<dt class="js">JS</dt>
<dd><span class="js">JS</span>는 문서의 동작을 나타냅니다.</dd>
</dl>
</body>
</html>
ID 선택자
css
#bar {background-color: yellow;}html
<p id="bar"> ... </p>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>css</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>
id vs class 선택자와의 차이점
| id | class |
| # | . |
| id 속성 참조 | class 속성 참조 |
| 문서 내 유일한 요소에 사용 (한 번만 사용 되어야 함) | 여러 요소에 같은 클래스 놓고 동일 규칙 사용 |
| 구체성 |
[선택자 3]
선택자의 조합
/* 요소와 클래스의 조합 */
p.bar {...}
/* 다중 클래스 */
.foo.bar {...}
/* 아이디와 클래스의 조합 */
#foo.bar {...}<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>css</title>
<style media="screen">
.html {color: purple;}
.css {text-decoration: underline;}
#id-selector {font-size: 30px;}
.html.css {border: 1px solid;}
</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[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>-> 클래스 속성이 있는 모든 글자(Hello, CSS, HTML)는 실버 색상으로 나타난다.
-> 밑줄은 HTML에서만 그어진다. (class, id 모두 충족)
정확한 속성값으로 선택
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>class 속성의 값이 foo로 되어 있으면 글자색은 은색이다. (Hello)
id값이 title이라면 밑줄이 그어진다. (HTML)
부분 속성값으로 선택
-[class~="bar"] : class 속성의 값이 공백으로 구분한 "bar" 단어가 포함되는 요소 선택
-[class^="bar"] : class 속성의 값이 "bar"로 시작하는 요소 선택 (^ = 캐럿 기호)
-[class$="bar"] : class 속성의 값이 "bar"로 끝나는 요소 선택
-[class*="bar"] : class 속성의 값이 "bar" 문자가 포함되는 요소 선택
p[class~="color"] {font-style: italic;}
p[class^="color"] {font-style: italic;}
p[class$="color"] {font-style: italic;}
p[class*="color"] {font-style: italic;}<p class="color hot">red</p>
<p class="cool color">blue</p>
<p class="colorful nature">rainbow</p>
class~="color"
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>css</title>
<style media="screen">
p[class~="color"] {
font-style: italic;
}
/*p[class^="color"] {
font-style: italic;
}
p[class$="color"] {
font-style: italic;
}
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>
값이 공백으로 구분한 color가 들어간 요소 선택 - red, blue
class^="color"
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>css</title>
<style media="screen">
/*p[class~="color"] {
font-style: italic;
}*/
p[class^="color"] {
font-style: italic;
}
/*p[class$="color"] {
font-style: italic;
}
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>
color로 시작하는 요소 선택 - red, rainbow
class$="color"
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>css</title>
<style media="screen">
/*p[class~="color"] {
font-style: italic;
}
p[class^="color"] {
font-style: italic;
}*/
p[class$="color"] {
font-style: italic;
}
/*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>
color 값으로만 끝이 나면 된다 - blue
class*="color"
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>css</title>
<style media="screen">
/*p[class~="color"] {
font-style: italic;
}
p[class^="color"] {
font-style: italic;
}*/
/*p[class$="color"] {
font-style: italic;
}*/
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>
color가 포함되어 있어야 한다 - red, blue, rainbow
[문서 구조 관련 선택자]
부모와 자식 관계 이해하기
<html>
<body>
<div>
<h1><span>HTML</span>: Hyper Text Markup Language</h1>
</div>
<p>HTML과 CSS와 JAVASCRIPT를 이용해서 멋진 웹 사이트를 제작할 수 있습니다.</p>
</body>
</html>html은 head, body의 부모 요소이다.
head는 html의 자식 요소이다.
html은 div의 조상 요소이다.
div는 html는 자손 요소이다.
div와 p는 형제 요소이다. (인접해있다)
문서 구조를 이용한 선택자
-자손 선택자
-자식 선택자
-인접 형제 선택자
자손 선택자
div span {color: red;}선택자 div와 span 사이 아무런 기호 없이 공백으로만 표기. (자식 + 자손)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>css</title>
<style media="screen"> /*div 자손 요소 span에도 같은 스타일 적용*/
div span {color: red;}
</style>
</head>
<body>
<div>
<h1><span>HTML</span>: Hyper Text Markup Language</h1>
<span>CSS는 문서를 꾸며줍니다.</span>
</div>
<span>Javascript는 문서를 동적으로 제어할 수 있습니다.</span>
<p>HTML과 CSS와 JAVASCRIPT를 이용해서 멋진 웹 사이트를 제작할 수 있습니다.</p>
</body>
</html>
자식 선택자
div > span {color: red;}공백 없이 바로 꺽쇠를 붙여도 상관 없음 (자식만 선택)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>css</title>
<style media="screen"> /*div 자손 요소 span에도 같은 스타일 적용*/
div > span {color: red;}
</style>
</head>
<body>
<div>
<h1><span>HTML</span>: Hyper Text Markup Language</h1>
<span>CSS는 문서를 꾸며줍니다.</span>
</div>
<span>Javascript는 문서를 동적으로 제어할 수 있습니다.</span>
<p>HTML과 CSS와 JAVASCRIPT를 이용해서 멋진 웹 사이트를 제작할 수 있습니다.</p>
</body>
</html>
인접 형제 선택자 (div의 인접한 형제인 span 요소 찾아 다음과 같은 스타일 적용)
div + span {color: red;}<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>css</title>
<style media="screen"> /*div 자손 요소 span에도 같은 스타일 적용*/
div + span {color: red;}
</style>
</head>
<body>
<div>
<h1><span>HTML</span>: Hyper Text Markup Language</h1>
<span>CSS는 문서를 꾸며줍니다.</span>
</div>
<span>Javascript는 문서를 동적으로 제어할 수 있습니다.</span>
<p>HTML과 CSS와 JAVASCRIPT를 이용해서 멋진 웹 사이트를 제작할 수 있습니다.</p>
</body>
</html>
조합해서 사용
body > div table + ul {...}body 요소 자식 div 요소의 자손인 table 요소 바로 뒤에 인접한 ul 요소 선택.
body 자식 div 자손 table 형제 "ul" 선택
[가상 선택자 1]
-가상 클래스(pseudo class)
-가상 요소(pseudo element)
가상 클래스
미리 정의해놓은 상황에 적용이 되도록 약속되어있는 보이지 않는 클래스
:pseudo-class {
property: value;
}https://developer.mozilla.org/ko/docs/Web/CSS/Pseudo-classes
의사 클래스 - CSS: Cascading Style Sheets | MDN
CSS 의사 클래스(가상 클래스)는 선택자에 추가하는 키워드로, 선택한 요소가 특별한 상태여야 만족할 수 있습니다. 예를 들어 :hover를 사용하면 포인터를 올렸을 때에만 글씨 색을 바꾸고 싶을
developer.mozilla.org
-> 가상 클래스 선택자
문서 구조와 관련된 가상 클래스
- :first-child : 첫 번째 자식 요소 선택
- :last-child : 마지막 자식 요소 선택
li:first-child { color: red; }
li:last-child { color: blue; }<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>css</title>
<style media="screen">
li:first-child {
color: red;
}
li:last-child {
color: blue;
}
</style>
</head>
<body>
<ul>
<li>HTML</li> <!--<li class="first-child">와 같음-->
<li>CSS</li>
<li>JS</li>
</ul>
</body>
</html>
링크 관련된 가상 클래스
- :link : 하이퍼링크이면서 아직 방문하지 않은 앵커
- :visited : 이미 방문한 하이퍼링크를 의미
a:link { color: blue; }
a:visited { color: gray; }<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>css</title>
<style media="screen">
a:link {color: blue;}
a:visited {color: gray;}
</style>
</head>
<body>
<a href="http://naver.com">네이버</a>
<a href="http://google.com">구글</a>
<a href="http://daum.net">다음</a>
</body>
</html>
사용자 동작 관련 가상 클래스
- : focus : 현재 입력 포커스를 갖고 있는 요소에 적용
- : hover : 마우스 포인터가 위치해 있는 요소에 적용
- : active : 사용자 입력에 의해 활성화된 요소에 적용
a:focus { background-color: yellow; }
a:hover { font-weight: bold; }
a:active { color: red; }<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>css</title>
<style media="screen">
a:focus {
background-color: yellow;
}
a:hover {
font-weight: bold;
}
a:active {
color: red;
}
</style>
</head>
<body>
<a href="http://naver.com">네이버</a>
<a href="http://google.com">구글</a>
<a href="http://daum.net">다음</a>
</body>
</html>
💡 웹 브라우저 css 호환성 확인
Can I use... Support tables for HTML5, CSS3, etc
caniuse.com
여기에서 확인하면 된다.
-(Mac)사파리 웹 브라우저 버전 체크
1. 사파리 브라우저 열기
2. 좌측 상단 사파리 클릭
3. about Safari 클릭
4. 버전 확인
html은 크롬이 좀 더 기능 구현 확인에 편리한 것 같다.
앞으로 크롬 자주 사용해야지...
근데 사파리 15.5는 위 사이트에서 브라우저 호환성을 확인할 수가 없다.
15.4까지만 나와있음.
15.5는 아직 업데이트 중인걸까? 일단 코치님께 질문 드려봄.
[가상 선택자 2]
가상 요소
미리 정의해놓은 위치에 삽입이 되도록 약속되어있는 보이지 않는 요소
- :befor : 가장 앞에 요소를 삽입
- :after : 가장 뒤에 요소를 십입
- :first-line : 요소의 첫 번째 줄에 있는 텍스트
- :first-letter : 블록 레벨 요소의 첫 번째 문자
https://developer.mozilla.org/ko/docs/Web/CSS/Pseudo-elements
의사 요소 - CSS: Cascading Style Sheets | MDN
CSS 의사 요소(가상 요소)는 선택자에 추가하는 키워드로, 선택한 요소의 일부분에만 스타일을 입힐 수 있습니다. 예를 들어 ::first-line (en-US)을 사용하면 문단 첫 줄의 글씨체만 바꿀 수 있습니다.
developer.mozilla.org
p:before
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>css</title>
<style media="screen">
/*style 태그 내부의 css 스타일이 최적화된느 미디어나 매체 명시 속성*/
p::before {
color: red;
content: "before 가상 요소를 활용한 내용";
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua.</p>
</body>
</html>
p:after
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>css</title>
<style media="screen">
/*style 태그 내부의 css 스타일이 최적화된느 미디어나 매체 명시 속성*/
p::after {
color: blue;
content: "after 가상 요소를 활용한 내용";
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua.</p>
</body>
</html>
p:first-line
첫 번째 줄만 변경 (페이지 유동성에 따라. 고정 x)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>css</title>
<style media="screen">
/*style 태그 내부의 css 스타일이 최적화된느 미디어나 매체 명시 속성*/
p::first-line {
color: blue;
font-size: 3em;
}
/*3em : 3배로 글자 키우기*/
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. css is very good.</p>
</body>
</html>
first-letter
첫 번째 글자만 변경
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>css</title>
<style media="screen">
/*style 태그 내부의 css 스타일이 최적화된느 미디어나 매체 명시 속성*/
p::first-letter {
color: blue;
font-size: 3em;
}
/*3em : 3배로 글자 키우기*/
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. css is very good.</p>
</body>
</html>
[구체성]
구체성(명시도)
어떤 스타일이 적용 되는 것인가?
h1 {color: red;}
body h1 {color: green;} /*요소 선택자 두개 조합하여 자손 선택자 사용 규칙은 green으로 나타냄*/
h2.grape {color:purple;}
h2 {color: silver;}구체성은 선택자를 얼마나 명시적으로 선언했느냐를 수치화 한 것.
0,0,0,0
구체성은 4개 값으로 이루어져 있다.
구체성 계산 시, 좌측부터 계산함 -> 좌측에 있는 숫자가 클수록 높은 구체성을 가짐.
-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 {...} : (요소 2개) 0,0,0,2 (첫 번째보다 2번이 구체성이 더 높음 -> 실제 스타일 적용 : 두 번째 규칙이 우선하게 됨)
.grape {...} : 0,0,1,0
*.bright {...} : (전체 선택자는 구체성 값에 영향 주지 않음) 0,0,1,0
p.bright em.dark {...} : 0,0,2,2 ((.bright, .dark)클래스 2개, (p, em)요소 2개)
#page {...} : (아이디) 0,1,0,0
div#page {...} : (요소 선택자 + 아이디 선택자 조합) 0,1,0,1
-> 가장 높은 구체성 갖음 : div#page
-> 그 다음 : #page
인라인 스타일
css
p#page { color: red; }
/* 0,1,0,1 */html
<p id="page" style= "color: blue">Lorem ipsum dolor sit.</p>
<!--1,0,0,0 : 인라인 구체성-->
<!--인라인 스타일은 제일 높은 구체성 갖고 있음-->-> red? blue?
: blue로 표현됨 (인라인 스타일은 제일 높은 구체성(1,0,0,0)을 가지고 있음)
!Important
-속성값 뒤에 한 칸 공백 주고 느낌표와 같이 씀.
css
p#page {color: red !important: }html
<p id="page" style="color:blue">Lorem impusm dolor sit.</p>-> red? blue?
: red (important는 구체성을 모두 무시하고 우선권을 갖는다.)
[상속]
구체성과 더불어 선언들이 문서에 어떻게 적용되는지 이해하기 위한 핵심 개념.
어떤 스타일이 자손 요소에까지 적용되는 방식.
css
h1 { color: gray; }html
<h1>Hello, <em>CSS</em></h1>-> em 요소는 부모의 color를 상속받아 회색으로 나타날까?
-> 박스 모델 관련 상속 : margin, padding, background, border (상속되지 않음)
border 속성
-요소 외곽에 테두리 만드는 속성.
-h1 요소에 border 속성 이용해서 테두리를 만들었다면 큰 테두리만 나타나게 됨.
상속된 값의 구체성은?
css
* { color: red; }
h1#page { color: gray; }
<!--
전체 선택자 : red -> 0,0,0,0
h1#page : gray -> 0,1,0,1
-->html
<h1 id="page">Hello, <em>CSS</em></h1>->em 요소는 회색으로 나타날까?
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>css</title>
<style media="screen">
* {color: red;}
h1#page {color: gray;}
</style>
</head>
<body>
<h1 id="page">Hello, <em>CSS</em></h1>
</body>
</html>
상속된 값에는 아무런 구체성을 받지 못함.
심지어 0,0,0,0도 아니다.
(전체 선택자의 구체성에 밀리기 때문에 gray가 아닌 red로 표현되었다.)
만약 전체 선택자가 없었다면, 어떤 선택자와도 겹치지 않아서 아무런 구체성이 없어도 gray로 표현되었을 것이다.
[캐스케이딩]
-모든 스타일 규칙들이(css) 어떤 기준, 방식으로 문서에 적용이 되는지 정하는 규칙
(ex. 구체성)
-폭포가 내려오는 모양처럼 단계적인.
구체성이 같은 두 규칙이 동일한 요소에 적용된다면?
h1 { color: red; }
h1 { color: blue; }
캐스케이드 규칙
1. 중요도(!important) & 출처
2. 구체성
3. 선언순서
중요도 & 출처
-기본적으로 !important로 선언된 모든 규칙은 그렇지 않은 규칙보다 우선한다.
-출처는 제작자, 사용자, 사용자 에이전트(User Agent)로 구분한다.
(제작자 : 사이트 개발자가 작성한 css, 사용자 : 사이트 방문하는 사용자들이 작성한 css,
사용자 에이전트 : 일반 사용자의 환경(브라우저에 내장된) css)
우선 순위
5. 사용자 에이전트 스타일
-> 브라우저에서 기본적으로 적용되는 스타일
4. 사용자 스타일
-> 일반 유저가 직접 css를 만들어서 본인 브라우저에 설정해놓은 것
-> 지금은 잘 사용되지 않고, 지원하지 않는 브라우저들이 많이 있음
3. 제작자 스타일 (=사이트 제작자가 작성한 css)
2. 제작자 !important 스타일
1. 사용자 !important 스타일
-> 사용자 스타일은 거의 쓰지 않음
-> important를 실무에서 쓰면 싸다구 맞을 수 있으니 조심하라고 하심..
구체성
p#bright { color: silver; }
p { color: red; }
/* 구체성
#birht : 0,1,0,0
요소 p : 0,0,0,1
=> silver가 표현됨 */<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>css</title>
<style media="screen">
p#bright {
color: silver;
}
p {
color: red;
}
</style>
</head>
<body>
<p id="bright">Hello, CSS</p>
</body>
</html>
선언 순서
-나중에 선언된 것이 더 우선하게 됨.
p { color: silver; }
p { color: red; }-> red로 표현됨.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>css</title>
<style media="screen">
p {
color: silver;
}
p {
color: red;
}
</style>
</head>
<body>
<p id="bright">Hello, CSS</p>
</body>
</html>
[선택자 정리]
https://www.w3schools.com/cssref/css_selectors.asp
CSS Selectors Reference
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
선택자 종류 잘 기술되어 있음.
부스트코스 퀴즈4.
아래 선택자 조합에서 item2가 선택되지 않는 것을 고르시오.
<div class="wrap">
<strong> title </strong>
<p> description </p>
<ul class="list">
<li class="item i1"> item 1 </li>
<li class="item i2"> item 2 </li>
<li class="item i3"> item 3 </li>
</ul>
</div>
1. strong + .list .i2
2. div > .list .i2
3. .wrap .item.i2
4. .wrap .list .i2
정답 : 1번
왜 이해가 가지 않지? 뭐지
->
strong + .list 부분에서 이해가 잘 되지 않았던 것 같다.
strong과 인접한 형제 요소는 p이다.
"인접 형제 선택자는 형제 관계이면서 바로 뒤에 인접해 있는 요소를 선택하는 선택자입니다."
디테일을 간과했던 것 같다.
'[Language] > VIEW' 카테고리의 다른 글
| [HTML] margin vs padding (0) | 2022.10.19 |
|---|---|
| [3주차 미션]4. CSS 이해하기 (0) | 2022.05.22 |
| 콘텐츠모델, 시멘틱마크업,블록 & 인라인 (0) | 2022.05.17 |
| [부스트코스] HTML 태그 - 2주차 미션 (0) | 2022.05.15 |
| HTML 태그 (0) | 2022.05.15 |
