[ 국비교육 ] Day 34

지난 시간엔 데이터를 구조화하는 방식인 HTML에 배웠다. 어렵진 않지만, 최종 목표는 정적인 문서에 디자인과 동적인 기능들을 구현해야 한다.

따라서 오늘부터 시각적 요소를 구현하는 CSS에 대해서 배워보자.

HTML : 단순 Element의 구조적 나열
CSS : 나열된 Element의 LayOut 및 디자인

CSS

: Cascading Style Sheet

HTML 내부에서 속성, 값으로 디자인을 하는 건, 정말 필요한 상황이 아니고선 이젠 사용하지 않는 방식이다.
요즘은 CSS를 통해 디자인하는데, “Cascading”의 의미대로 CSS는 시트 설정에 따라 연속적으로 모든 요소를 한다.

1. 사용법

CSS를 사용하는 방법은 크게 3가지가 있다.

1) Inline Style Sheet : 속성

HTML 요소 내부에 속성으로 style 을 적용하는 방식으로 라인 안에 사용한다.
전체 방식 중 우선순위가 제일 높다.

<div style="border: 1px; border-color: black; border-style: solid;">
        
</div>

2) Internal Style Sheet : 요소

<head> 내부에 <style> 영역을 만들어서 스타일을 적용하는 방식

<head>
        #div1 {
            border: 1px solid coral;
        }
</head>

3) External Style Sheet : 파일

style 전용 CSS파일을 생성하여, 거기에 작성하고 HTML에서 import한다.
규모가 커질수록, 복잡해지고 가독성이 떨어지기 때문에 사용한다.

2. 식별자

: 선택을 해주는 요소

HTML 요소를 통해 문서의 구조를 만들어 낸다. 이렇게 만들어진 구조는 뼈대 자체로서 존재할 뿐, 미적인 요소와 체계는 분배되지 않았다. 따라서 우린 CSS를 통해 요소에 디자인을 부여한다.

이때, 수많은 요소 중 디자인을 부여할 대상을 고르는, 예를 들어 도배할 벽을 고르기 위해 사용되는 것이 바로 ‘Selector’이다. 그리 어려운 개념은 아니지만, 선택자의 종류가 굉장히 많기에 주의해야 한다.

[ 종류 ]

(1) Tag

해당 태그를 가진 모든 요소에 디자인이 적용된다.

div { border: 10px, solid, red; } div태그에 모두 적용

(2) #ID

id=“name” 라는 속성을 이용하여 식별된 요소들에 적용한다.
id의 이름은 웬만하면 중복되지 않는 것이 좋다.
디자인 시, ID로 영역을 나누고 클래스로 일괄적으로 디자인을 입힌다.
id는 ‘#’으로 시작한다.

#div1 { border: 1px solid coral; }
#div2 { border: 1px dotted darkgoldenrod; }

(3) .Class

class 속성은 식별자 개념이 아니라서 중복이 가능하다.
이를 이용할 경우, 같은 클래스를 가진 요소들에 스타인이 적용된다.
ID에 영향을 받지 않는다.
.클래스명 으로 사용한다.

1. 기본
.fruits{ background-color: pink; }

2. 같은 클래스, 다른 요소들에 사용할 때 
div.test {} "div 태그를 가진, test 클래스에게"


3. 전혀 다른 요소에 같은 스타일을 줄 때
div.test, button.test2{
         color: green;
     }

(4) 자손 선택자 (1촌) `>.`

자손은 자기 바로 밑에만을 칭한다.

#refrigerator>.fruits { background-color: aqua }

(5) 후손 선택자 (1촌 포함 전체)

자손을 포함한 더 아래까지를 칭한다.

#table .fruits {
        background-color: yellow;
    }

(6) 속성 : `tag ,ID, Class or null` + [속성과 그 값]

해당 속성, 속성과 값을 가진 요소들을 선택하며, tag, id, class를 통해 더 영역을 세부적으로 다룬다.

1. 기존
 input[type=button] {
            color: red;
        }

응용 1 : 속성값이 특정하게 시작할 때 ( ^= )
input[type^=te] {
            color: red;
        }


응용 2 : 속성값이 특정하게 끝날 때 ( $= )
input[type$=on] {
            color: blue;
        }


응용 3 : 속성값이 특정글자를 포함할 때 ( *= )
input[value*=tt] {
            color: blue;
        }

(7) 형제

형제는 동일 수준의 요소들을 칭하는 것이다.
단일(+) : 검색 기준 동격에서 ‘바로 뒤’를 선택하기 때문에 맨 앞에 오면 적용되지 않는다.
다중(~) : 시작을 기준으로 뒤에 오는 요소들을 모두 선택한다.

예제
<div>
  <h4>자손 1</h4>
  <h5>자손 2</h5>
  <p>자손 3</p>
  <p>자손 4</p>
  <p>자손 5</p>
</div>

1. 단일 
h4+h5{} → 자손 2 선택

2. 다중 
h4~p{ color: red; }
→ 자손 3, 4, 5 선택

(8) 반응 선택자

div:hover : 마우스를 올렸을 때.
div:active : 클릭을 하고 있는 동안에

(8) 구조선택자 : -child / -of-typle

그냥 -child 가 있고, of-type가 있다.
-child : 대상 태그와 n번째가 일치할 때만 적용
of-child : 대상 태그 중에서 n번째

1. first, last, nth()
div p:first-child{
            color: pink;
        }
→ div 태그의 첫 번째 요소가 p일 때만 적용

2. first, last, nth() -of-type
div p:nth-of-type(3){
            color: green;
        }
→ div 태그 안에 3번째 p에 적용


p:first-of-type(1){
            color: green;
        }
→ 첫 번째 p에 적용

(9) 전체 선택자

모든 요소를 선택한다.
추가로, 우선순위가 가장 낮다.
우선순위는 대상이 좁아질수록, 같은 동격이면 나중에 사용할수록 높게 적용된다.
!important 을 사용 시, 제일 높은 우선 순위를 가진다.

*{ color: cornflowerblue; }

Author And Source

이 문제에 관하여([ 국비교육 ] Day 34), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@ho_c/국비교육-Day-34

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)