CSS (1) - 선택자,Cascade,상속

CSS 

 

CSS (Cascading Style Sheets) 

html로 이루어진 단조로운 웹페이지를 예쁘게 꾸며주는 역할을 한다.

 

---

 

CSS 의 구조

 

CSS의 전체 구조는 rule set이라 부르며

 

맨 앞의 선택자, 속성:속성 값으로 이루어진 선언으로 이루어져 있다.

 

---

CSS 를 위한 link 태그

 

<link rel="stylesheet" href="app.css">

 

link 태그의 rel속성은 relation의 줄임말로, 현재 문서와 외부 리소스 사이의 연관 관계를 명시한다.

이런식으로 입력을 해주면, app.css를 연결해 stylesheet으로 쓸것을 명시하고 있다.

 

---

선택자

전체 선택자

*{
	color: magenta;
}

전체 요소들에 스타일을 부여한다.

 

---

 

요소 선택자

 

button{
	color:magenta;
}

 

요소 선택자는 지정된 타입의 모든 항목을 선택해서 스타일을 부여한다.

 

 

 

button,h1{
	color:magenta;
}

이런식으로 콤마를 통해 여러개의 항목을 선택할수도 있다.

---

ID 선택자, Class 선택자

 

 

   <h1 id="one"> This is ID</h1>
   <h1 class="two"> This is Class</h1>

 

#one {
    color:aquamarine;
}

.two{
    color: red;
}

 

id 선택자는 #으로 시작

class 선택자는 two로 시작한다.

 

id는 하나의 요소에만 적용되어야 하지만

class는 여러 요소에 적용이 가능하다.

 

---

 

자손 선택자

 

   <ul>
    <li><h1>나는 h1</h1></li>
    <li><h1>나는 h1</h1></li>
    <li><h2>나는 h2</h2></li>
    <li><h1>나는 h1</h1></li>
    <li><h1 class="me">나는 h1</h1></li>
   </ul>

 

li h2{
    color:magenta;
}

 

자손 선택자는 공백을 통해 사용한다.

위 css는 li의 자손중에 h2 요소들의 컬러를 전부 마젠타색으로 바꾼다는 뜻이다.

li .me{
    color: blue;
}

 

이런식으로 요소 선택자 + 공백 + 클래스 선택자를 혼합해서 사용도 가능하다.

 

몇번째 자손인지는 상관없이 전부 적용시키니 주의 해야한다.

 

---

인접 선택자

  <ul>
        <li>
            <h1>나는 h1</h1>
            <h1>나는 h1</h1>
            <h1>나는 h1</h1>
            <h1>나는 h1</h1>
            <h1>나는 h1</h1>
        </li>
        <h1>나는 밖의 H1</h1>
    </ul>

 

li + h1{
    color: magenta;
}

 

인접 선택자는 +를 활용한다.

인접 선택자보다는 형제 선택자라고 불러도 될것같은 느낌

동급(?) 인 요소들에게 스타일을 부여한다.

 

위 css는 li와 동급인 h1요소들에게 마젠타 색깔을 부여한다는 뜻이다.

 

---

직계 자손 선택자

 

    <ul>
        <li><h1>나는 h1</h1></li>
        <li><h1>나는 h1</h1></li>
        <li><h2>나는 h2</h2></li>
        <li><h1>나는 h1</h1></li>
    </ul>

 

/* 안됨 */
ul > h1{
    background-color: magenta;
}

/* 됨 */
li > h1{
    background-color: magenta;
}

 

직계자손 선택자는 말 그대로 바로 한단계 아래의 자손만 적용되는 선택자다.

 

ul > h1 은 2단계가 떨어져서 적용되지 않지만,

li > h1 은 한단계기 때문에 적용이 되는것을 볼 수 있다.

 

---

속성 선택자

   <input type="password" placeholder="비밀번호 입력..">

input[type="password"]{
    color: green;
}

 

요소[속성="값"] 으로 선택을 할 수있다.

 

---

가상 클래스(Pseudo Class)

 

선택자 끝에 붙여 상태를 특정하는 키워드.

선택자 끝에 : (콜론)을 붙여서 사용한다.

 

요소마다 특정 조건을 캐치할수있는 정도로 이해하고 있다.

 

hover

 

    <button>버튼</button>

