[CSS] 선택자, 우선순위, 상속, 기타 CSS 속성

« 2024/04 »
일	월	화	수	목	금	토
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30

[목차]

01. 선택자

💡

CSS를 이용해서 HTML의 어떤 요소를 꾸미려면 많은 요소들 중 어떤 요소를 꾸밀지 명확하게 지정해야 합니다. 스타일을 적용할 대상을 지정하는 용도!

1) 기본 선택자

➡️ 전체 선택자

👉🏻

스타일을 문서의 모든 요소에 적용할 때 사용

기호 : * (애스터리스크)

방법 : * { 속성 : 값; }

➡️ 태그 선택자(타입 선택자)

👉🏻

HTML의 태그 이름을 작성하고 css 속성과 값을 적어주는 방식

선택자를 작성하는 위치에 기호 없이 태그 이름만 명시

W3C 제공하는 선택자에 대한 설명에는 “타입 선택자(type selector)”라고 명시되어 있다.

➡️ 아이디 선택자

👉🏻

전역 속성 : 요소에 이름을 명시하려는 용도.

중복불가.

기호 : #아이디 이름

➡️ 클래스 선택자

👉🏻

전역 속성 : 요소에 이름을 명시하려는 용도.

중복가능.

기호 : .클래스이름

여러 이름을 가질 수 있다. (class = “black red” ➡️ black, red 클래스가 두개)

➡️ 그룹 선택자

👉🏻

여러 선택자가 같은 스타일 규칙을 사용하는 경우

쉼표(,)로 구분해서 여러 선택자를 나열하고 스타일 규칙을 한번만 작성한다.

[코드예제] 그룹 선택자

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="utf-8" />
        <title>CSS</title>

        <style>
            
            /* 그룹 선택자 */
            div, .red, #red {
                color: red;
            }

        </style>
    </head>
    <body>
        
        <span class="red">붉은색</span>
        <p id="red">붉은색</p>
        <p>검은색</p>
        <div>붉은색</div>

    </body>
</html>

💡

(1) 이름은 기억하기 쉽고 명확한 이름을 작성합니다. (2) 이름은 절대로 숫자 또는 특수 기호로 시작하면 안됩니다. (3) 클래스 이름은 소문자로 작성하며 단어 뒤에 다른 단어가 나오면 _(언더바) 또는 -(대쉬)로 구분합니다.

[코드예제] 기본 선택자

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="utf-8" />
        <title>CSS</title>

        <style>
            /* 전체 선택자
                기호 : *(애스터리스크)
            * {
                color: deeppink;
            } */

            /* 태그 선택자(타입 선택자)
            span {
                color: red;
            } */

            <!-- 클래스 선택자 -->
            .apple {
                color: deeppink;
            }
            .food {
                font-size: 40px;
            }
            .food.japanese-food {
                color: deeppink;
                text-decoration: underline;
            }

						<!-- 아이디 선택자 -->
            #apple {
                color: gold;
            }

        </style>
    </head>
    <body>
        <ul>
            <li class="apple">사과</li>
            <li>딸기</li>
            <li>블루베리</li>
        </ul>

        <p id="apple">사과</p>
        <span class="apple">사과</span>

        <span class="food">비빔밥</span>

				<!-- 클래스 두개 -->
        <span class="food japanese-food">초밥</span>

    </body>
</html>

[코드예제] 기본 선택자 실습

[html.html]

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="utf-8" />
        <title>기본 선택자</title>
        <link rel="stylesheet" href="./css/main.css" />
    </head>
    <body>
        <!-- 태그 선택자, 클래스 선택자, 아이디 선택자
        색상 변경, 텍스트 정렬, 밑줄 -->

        <div>태그 선택자</div>

        <span>태그 선택자</span>

        <div class="main_div">
            <h1 class="class_selector">클래스 선택자</h1>
            <h1 class="class_selector special">클래스 선택자</h1>
            <button id="id_selector">아이디 선택자</button>
            <p class="class_selector">클래스 중복 가능</p>
        </div>

    </body>
</html>

[main.css]

@import url("./sub.css");

span {
    color: blueviolet;
    text-decoration: underline;
    background-color: aqua;
}

