[TIL] CSS Break down (button, @screen)

1. So many Buttons,,,🤣

마우스 오버 시, 얘가 버튼이라고 확실히 느껴지는 버튼들을 실습해본다.

몰랐고 신기한 버튼들정도만 설명해보고, 직접 아래에서 눈으로 확인!!!

https://ssssssjay.github.io/Front-end-school/button-challenge.html

.c1:hover {
    transform: translateX(100px);
    transition-timing-function: ease; }
.c2:hover {
    transform: translateX(100px);
    transition-timing-function: linear; }
.c3:hover {
    background: darkgreen; }
.c4:hover {
    background: darkgreen;
    color: salmon; }
.c5:hover {
    transform: scale(1.4); }

.c5 : 우선 sclae, 머릿속에서 정리가 잘 안되었던 것 같다.
스케일은 확대, 축소이다! 즉 너비높이뿐 아니라, 글씨크기까지 확대되어 보인다!
(크기가 실제로 커진다라기 보다는 '돋보기로 본다'로 이해한다)

.c6:hover {
    width: 1000px;
    height: 270px;
}
.c7:hover {
    letter-spacing: 20px;
    width: 370px;
}
.c8:hover {
    /* overflow hidden 있는거 명심!!! */
    line-height: 400px;
}

.c8 : 줄 간격이 넓어진다. 즉 글씨를 기준으로 위아래에 공간이 생긴다. 이 때, 글씨는 부모밖으로 나가 버릴테고, 부모에 overflow: hidden;을 주어 넘쳐나는 애는 보여주지 않는다!!!

.c9:hover {
    opacity: 0.3;
}
.c10:hover {
    border-color:deepskyblue;
    border-width: 20px;
}
.c11:hover {
    transform: rotate(20deg);
}
.c12:hover {
    transform-origin: top;
    transform: rotate(20deg);

}
.c13:hover {
    transform-origin: right;
    transform: rotate(20deg);

}
.c14:hover {
    transform-origin: left;
    transform: rotate(20deg);
}
.c15:hover {
    transform-origin: bottom;
    transform: rotate(20deg);
}

여기서부터는 pseudo element를 활용하여 만드는 실무느낌의 버튼이다.

.c16::before {
    content: '';
    position: absolute;
    background-color: seagreen;
    /* 전체를 다 차지하게 만드는 방법!!!! */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    /* 이 값이 클수록 멀리서 날아오기에 오래걸린다 */
    transform: translateX(550px);
    transition: all 1s;
}
.c16:hover::before {
    transform: translateX(0px);  
    /* opacity: .4; */
}

원래의 시나리오는 배경이 밀고 들어오면서 글자는 보여야 하는데, 배경이 덮어버린다🥵
z-index를 활용하여 해결이 가능하다!!!(투명도를 주면 글자도 투명해져,,,)

.c16 {z-index: 1;) .c16::before {z-index: -1;}

이렇게 글자가 있는녀석은 앞으로 오게하고 배경만을 담당하는 녀석은 뒤로 보낸다!
한 녀석만 처리해주면 안된다!!!!!

.c17::before {
    content: '';
    position: absolute;
    background-color: white;
    width: 100%;
    height: 10px;
    left: 0;
    bottom: 0;
    transform: translateX(-550px);
    transition: all 1s;
}

.c17:hover::before {
    transform: translateX(0);
}

.c17::after {
    content: '';
    position: absolute;
    background-color: white;
    width: 100%;
    height: 10px;
    left: 0;
    bottom: 0;
    transform: translateX(550px);
    transition: all 1s;
}
.c17:hover::after {
    transform: translateX(0);
}

.c18::before {
    content: '';
    position: absolute;
    background-color: white;
    width: 100%;
    height: 10px;
    left: 0;
    bottom: 0;
    transform: translateX(-550px);
    transition: all 1s;
}

.c18:hover::before {
    transform: translateX(0);
}

.c18::after {
    content: '';
    position: absolute;
    background-color: white;
    width: 100%;
    height: 10px;
    right: 0;
    top: 0;
    transform: translateX(550px);
    transition: all 1s;
}

.c18:hover::after {
    transform: translateX(0);
}

17번과 18번의 가장 큰 차이점은, ::after의 포지션이다!!!
양 쪽으로 가상 클래스를 보내놓은것은 좋지만, 그 출발선이 같은게 문제다.
한 놈은 아래에서 왼쪽으로 출발시키고, 다른 놈은 위에서 오르쪽으로 출발시켜놓는다.

부모의 relative를 기준으로 자식들의 위치를 잡아줄 수 있다. absolute!

.c19::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: teal;
    transition: all 0.8s;
    transform: rotateX(90deg);
    z-index: -1;
}

.c19:hover::before {
    transform: rotateX(0);
}
.c19::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: teal;
    transition: all 0.8s;
    transform: rotateY(90deg);
    z-index: -1;
}
.c19:hover::after {
    transform: rotateY(0);
}
.c19:hover {
    /* z-index: 1; */
}
.c19 {
    z-index: 1;
}

.c20::after {
    content: '1';
}
.c20::after::after {
    content: '2';
}
.c20::after::after::after {
    content: '3';
}

.c21::before {
    position: absolute;
    content: '짜-자잔!';
    color: white;
    background: coral;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: translateY(-100%);
    transition: all .8s;
}
.c21:hover::before {
    transform: translateY(0);
}

.c19 : 요 녀석은 가상 요소를 원래 90도로 세워놓고 마우스 오버 시, 회전시켜주어서 효과를 주는 방법이다!!

2. media query - 반응형 웹😀

웹을 만날 수 있는 환경은 크게 세 가지정도가 있다.

PC - Tablet - Mobile

각 환경에 맞게 레이아웃을 짜야한다.
스마트폰에서 상하좌우로 스크롤하면서 쓰지는 않을테니!!

이 때, 쓸 수 있는게 @media (앳 미디어)이다.

body{background:black;}

@media screen and (min-width:481px) and (max-width:1280px){
  body{background:red;}
}

@media screen and (max-width:480px){ 
  body{background:green;}
}

아래에 반응형 웹 포스팅을 작성하였다.

https://velog.io/@jay__ss/Project-%EB%B0%98%EC%9D%91%ED%98%95-%EC%9B%B9

New!!!

• 자식요소가 부모요소만큼의 크기를 가지게 하는 방법

position: absolute;
top: 0; left: 0; right: 0; bottom:0;
/* or */
top: 0; left: 0; width: 100% height: 100%

• class="card item" = .card.item 잊지말자 선택자!!!

끝으로

오늘은 베를린에 계시는 이수진 개발자님의 특강을 들었다. 음악을 공부한 비전공자에서 PM을 거쳐 개발자가 되신 어마무시한 분이셨다😁 로드맵을 보고 '아 이런게 있구나'의 접근법이 아닌 주니어가 되기위해 소목적, 대목적을 설정하는 방법을 알려주셨다. 다음 단계로 가기 위해 내가 할 당장의 소목적을 잡아보았다.

Layout Practice - 눈 감고 짤 때까지