📌 고정 게시글

📢 공지합니다

이 게시글은 메인 페이지에 항상 고정되어 표시됩니다.
개발왕 승호 2025.05.09

최코딩의 개발

CSS 기초편(4) 본문

HTML,CSS,JS

CSS 기초편(4)

seung_ho_choi.s 2023. 5. 17. 14:51
728x90

개요: 필자가 클론코딩을 공부하면서 정리하는 게시물이다. 

 

 

Transition

- 어떤 상태에서 다른 상태로 가는 변화를 애니메이션화 한 것이다.

- state에 따라 바뀌는 property를 갖고 있는 사용된다. 

- box, element를 변형시키지 않는다. 

- margin, padding 적용안된다. 일종의 3D transformation이기 때문이다.

 a {
        color: wheat;
        background-color: tomato;
        text-decoration: none;
        padding: 3px, 5px;
        border-radius: 5px;
        font-size: 50px;
        transition: background-color 10s ease-in-out, color 5s ease-in-out;
      }
      a:hover {
        color: tomato;
        background-color: wheat;
      }
    </style>
  </head>
  <body>
    <a href="#">Go home</a>

Go home을 커서를 올릴때 배경색은 10초, 글자색은 5초에 바뀐다. 이것은 직접확인하자 보여줄 수 있는 방법이 없다... 

transition: all 5s ease-in-out;

커서를 올리고 내릴때 5초 동안 바뀐다. 

transition은 무조건 element에 있어야 한다. 

나눠서 쓰고 싶으면 , 필수

 

https://matthewlein.com/tools/ceaser 

사이트 들어가서  에니메이션 취향을 볼 수 있다. (4.1 참고)

 

 img {
        border: 5px solid black;
        border-radius: 50%;
        transform: rotateY(33deg);
      }

rotateY(90deg)하면 일자가 되기때문에 안보인다. 즉 3D까지 할 수 있다. 

현재 상태!!

 transform: rotateX(70deg) rotateY(30deg) rotateZ(30deg);

이렇게 된다 ㅋㅋ 

 

transform: scale(1,1,1);
transform: translate(10px);

다음과 같이 첫번째는 크기를 키울 수 있고 

두번째는 ??px만큼 이동시킬 수 있다. 

transform: skew(45deg);

45도만큼 비스듬하게 기울일 수 있다. 

 

  img {
        border: 5px solid black;
        border-radius: 50%;
        transition: all 10s ease-in-out;
      }
      img:hover {
        transform: rotatez(90deg);
      }

저렇게 작성할 시 사진이 z축에 맞게 돌아간다. 

 

구글에 transform mdn 치면 여러 효과들을 복사할 수 있다. 참고 하자!

 

@keyframes super{
        from{
          transform: : rotateX(0);
        }
        to{
          transform: rotateX(360deg);
        }
 
img {
        border: 5px solid black;
        border-radius: 50%;
        animation: super 5s ease-in-out;
      }

마우스 커서를 안올리고 그냥 실행시킬고 싶을때는 다음과 같이 하면된다. 

 

  @keyframes super {
        0% {
          transform: rotatey(0);
        }
        25% {
          transform: scale(2);
        }
        50% {
          transform: rotateY(180deg) translateY(100px);
        }
        75% {
          transform: scale(2);
        }
        100% {
          transform: rotateY(0) translateY(0px);
        }
 img {
        border: 5px solid black;
        border-radius: 50%;
        width: 200px;
        transition: all 2s ease-in-out;
        animation: super 5s ease-in-out infinite;
      }

0% 에서 100%까지 설정을 해서 할 수 있고 img 부분에서 무한으로 설정할 수 있다. 

 

media qurey

@media screen and (min-width: 600px) and (max-width: 750px) {
        div {
          background-color: tomato;
        }
      }

스크린이 최솟값 600px보다 크거나  최댓값 750px 사이에 있을때

div 박스색을 tomato 색으로 바꾼다는 것이다. 

 

and (orientation: portrait)

세로 모드: Portrait(포트레이트) 모드
가로 모드: Landscape(랜드스케이프) 모드

 

 @media print {
        body {
          background-color: tomato;
        }

print 하면 body 색이 tomato 색으로 출력

 

 

6장 

 

아이콘 종류

https://heroicons.com/

 

Heroicons

Beautiful hand-crafted SVG icons, by the makers of Tailwind CSS.

heroicons.com

 

https://fontawesome.com/search

 

Font Awesome

The internet's icon library + toolkit. Used by millions of designers, devs, & content creators. Open-source. Always free. Always awesome.

fontawesome.com

 

폰트

https://fonts.google.com/

 

Google Fonts

Making the web more beautiful, fast, and open through great typography

fonts.google.com

#login-form input:not([type="submit"]){
    border-bottom:1px solid rgba(0,0,0,0.2);
    transition: border-color 0.3s ease-in-out;
}

#login-form input::placeholder{
    color:rgba(0,0,0,0.4);
}

#login-form input:focus{
 border-color: var(--yellow);
}
#login-form input[type="submit"]{
    background-color: var(--yellow);
    cursor: pointer;
   }