.main_div {
    background-color: antiquewhite;
    text-align: center;
}

.class_selector.special {
    color: blue;
}

.class_selector {
    color: deeppink;
}

#id_selector {
    font-size: 50px;
    width: 500px;
    height: 500px;
    border-color: red;
    background-color: aqua;
}

2) 복합 선택자

👉🏻

복합 선택자는 기본 선택자를 조합해서 사용합니다.

➡️ 일치선택자

👉🏻

두 개의 선택자(태그, 클래스, 아이디 선택자)를 붙여서 사용하며 동시에 만족하는 요소를 선택합니다.

사용 시 태그 선택자와 클래스/아이디 선택자의 위치를 바꿔서 작성하면 찾을 수 없다.

태그 선택자를 먼저 작성하는 것이 좋다.

➡️ 자식 선택자

👉🏻

어떤 요소의 자식 요소를 선택합니다.

기호 : > (앵글 브레킷, 꺽쇠 괄호)

➡️ 하위(후손) 선택자

👉🏻

어떤 요소의 하위 요소를 선택합니다.

기호 : 스페이스바(”공백 문자”)
- 띄어쓰기도 하나의 특수 기호 = 공백 문자

➡️ 인접 형제 선택자

👉🏻

어떤 선택자의 다음 형제 요소 하나만 선택합니다.

기호 : +

➡️ 일반 형제 선택자

👉🏻

어떤 선택자의 다음 형제 요소를 전부 선택합니다.

기호 : ~ (틸드 Tilde)

[코드예제] 복합 선택자

[html.html]

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="utf-8" />
        <title>복합 선택자</title>
        <link rel="stylesheet" href="./css/main.css" />
    </head>
    <body>
        <div>
            <ul>
                <li>수박</li>
                <li class="peach">복숭아</li>
                <li>사과</li>
                <li>딸기</li>
                <li>망고스틴</li>
                <li>귤</li>
            </ul>
        </div>
        <span class="peach">복숭아</span>

        <ol>
            <li>JAVA</li>
            <li>HTML</li>
            <li>CSS</li>
            <ul>
                <li>Spring</li>
                <li>JS</li>
                <li>DBMS</li>
            </ul>
        </ol>

    </body>
</html>

[main.css]

/* 일치 선택자 */
span.peach {
    color: pink;
}

/* 자식 선택자 */
/* 
    요소 ul를 찾고 해당 요소의 자식 요소를 > 기호로 찾음
*/
ul > .peach {
    color: pink;
}

/* 하위 선택자 */
div .peach {
    color: mediumaquamarine;
    text-decoration: underline;
}

/* 인접 형제 선택자 */
.peach + li {
    color: darkgrey;
}

/* 일반 형제 선택자 */
.peach ~ li {
    color: orange;
    font-weight: bold;
}

/* ---------------------------------- */

/* ol tag의 자식 선택자 */
ol > li {
    color: forestgreen;
    font-weight: bold;
}

/* ol tag의 모든 하위 선택자 */
ol li {
    color: red;
}

3) 가상 클래스 선택자

👉🏻

우리가 어떤 행동을 했을 때 동작하는 개념입니다.

표기법 ➡️ 선택자:가상클래스

종류

동작을 나타내는 가상 클래스 선택자

hover
👉🏻
특정 요소에 마우스 포인터를 올리면 동작합니다.

active
👉🏻
특정 요소에 마우스를 클릭하는 동안 동작합니다.

focus
👉🏻
어떤 요소에 포커스 되면 동작합니다.
- 포커스가 가능한 요소는 HTML의 대화형 콘텐츠(input, a, button 등)이다.
- 대화형 콘텐츠 : 사용자와 상호작용을 위해 설계된 요소이다.

[코드예제] 동작

[html.html]

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="utf-8" />
        <title>title</title>
        <link rel="stylesheet" href="./css/sub.css" />
    </head>
    <body>
        <input type="text">

        
        <div class="box"></div>

        <div class="box-sub"></div>
    </body>
</html>

[sub.css]

input:focus {
    background-color: blue;
}

