CSS 기초 & 선택자

Jerry95 2024. 4. 7. 18:23

2024. 4. 7. 18:23

1. CSS(Cascading Style Sheets)

룰 기반의 언어
여러가지 규칙을 나열하는 방식으로 작성
특정 요소, 특정 요소들의 집합의 스타일 규칙을 정의
h1{ color:red; font-size: 12px; }
사용방법
- 선택자(Selector) : 스타일을 지정할 HTML 요소를 선택
- 선언블록: 중괄호 내부에 여러 선언들을 작성
- 선언 : 프로퍼티와 값으로 이루어진 쌍
- 선택자의 형태로 이루어진 하나의 rule

2. Cascading 원칙

계단식으로 구성되어 위에서부터 아래로 떨어지는 것을 의미

스타일 우선순위

동일한 스타일이라도 선언된 곳에 따라 우선순위가 정해짐
- 브라우저에 의해 정의된 스타일 < 개발자가 선언한 스타일(inline, embeded, external) < 사용자가 구성한 스타일
```
<html>
<head>
    <style>
        #box{
            color:red;
        }
    </style>
    <link href="style.css" ref="stylesheet"> // #box{color: blue;}
</head>
<body>
    <div id="box">Box</div>
</body>
</html>
```
  - style 태그가 link태그보다 먼저 선언되었기 때문에 style 태그가 우선 : 글자색은 red
```
<html>
<head>
      <style>
          #box{
              color:red;
          }
      </style>
      <link href="style.css" ref="stylesheet">
</head>
<body>
      <div id="box">Box</div>
</body>
</html>
```
  - link태그가 style 태그보다 먼저 선언되었기 때문에 외부 stylesheet가 우선 : 글자색 blue

적용 범위가 적을수록 우선시 된다
- tag 스타일 < class 스타일 < id 스타일 < 인라인 스타일
- 인라인 스타일로 작성하면 css파일로 style을 구성해도 인라인 스타일이 적용됨
소스코드의 순서가 뒤에 있으면 덮어쓴다 : 동일한 스타일을 준 경우에 해당됨

스타일 상속

부모 요소에 있는 스타일 속성들이 자식 요소로 전달된다.
- 자식 요소에서 재 정의할 경우, 부모의 스타일을 덮어씀
상속이 되지 않는 속성도 존재(배경이미지, 배경 색 등)

3. CSS 적용 방법

내부스타일(embeded)
- HTML 내부의 head태그에 style태그를 선언하여 작성
인라인스타일(inline)
- 하나의 요소에만 스타일을 적용하고 싶을 때 사용
외부스타일(external)
- link태그로 연결

4. 선택자

4-1) 요소 선택자(type selector, tag selector)

태그 이름으로 요소를 선택
하나의 HTML에 있는 특정 태그를 모두 선택(모든 h2를 선택)
```
h2{
color:red;
}
```

4-2) id 선택자

HTML 태그의 전역 속성 중 id 속성으로 선택
이름표를 달아준다고 생각하면 됨(HTML 전체 요소중 하나의 요소에만 지정해야함)
#welcome{ color: red; }

4-3) class 선택자

HTML 태그의 전역 속성 중 class 속성으로 선택
이름표를 달아주지만, 중복이 가능
해당 class를 가진 모든 요소를 선택
요소가 2개의 class를 가지는 경우 마지막에 작성된 스타일이 적용됨
```
.title{ color:red; }    
.title{ color: blue; }
```
class가 title인 요소는 색상이 blue로 적용

4-4) 속성 선택자(Attribute selector)

<style>
    a[target] {
        color:hotpink;
    }    
    a[href="http://example.com"]{
        color:skyblue;
    }
    a[href^="http://"]{
        color:purple;
    }
    a[href$=".com"]{
        color:silver
    }
    a[href*="example"]{
        color:red
    }
</style>
<body>
    <a href="http://example.com" target="_blank">Example Link(com/http)</a>
    <a href="http://example.org" target="_blank">Example Link(org/http)</a>
    <a href="https://exa-mple.com">Example Link(com/https)</a>
    <a href="https://example.org">Example Link(org/https)</a>
</body>

태그[속성]
태그[속성="값"] : 값이 정확해야만 선택
태그[속성^="값"] : 시작하는 요소를 선택
태그[속성$="값"] : 끝나는 요소를 선택
태그[속성*="값"] : 중간이라도 상관없이 값을 가지는 요소를 선택

5. 가상클래스 선택자 (selector:___)

실제로 존재하지 않는 상태에 이름을 붙여준 것(클래스가 없지만 마치 있는 것 처럼 이름을 붙여줌)

<body>
    <h2>Movie List</h2>
    <ul>
        <li class="movie">Toy Story</li>
        <li class="movie">Zootopia</li>
        <li class="movie">Inside Out</li>
        <li class="movie">Finding Nemo</li>
    </ul>
    <ol>
        <li>Americano</li>
        <li>Latte</li>
        <li>Hot Choco</li>
    </ol>
    <p>Lorem ipsum dolor sit amet</p>
    <p>consectetur adipiscing elit</p>
    <p>Commodi voluptates sint iure quas quasi.</p>
</body>

5-1) :first-child(:last-child)

선택된 요소의 부모 기준으로 첫번째 형제가 선택됨
class 선택자로 first-child를 선택하게 될 경우 style이 적용되지 않을 수 있음
- selector 중 첫번째 자식을 의미하지 않음 → selector에 의해 선택된 부모 태그 기준 첫번째 형제
- class가 movie인 요소들의 부모는 ul태그(ul을 부모로 두는 요소들의 형제 태그 중 첫번째 태그는 Toy Story)
- 첫번째 형제는 class 속성을 가지지 않기 때문에 HTML문서에서 32px의 글자크기를 가지는 요소는 없음
```
<style> 
    li:last-child { 
        color: green 
    }     
    .movie:first-child { 
        font-size: 32px; 
    }     
</style> 
<body> 
   <ul> 
     <li class=>Toy Story</li> 
     <li class="movie">Zootopia</li> 
     <li class="movie">Inside Out</li> 
     <li class="movie">Finding Nemo</li> 
 </ul> 
</body>
```

