[WED] 2021-11-10 TIL

MINBOK·2021년 11월 10일

frontend

멋쟁이사자처럼

목록 보기

3/19

오늘은 mediaquery, button, perspective에 대해서 배웠다.
졸업과제하면서 미디어쿼리가 가장 어려웠기때문에,
미디어쿼리 부분에 가장 관심이 많았는데
간단하게 가르쳐주셔서 좀 아쉬웠다😥

진도 못 따라간 부분을 혼자서 공부하고 있는데,
내가 공부하는 속도보다 매일 진도 나가는 속도가 더 빠르다😅

아 이건 오늘 만든 버튼이다.
짧은 시간동안 만든거 치고는 예쁘게 만들어진거같다.
주말에 시간이 생기면 더 예쁘게 만들어봐야지 룰루✨

✨ 코드는 여기!

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>button</title>
    <style>
        .btn {
            border: 4px solid palevioletred;
            border-radius: 50%;
            padding: 20px 52px;
            background: none;
            color: palevioletred;
            font-size: 20px;
            position: relative;
            overflow: hidden;
            cursor: pointer;
            transition: all .5s;
            margin-left: 80px;
            width: 200px;
            height: 200px;
        }

        @keyframes wave {
            from {
                transform: rotate(0deg); 
            }
            to {
                transform: rotate(360deg);
            }
        }

        .inside {
            position: absolute;
            width: 300px;
            height: 300px;
            background: turquoise;
            opacity: 0.4;
            border-radius: 45%;
            top: 0;
            left: -100px;
            margin-top: 200px;
            transform: translateY(0);
            transition-duration: 5s;
            transition-timing-function: ease;
        }

        .btn:hover .inside {
            margin-top: 80px;
            animation: wave 8s;
        }

        .inside2 {
            position: absolute;
            width: 300px;
            height: 300px;
            background: violet;
            opacity: 0.4;
            border-radius: 45%;
            top: 0;
            left: 0px;
            margin-top: 200px;
            transform: translateY(0);
            transition-duration: 5s;
            transition-property: margin-top;
            transition-timing-function: ease;
        }

        .btn:hover .inside2 {
            margin-top: 80px;
            animation: wave 10s;
        }

    </style>
</head>

<body>
<div class="wrap">
        <button class="btn">Click Me!
            <div class="inside"></div>
            <div class="inside2"></div>
        </button>
</div>
</body>

</html>

CSS

🔷 reset CSS

수업을 통해 reset CSS라는 것을 알게되었다.
기본 스타일을 초기화시켜서 디자인을 쉽게할 수있도록하는
역할을 한다고 한다.

✨reset css 링크 https://meyerweb.com/eric/tools/css/reset/

🔷 CSS selector - 복합 선택자

하위 선택자 (공백)
: 앞 요소의 자손(모든 하위요소)을 선택함
```
section p {
  text-shadow: none;
}
```

자식 선택자 (>)
: 앞 요소의 자식(바로 아래 하위요소)을 선택함
```
section > p {
   text-shadow: none;
}
```

인접 형제 선택자 (+)
: 앞 요소 직후의 뒷 요소
```
h1 + p {
  color: red;
}
```

일반 형제 선택자 (~)
: 앞 요소 뒤 모든 뒷 요소
```
h1 ~ p {
  color: red;
}
```

🔷 CSS selector - 속성 선택자

a[href]
: a태그 중 href를 속성이름으로 가진 모든 요소를 선택함

div[class="red"]
: div 태그 중 class명이 red인 요소를 선택
(클래스 요소가 red 하나뿐인것 / red-cat, red apple 등 안됌)

div[class~="red"]
: div 태그 중 class명에 red가 있는 요소를 선택
( 공백허용 ⁖ red cat(O) / redcat (X) )

div[class~="red"]
: div 태그 중 class명에 red가 포함된 모든 요소를 선택

a[href^="https"]
: a태그 중 href이 https로 시작하는 요소

div[class$="pink"]
: div태그 중 class명이 pink로 끝나는 요소

a[href|="http"]
: a태그 중 href이 http이거나 http로 시작하는 요소
(독립된 값이거나, 하이픈(-)만 허용됌 )

🔷 가상 클래스 선택자

:hover
.wrap:first-child : class="wrap"의 첫번째 자식
.wrap:last-child : class="wrap"의 마지막 자식
.wrap:nth-child(n) : n번째 자식
.foo:nth-child(odd) : 홀수번째 자식 (even이면 짝수번째 자식)

🔷 가상 요소 선택자

::before
::after

MINBOK

이전 포스트

[TUE] 2021-11-09 TIL

다음 포스트