.box {
    width: 100px;
    height: 100px;
    background-color: blue;
}
.box:hover {
    width: 300px;
    background-color: blueviolet;
    transition: 2s;
}

.box-sub {
    width: 100px;
    height: 100px;
    background-color: chartreuse;
}

.box-sub:active {
    width: 300px;
    background-color: deeppink;
}

특정 요소를 선택하는 가상 클래스 선택자

🔥

요소가 많을 때 이름(id, class)을 붙이지 않고 스타일을 적용할 요소가 몇번째 인지 따져서 스타일을 적용할 수 있습니다.

first-child
👉🏻
어떤 선택자가 형제 요소 중 첫째인 경우 선택합니다.

last-child
👉🏻
어떤 선택자가 형제 요소 중 마지막인 경우 선택합니다.

nth-child(n)
👉🏻
어떤 선택자가 형제 요소 중 n번째이면 선택합니다. (홀수:oob, 짝수:even)

not(요소)
👉🏻
부정 선택자 : 괄호 안에 작성한 선택자가 아닌 요소를 선택합니다.

[코드예제] 선택

[html.html]

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="utf-8" />
        <title>title</title>
        <link rel="stylesheet" href="./css/sub.css" />
    </head>
    <body>

        <div class="address">
            <p>송천동</p>
            <p>중화산동</p>
            <span>덕진동</span>
            <div>호성동</div>
            <h3>우아동</h3>
            <h4>만성동</h4>
            <h5>효자동</h5>
        </div>

    </body>
</html>

[sub.css]

.address p:first-child {
    color: darkblue;
    font-weight: bold;
    text-decoration: underline;
}

.address h5:last-child {
    color: deeppink;
}

.address *:nth-child(even) {
    color: greenyellow;
}

.address *:nth-child(odd) {
    color: aqua;
}

.address *:not(p) {
    color: lawngreen;
}

4) 가상 요소 선택자

👉🏻

특별히 화면에 보이는 부분을 꾸밀 때 불필요한 태그를 사용하지 않도록 하기 위해 가상 요소 선택자를 사용합니다.

문서 안에 특정 부분에 대해 스타일을 지정하기 위해 가상으로 요소를 만들어 추가합니다.

표기법 ➡️ ::가상요소선택자 (1개 찍어도 동작하지만 웹표준에 어긋난다.)

종류

before
- 어떤 선택자 요소의 앞부분에 내용을 넣을 수 있다.

after
- 어떤 선택자 요소의 뒷부분에 내용을 넣을 수 있다.

👉🏻

필수 ➡️ content : “ ”; 내용을 비우더라도 필수로 작성해야합니다.

[코드예제] before, after + breadcrumb

[html.html]

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="utf-8" />
        <title>가상 요소 선택자</title>
        <link rel="stylesheet" href="./css/main-2.css"/>
    </head>
    <body>
        <div class="box">김재훈입니다.</div>

        <fieldset>
            <legend>라면 메뉴</legend>

            <ol>
                <li class="hot">진라면</li>
                <li>신라면</li>
                <li>열라면</li>
                <li>참깨라면</li>
                <li class="new">마라탕면</li>
            </ol>
        </fieldset>

        <fieldset>
            <legend>Breadcrumb</legend>
            <div class="breadcrumb">
                <a href="">HOME</a>
                <a href="">국민내일배움카드</a>
                <a href="">훈련과정</a>
                <a href="">정보마당</a>
            </div>
        </fieldset>
        

    </body>
</html>

[main-2.css]

.box::after {
    content: " 안녕하세요~!";
}

ol li.hot::after {
    content: "HOT";
    background-color: red;
    color: white;
    font-size: 13px;
    border-radius: 5px;
    padding: 0 5px;
    margin-left: 3px;
}

ol li.new::before {
    content: "NEW";
    background-color: yellowgreen;
    color: white;
    font-size: 13px;
    border-radius: 5px;
    padding: 0 5px;
    margin-right: 3px;
}

.breadcrumb a {
    text-decoration: none;
    color: black;
}

.breadcrumb a::after {
    content: ">";
    margin-left: 5px;
}
.breadcrumb a:last-child::after {
    content: "";
}

