CSS란 무엇인가?
- CSS는 계단식 스타일시트를 의미한다.
- CSS는 HTML 요소를 화면, 용지 또는 다른 미디어에 표시하는 방법을 설명한다.
- CSS는 많은 일을 절약한다. 여러 웹 페이지의 layout을 동시에 제어할 수 있다.
- 외부 스타일시트가 CSS 파일에 저장된다.
CSS Selectors
CSS selectors는 style을 입히고 싶은 HTML elements들을 찾는데 사용된다.
이것은 5가지로 나누어 분류할 수 있다.
- Simple (이름, id, class에 따른 요소 선택)
- Combinator (특정 관계에 따른 요소 선택)
- Pseudo-class (특정 상태에 따른 요소 선택)
- Pseudo-elements (element의 부분을 지정하고 스타일 지정)
- Attribute (속성 혹은 속성 값에 따른 요소 선택)
| Selector | Example | Example description |
| .class | .intro | Selects all elements with class="intro" |
| #id | #firstname | Selects the element with id="firstname" |
| * | * | Selects all elements |
| element | p | Selects all <p> elements |
| element, element,.. | div, p | Selects all <div> elements and all <p> elements |
Dropdown
- Basic Dropdown
<style>
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 12px 16px;
z-index: 1;
}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
<div class="dropdown">
<span>Mouse over me</span>
<div class="dropdown-content">
<p>Hello World!</p>
</div>
</div>"Mouse over me" 라는 글씨에 마우스를 가져다 대면, "Hello world!" 라는 글씨가 보여진다.
css 부분에서 .dropdown class는 position:relative를 사용하는데, 이것은 우리가 dropdown 콘텐츠가 드롭다운 버튼 바로 아래에 놓이기를 원할 때 필요한 기능(position:absolute 를 사용) 이다.
.dropdown-content 클래스는 실제 드롭다운 콘텐츠를 보유한다. 기본적으로 숨겨져 있으며, hover에 표시된다. min-width는 160px로 설정되어 있다.
Tip: 드롭다운 콘텐츠의 width를 드롭다운 버튼만큼 넓히려면 너비를 100%로 설정하면 된다. 그리고 overflow:auto 로 작은 화면에서의 스크롤을 활성할 수 있다.
- Dropdown Menu
<style>
/* Style The Dropdown Button */
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
</style>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
- Dropdown Navbar
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #f1f1f1;}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li class="dropdown">
<a href="javascript:void(0)" class="dropbtn">Dropdown</a>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</li>
</ul>
<h3>Dropdown Menu inside a Navigation Bar</h3>
<p>Hover over the "Dropdown" link to see the dropdown menu.</p>
</body>
CSS Specificity
- Specificity 란 무엇인가?
동일한 요소를 가리키는 둘 이상의 충돌하는 CSS 규칙이 있는 경우, 브라우저는 어떤 규칙이 가장 구체적이고 따라서 어떤 규칙이 이기고 있는지를 결정하기 위해 몇 가지 규칙을 따른다.
- 계층 (Hierarchy)
모든 selector는 특정성 계층에서 그 위치를 가진다. selector의 특수성 수준을 정의하는 네 가지 범주가 있다.
Inline styles - 스타일링할 요소에 직접 부착된다. ex : <h1 style=" color: #fffffff;">.
IDs - ID는 #navbar와 같은 페이지 구성요소의 고유 식별자다.
Classes, attributes and pseudo-classes - 이 범주에는 .class, [attributes] 및 :hover, :focus 등 유사 클래스가 포함된다.
Elements and pseudo-elements - 이 범주에는 h1, div, :before 및 :after와 같은 요소 이름 및 유사 요소가 포함된다.
- Calculate specificity
Specificity 계산하는 방법
0에서 시작, 스타일 속성 1000 추가, ID마다 100 추가, 각 속성, 클래스 또는 유사 클래스에 대해 10 추가, 각 요소 이름 또는 유사 요소에 대해 1 추가.
A: h1
B: #content h1
C: <div id="content"><h1 style="color: #ffffff">Heading</h1></div>The specificity of A is 1 (one element)
The specificity of B is 101 (one ID reference and one element)
The specificity of C is 1000 (inline styling)
1 < 101 < 1000 이후, 제3규칙(C)은 구체성이 더 높으므로, 적용하게 된다.
- Rules
- Equal specificity: the latest rule counts
동일한 규칙이 외부 스타일시트에 두 번 작성되면 스타일시트의 더 낮은 규칙이 스타일링할 요소에 더 가까우므로 적용된다.
h1 {background-color: yellow;}
h1 {background-color: red;}
- ID selectors have a higher specificity than attribute selectors
div#a {background-color: green;}
#a {background-color: yellow;}
div[id=a] {background-color: blue;}첫번째 규칙이 다른 두 규칙보다 자세하므로 적용된다.
- Contextual selectors are more specific than a single element selector
내장된 스타일시트가 스타일링할 element와 더 가깝기 때문에 latter rule이 적용된다.
From external CSS file:
#content h1 {background-color: red;}
In HTML file:
<style>
#content h1 {
background-color: yellow;
}
</style>
- A class selector beats any number of element selectors
-a class selector such as .intro beats h1, p, div, etc
.intro {background-color: yellow;}
h1 {background-color: red;}
- The universal selector and inherited values have a specificity of 0
- *, body * and similar have a zero specificity. Inherited values also have a specificity of 0.
'Study > Web' 카테고리의 다른 글
| Node.js (2) - 웹 서버 만들기 (0) | 2020.08.26 |
|---|---|
| Node.js (1) - 시작 (설치하기) (0) | 2020.08.25 |
| JS DOM (0) | 2020.08.21 |
| JS Form 만들기 (0) | 2020.08.21 |
| JavaScript (0) | 2020.08.19 |