button:hover{
    background-color: black;
}

 

이런식으로 :hover를 붙여주면 버튼에 마우스를 가져다 댔을 때 배경이 검정색으로 변하는것을 볼 수있다.

 

active

 

button:active{
    background-color: red;
}

 

 

가상클래스 :active를 써주면 클릭하고 있을때 빨갛게 변하기도 한다.

 

nth-of-type(n)

 

 

button:nth-of-type(2){
    background-color: magenta;
}

 

버튼을 더 생성해주고, :nth-of-type(2) 를 적용하면

2번째에 있는 버튼에만 해당 스타일이 적용된다.

button:nth-of-type(2n){
    background-color: magenta;
}

 

뒤에 n을 붙여주면 2번째마다 있는 버튼에 적용된다.

 

---

가상 요소 (Pseudo Element)

::(콜론x2) 콜론 2개를 붙여 사용하며 선택된 요소의 특정 부분만 스타일을 적용할 수 있도록 해준다.

 

 

    <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius earum omnis veniam cupiditate. Commodi, facere
        quae voluptatem iste nulla, architecto cum beatae excepturi, at et ex unde numquam modi dolorum.
    </p>

 

p::first-letter{
    font-size: 50px;
}

p::first-line{
    color: blueviolet;
}

p::selection{
    background-color: magenta;
}

 

first-letter로 첫 글자의 크기를 키웠고,

first-line으로 첫 줄의 색을 바꿨고,

selection으로 드래그 했을때 나오는 배경색을 바꿨다.

 

이런식으로 부가적인 요소들을 수정할 수 있다.

 

---

Cascade

 

Css의 이름에도 붙어있는 Cascade 는 스타일을 결정할때 여러 스타일 규칙들을 어떻게 합치고 적용할지를 결정하는 프로세스다.

Cascade는 폭포라는 뜻을 가지고 있는데, 위에서 부터 아래로 흐르는 폭포처럼 스타일이 적용된다.

중요도 , 명시성, 소스의 순서 등에 영향을 받는다.

 

다는 아니지만 급이 높은? 것부터 정리를 해보겠다.

 

!important

p::selection{
    background-color: magenta !important;
}

 

이런식으로 뒤에 !important를 붙여서 이게 가장 중요한거라고 브라우저에게 알릴 수 있다.

 

인라인 스타일

  <button style="background-color: red"></button>

 

html을 작성할때 style 속성으로 스타일을 작성할 수 있는데, 이것이 인라인 스타일이다.

높은 중요도를 가진다.

 

명시성

ID > Class > Element 순서로 명시성을 가진다.

 

   <button id="testID" class="testClass">버튼</button>

#testID {
    color: red;
}

.testClass {
    color: green;
}

button {
    color: blue;
}

 

이렇게 3개가 경쟁한다면 가장 명시성이 높은 id의 스타일이 적용된다.

 

 <p>
    <button>
        버튼
    </button>
 </p>

p button{
    color: red;
}

button{
    color: magenta;
}

 

p button vs button 이렇게 2개가 경쟁하면 , 조금 더 구체적인 p button 의 스타일이 적용된다.

다만 이것은 같은 급의 비교고, class가 여러개 있어봤자 id 하나를 못이긴다.

 

css 선언 순서

<link rel="stylesheet" href="app.css">
<link rel="stylesheet" href="app2.css">

 

이런식으로 2개의 css를 순서대로 선언을 해두었고 

각각의 css에 동급의 스타일이 존재한다면 app2.css에 있는 스타일이 적용된다.

 

---

상속

css 의 요소들은 상속을 받는 요소들이 있다.

대표적으로는 color

 

<h1>제목</h1>
<p>
    내용
</p>

 <p>
    <button>
        버튼
    </button>
 </p>

body{
    color: red;
}

 

이렇게 body에만 color를 입력해도 h1과 p에 있는 색깔들이 전부 바뀌었다.

다만 button에 있는 text는 바뀌지 않았는데,

 

button{
    color: inherit;
}

 

이런식으로 상속을 받아주면 상위 부모의 색을 상속 받는다.

(ex. 위에 h1이 있다면 h1의 컬러, h1이 없으면 body..)

 

상속을 받는 요소들이 있고 안받는 요소들이 있으니 작업하면서 유의를 해야겠다.