5) 속성 선택자
👉🏻
태그 안에서 사용하는 속성 값에 따라서 요소를 선택합니다.
- 특이한 속성을 가진 요소를 찾을 때 적합합니다.
- 하지만 일반적으로 가지는 속성을 기준으로 특정 요소를 찾을 때는 유용하지 않습니다.
- (1) 표기법 ➡️ [속성이름]
- (2) 표기법 ➡️ [속성 = “값”]
- [코드예제] 속성
  - [html.html]
    <!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8" /> <title>title</title> <link rel="stylesheet" href="./css/sub.css" /> </head> <body> <input type="text"> <input type="password"> <input type="text" value="id001" disabled> </body> </html>
  - [sub.css]
    [disabled] { color: chartreuse; } [type="password"] { color: crimson; }

02. 웹 브라우저에서 적용되는 스타일

💡

적용 우선 순위 사용자 ➡️ 제작자 ➡️ 자체

적용 스타일 예시
➡️ 브라우저 자체 색상 : 하얀색
➡️ 제작자 : 색상을 라이트 그레이
➡️ 사용자 : 눈이 아파서 다크 모드 실행

03. CSS 적용 우선 순위

💡

우선 순위란 어떤 스타일을 먼저 적용할 것인지 결정하는 규칙입니다.

점수

👉🏻

우선 순위를 높이려면 정확하게 해당 요소에 스타일을 적용하면 우선 순위가 높아집니다. 단, 스타일 규칙에 !important를 작성하면 그 스타일 규칙이 다른 스타일보다 우선 순위가 높아집니다.

!important : 1억점 그냥 높다

인라인 : 1천점

아이디 선택자 : 100점

클래스 선택자 : 10점

태그 선택자(타입 선택자) : 1점

[코드예제] 우선 순위

[html.html]

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="utf-8" />
        <title>css 스타일 적용 우선 순위</title>
        <link rel="stylesheet" href="./css/main.css" />
    </head>
    <body>
        <h1>적용 우선 순위 - 태그</h1>
        <h1 class="test">적용 우선 순위 - 클래스</h1>
        <h1 id="test" style="color: blueviolet;">적용 우선 순위 - 아이디</h1>
        <h1>적용 우선 순위 - 인라인</h1>
        <h1>적용 우선 순위 - !important</h1>
    </body>
</html>

[main.css]

/* 태그 선택자 */
h1 {
    color: deeppink !important;
}

/* 클래스 선택자 */
.test {
    color: brown;
}

/* 아이디 선택자 */
#test {
    color: blue;
}
/* 동일한 스타일은 나중에 작성한 스타일 규칙이 적용 */
#test {
    color: bisque;
}

04. 부모와 자식 관계

1) 부모, 자식
📎
<div> <h2></h2> <div> - div의 내용에 h2라는 요소가 들어있다
➡️ 바깥에 있는 요소를 “부모 요소”라고 하며 내부에 있는 요소를 “자식 요소”라고 한다.

2) 조상(상위), 후손(하위)
📎
<div> <h2> <span></span> </h2> <div>
➡️ div는 조상 요소(상위 요소)라고 부른다.
➡️ h2, span은 후손 요소(하위 요소)라고 부른다.

05. CSS 스타일 상속

💡

어떤 요소에 css를 적용했을 때 해당 요소의 자식 요소(하위요소)까지 영향을 미칩니다. 자식 요소에 스타일을 따로 지정하지 않으면 부모 요소의 스타일 속성이 자식 요소로 전달합니다.

상속이 가능한 속성 목록

➡️ 주로 글자, 문자 관련 속성들

ex) 글자 크기, 두께, 기울기, 폰트, 색상 등

➡️ 강제 상속 inherit

실제 상속할 수 없는 내용도 강제 상속 가능

[코드예제] 상속

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>title</title>
        <style>
            .box {
                background-color: aqua;
                width: 300px;
                height: 300px;
            }
            .item {
                width: 100px;
                background-color: blue;
                height: inherit;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div class="item"></div>
        </div>
    </body>
</html>

06. 기타 CSS 속성

1) overflow
💡
요소의 크기 이상으로 콘텐츠의 내용이 넘쳤을 경우 어떻게 화면에 보이게 만들지 제어합니다.
➡️ 값
- visible
  - 넘친 내용을 그대로 보여준다.