5-2) :nth-child(num)

숫자외에도, 2n, 2n-1, even, odd 등으로 요소를 선택할 수 있음
```
li:nth-child(3){ 
  color: orange; 
}
```

5-3) :first-of-type(:last-of-type)

type(태그)들 중에 첫번째
```
<body>
  <section> 
    <div>Toy Story</div> 
    <p>Zootopoa</p> 
    <p>Inside Out</p> 
    <p>Finding Nemo</p> 
    <div>Coco</div> 
  </section>
</body>
```
:first-child를 이용하면 style 적용이 불가
- p 태그의 형제 태그 중 첫번째를 선택
- 첫번째 형제가 div 태그(p 태그가 아님)

5-4) :nth-of-type()

숫자외에, 2n등과 같이 함수형으로 사용 가능
p:nth-of-type(odd){ color:blue; }

5-5) not

selector:not(selector){} : 콜론 앞의 selecotr를 선택하고, 괄호안의 selector를 제외한 나머지를 선택

5-6) hover, active, focus

hover : 마우스를 올려놓고 있을때
active: 마우스를 클릭하고 있을때부터 떼는 시점
focus : 키보드로 tap키를 눌러 요소를 선택한 경우 or input 태그를 입력을 위해 클릭한 경우

<style>
    input[type=button]{
        background-color: skyblue;
        border: none;
    }
    input[type=button]:hover{
        background-color: teal;
        color: white;
    }
    input[type=button]:active{
        background-color:red;
    }
    input[type=button]:focus{
        background-color: blue;
    }
    input[type=text]:focus{
        background-color: blue
    }
</style>
<body>
    <input type="button" value="클릭">
    <input type="button" value="클릭">
    <input type="button" value="클릭">
    <input type="button" value="클릭">
    <input type="text">
</body>

6. 가상 요소 선택자 (selector::__)

실제로 존재하지 않는 요소, 범위를 만들어 스타일을 부여함

반드시 content 프로퍼티를 추가해주어야 함

6-1) before(after)

<style>
    .movie::before{
        content: 'Movie';
        color: indianred;
    }
</style>
<body>
    <div class="movie">ToyStory</div>
    <div class="movie">Zootopia</div>
    <div class="movie">InsideOut</div>
    <div class="movie">Coco</div>
    <div class="movie">Finding Nemo</div>
</body>

가상의 요소에 style이 적용됨
class가 movie인 요소들에는 적용되지 않음

존재하지 않는 요소인 ::before가 생성됨
content를 가지고 있지만 내용이 의미가 있지 않음 : 꾸밈을 위한 요소라고 여겨짐
메뉴 사이에 구분 bar를 추가할 때 사용

6-2) first-letter

  <style>
    .lorem::first-letter {
      color: red;
    }
    .lorem::before{
        content: 'BEFORE';
    }
  </style>
  <body>
    <p class="lorem">Lorem ipsum dolor sit amet consectetur, sequi.</p>
    <p class="lorem">Lorem ipsum dolor sit amet consectetur, sequi.</p>
    <p class="lorem">Lorem ipsum dolor sit amet consectetur, sequi.</p>
  </body>

first-letter를 before 가상요소 선택자와 함께 사용하면, before의 content에 style이 적용됨

7. 선택자 결합

7-1) 하위선택자 : spacing

<body>
    <ul>
        <li>리스트1</li>
        <li>리스트2</li>
        <li>리스트3</li>
        <li>리스트4</li>
    </ul>
</body>

ul태그의 li태그를 선택하고 싶을때는 spacing
ul li {style 속성}

7-2) 자식선택자 : >

<body>
    <ul>
        <li>리스트1</li>
            <ol>
                <li>리스트1</li>
                <li>리스트2</li>
            </ol>
        <li>리스트2</li>
        <li>리스트3</li>
        <li>리스트4</li>
    </ul>
</body>

바로 밑의 하위 자식만 선택하고 싶은 경우에 사용
ul > li

7-3) 일반 형제 선택자 : ~

형제 요소가 특정 요소 뒤에 있을때 선택가능

<body>
    <div>
        <p>P</p>
        <span>Span</span>
        <code>Code</code>
        <p>P2</p>
        <div>Div</div>
    </div>
</body>

code의 형제는 총 5개 : p, span, code, p, div
형제는 코드 앞뒤로 2개씩 있음 : 선택된 형제를 기준으로 뒤에 있는 형제만 선택 가능(p, div)
- 앞에 있는 p나 span태그는 선택 불가!
```
<style>
code ~ p{
    color:red;
}
</style>
```

7-4) 인접 형제 선택자 : +

<body>
    <div>
        <p>P</p>
        <span>Span</span>
        <code>Code</code>
        <p>P2</p>
        <div>Div</div>
    </div>
</body>

선택된 요소의 바로 뒤에 인접한 요소만 선택이 가능

code + div를 하게 되면 style 속성 부여 불가

<style>
    code + p{
        background-color: blue;
    }
</style>

'Dev-log > CSS' 카테고리의 다른 글

CSS 레이아웃2(flex, grid) (0)	2024.04.10
CSS 요소 변화(transform, transition, 애니메이션) (0)	2024.04.10
CSS 레이아웃 (0)	2024.04.09
CSS Box Model (0)	2024.04.08
CSS 상속&속성 (0)	2024.04.07

jerry