not과 curosr 그리고 

@import "reset.css";
@import "status-bar.css";
@import "variables.css";

import

 

nav>ul>li*4>a
<nav>
  <ul>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
  </ul>
</nav>

이렇게 된다. 단축키는 정말 유용하다. 

    box-sizing: border-box;

내가 padding을 줘도 신경쓰지말고 박스사이즈를 늘리지 말라는 의미이다. (6.12)

 

 

#chat-screen .status-bar{
    z-index: 2;
}
#chat-screen .alt-header{
    z-index: 1;
}

헤드 2개부분 고정시켜놓고 색칠칠하면 한쪽이 안뜨는데 레이어로 해결 가능 (6.29) chat.css

.reply__column:last-child >i{
    right:15px;
}

>는 direct 의미 흠 (6.33 참고)

 

@keyframes hideSplashScreen{
    from{
        opacity: 1;
    }
    to{
        opacity: 0;
        visibility:hidden;
    }
}

#splash-screen{
    background-color: var(--yellow);
    position: absolute;
    height: 100vh;
    width: 100vw;
    top:0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size:100px;
    animation: hideSplashScreen 1s ease-in-out forwards;
}

애니메이션 끝나고 유지

visibility:hidden;

이거는 끝나고 유지되는데 element요소가 아직있어서 아예 숨겨진다는 의미이다.

(6.35)

 

@keyframes appearBtnAnimation{
    from{
       
        opacity: 0;
    }
    to{
        opacity: 1;
        transform:none;
    }
}

.nav__btn{  
    transform: translateY(50px);
    opacity: 0;
    animation: appearBtnAnimation 3s ease-in-out forwards;
}
.nav__btn:nth-child(2){
    animation-delay: 0.5s;
}
.nav__btn:nth-child(3){
    animation-delay: 1s;
}
.nav__btn:last-child{
    animation-delay: 1.5s;
}

(6.36) forwards 써서 유지 시키기 

 

.open-post__heart-count i{
    will-change:transform;
    animation: heartBeat 1s ease-in-out infinite;
}

will 저거는 사용하면 그래픽카드를 가속에서 효율적으로 css에니메이션을 다룰수있다.

 

#no-mobile{
    position: absolute;
    z-index: 99;
    height: 100vh;
    background-color:var(--yellow);
    width:100vw;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 32px;
    top: 0;
}

@media screen and (max-width: 645px){
    #no-mobile{
        display: none;
    }
}

일정크기 화면 바꾸는법 media를 써서 (6.40)

728x90

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

JS 기초편(2)  (0) 2023.06.26
JS 기초편(1)  (0) 2023.06.25
CSS 기초편(3)  (2) 2023.05.16
CSS 기초편(2)  (0) 2023.05.09
CSS 기초편(1)  (2) 2023.05.09
'HTML,CSS,JS' Related Articles more