- hidden
  - 넘친 내용을 잘라낸다.
- scroll (사용x)
  - 넘친 내용을 자르고 스크롤 바를 생성한다.
- auto
  - 넘친 내용이 있는 경우에만 잘라내고 스크롤 바 생성한다.
- overflow-x / y
  - x축 또는 y축으로 스크롤 바 생성한다.
- [코드예제] overflow.css
```
.overflow {
    width: 400px;
    height: 200px;
    border: 2px solid red;
    /* overflow: hidden; */
    /* overflow: scroll; */
    overflow: auto;
}
```

2) opacity
💡
요소의 투명도를 지정합니다.
- 값
  - 1 : 불투명
  - 0~1 까지의 소수점 숫자

3) display
💡
요소의 배치 방법을 결정합니다. 표기법 ➡️ css 안에 display : block/inline/flex/grid
- 화면에 보여질 요소의 특성을 지정합니다.
- display속성 사용 시 블록 요소와 인라인 요소를 바꿔서 사용 가능합니다.
- 값
  - block : 인라인 > 블록
  - inline : 블록 > 인라인
  - inline-block
  - flex
  - grid

4) float
💡
왼쪽, 오른쪽으로 배치하는 속성!
- p태그는 불록요소이기 때문에 이미지와 함께 배치할 수 없다.

5) 글꼴, 문자
➡️ font-style
👉🏻
기울기 이텔리체 글자를 표시할 때 사용
- 값
  normal : 기울기 없음
  italic : 기울어진 글자
  oblique : 기울어진 글자
➡️ font-weight
👉🏻
두께
- 값
  normal : 기본 두께(400)
  bold : 두꺼운 글씨(700)
  100 ~ 900 까지 숫자를 작성.
➡️ font-size
👉🏻
글자 크기를 조절합니다. 브라우저의 기본 글자 크기(16px)
- 단위 : px, em, rem
➡️ line-height
👉🏻
줄 높이
- 값은 숫자를 작성(배수 사용을 권장. 유지보수 용이)
➡️ font-family
👉🏻
폰트(서체)를 지정합니다. 사용방법 ➡️ font-family : “글꼴1”, “글꼴2”, … , 글꼴 계열;
- 글꼴 후보를 쉼표로 구분해서 여러개 명시 가능
- 마지막 글꼴 계열은 필수 작성
  - 모든 후보를 사용 시도 후 사용 가능한 글꼴 후보가 없다면 글꼴계열에서 브라우저가 사용 가능한 폰트를 화면에 출력한다.
- 글꼴 계열 : serif(바탕체 계열), sans-serif(고딕체 계열) 등
➡️ text-align
👉🏻
문자의 정렬 방식입니다.
- 값
  left : 기본값
  right
  center
  justify : 양 쪽 정렬
➡️ text-decoration
👉🏻
문자 장식(선 추가) 속성입니다.
- 값
  none : 장식없음
  underline : 밑 줄
  line-through : 중앙선

6) 목록
➡️ list-style
- 값
  disc : 채워진 원
  circle : 빈 원 모양
  square : 채워진 사각형
  decimal : 1부터 시작하는 수
  none : 없음
  원하는 이모지, 텍스트를 작성하고 싶으면 쌍따옴표안에 작성

tag : #선택자 #우선순위 #부모 #자식 #조상 #하위 #상속 #CSS

Uploaded by N2T

[CSS] position, 요소 순서, transform, transition, flex, grid, 미디어쿼리 속성들 (0)	2023.04.16
[CSS] color, border, margin, padding, box-sizing, background 속성들 (0)	2023.04.16
[CSS] css 정의, 기초문법, 경로, 연결 방법 (0)	2023.04.16
[HTML] html 태그와 인라인, 블록, 인라인 블록 요소 (1)	2023.04.09
[HTML] 웹, html, 태그 요소와 속성 기초정리 (0)	2023.04.09

멋쟁이v의 개발일지

멋쟁이v의 개발일지