[CSS] Combinators, Attribute, Colors and Variables

Nino_ 2022. 7. 11. 01:19

# Recap - Selectors, Pseudo elements, Combinators

::placeholder
-> placeholder를 스타일링하고 싶을 때 사용

::selection
-> 대상을 드래그했을 때 결과 적용

::first-letter    /   ::first-line
-> 첫 번째 글자 / 첫 번째 줄    에 효과 적용

:hover
:active
:focus
:visited
:focus-within   -> focus 상태인 자식을 가진 부모 엘리먼트에 적용

Combinators
p span   부모 자식
p > span 부모 자식 (바로 밑)
p + span 형제 관계 (바로 뒤)
p ~ span 형제 관계

Attribute 작성
    input[type="password"]
    -> password 라는 type을 가진 input만 선택

    type~="password"
    -> 포함하는 input

    type$  /  type^
    -> 끝에 오는 경우는 $, 처음에 오는 경우는 ^

<!DOCTYPE html>
<html>
    <head>
        <title>Sign Up</title>
        <style>
            body {
                height: 100vh;
                margin: 50px;
            }
            input::placeholder {
                color: red;
            }
            p::first-letter {
                background-color: yellow;
                color: blueviolet;
                font-size:x-large;
            }
        </style>
    </head>
    <body>
        <form>
            <input type="text" placeholder="name" />
        </form>
        <p>
            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dolore architecto ut quibusdam culpa eligendi reiciendis est incidunt quo necessitatibus veritatis maiores quos error eum facere veniam temporibus vel, aut ea.
        </p>
    </body>
</html>

# Colors and Variables

CSS에서 알아야 할 컬러 시스템
    1) hexadecimal color (16진수 컬러)
        ex. #FFF
    2) RGB
        ex. rgb(250, 0, 0)
    3) RGBA  -> a(알파)는 투명도를 나타냄
        ex. rgba(0, 0, 0, 0.8)

#memo

크롬 익스텐션: color picker

[Custom Property]
:root 모든 요소의 기초가 되는 것
var = variables (변수)
    :root { --main-color: fffff};
    a {color: var(--main-color)};

변수는 아래와 같이 지어야 함
    dash 2개 dash 1개 변수 이름
    빈 공간(띄어쓰기)이 있으면 안됨
    --main-color

<!DOCTYPE html>
<html>
    <head>
        <title>Sign Up</title>
        <style>
            :root {
                --main-color: #ff0000;
                --default-border: 1px solid var(--main-color);
            }
            body {
                height: 100vh;
                margin: 50px;
            }
            p {
                background-color: var(--main-color);
            }
            a {
                color: var(--main-color);
                border: var(--default-border);
            }
        </style>
    </head>
    <body>
        <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Est dolor quod dignissimos repellendus? At cum culpa fugiat unde ullam quam maxime beatae? Pariatur omnis quidem doloremque autem illum, delectus aliquid.
        </p>
        <div>
            <a href="#">webbbbbb</a>
        </div>
    </body>
</html>

'Web > HTML, CSS' 카테고리의 다른 글

[CSS] 단축키, BEM, 아이콘 추가, 폰트 변경 (0)	2022.07.12
[CSS] Transition, Transformation, Animation (0)	2022.07.11
[CSS] fixed ~ pseudo selectors (0)	2022.07.08
[CSS] Inlines ~ Flexbox 복습 (0)	2022.07.06
[CSS] css 적용법, selector, 적용 순서 (0)	2022.07.05

Nino's DevLog