[코코아톡 클론] 3.17~4.6필기

yejin·2021년 1월 11일
0

[코코아톡 클론] html-css

목록 보기
5/9
post-thumbnail

States

button효과

button:active : 클릭하면 색이바뀜
button:hover : 클릭x 마우스를 버튼위로 갔다대면 색이 바뀜
button:focus : 키보드로 눌러서 선택했을때 색이 바뀜

참고) button에서 뭔가 하나를 바꾸면 지정되어있던 border속성을 잃어버려
디폴트 스타일을 바꾸면 처음부터 다시 스타일 해야함.
button말고 input:Focus 이렇게도 가능.

예시

<head>
    <style>
      button:active {
        background-color: purple;
      }
    </style>
  </head>

  <body>
    <div>
      <button>hello</button>
    </div>
  </body>

결과
hello라는 버튼을 눌렀을때 보라색으로 변함

링크 눌러서 방문한 상태일 때 글자 색 바꾸기

우리 어떤 링크 파란색인데 거기 눌러서 방문하고 다시 되돌아와보면 링크가
보라색으로 바껴있는거 다들 경험해봤지? 그거야.

<head>
    <style>
      a:visited {
        color: purple;
      }
    </style>
  </head>

  <body>
    <a href="https://naver.com">naver gogo~</a>
  </body>

결과

  • 전
  • 후

입력칸을 focuse하면 border색 변화주기

focus-within : focused인 자식을 가진 부모 엘리먼트에 적용.

<head>
    <style>
      form {
        border: 1px solid steelblue;
        display: flex;
        flex-direction: column;
        padding: 20px;
      }
      /* body의 input들 중 하나가 focused가 되면 form의
      모습을 바꾼다 */
      /* within은 안쪽이라는 뜻 */
      form:focus-within {
        border-color: tomato;
      }
    </style>
  </head>

  <body>
    <form>
      <input type="text" />
      <input type="text" />
      <input type="text" />
    </form>
  </body>

결과

  • 전
  • 후

입력란 바깥을 선택하면 다시 파란색으로 돌아옴!



state를 다른 엘리먼트와 연계해서 사용가능

예시)form이 hover상태일때 input배경이 바뀌기

      form:hover input {
        background-color: wheat;
      }

결과

예시2)form이 hover가 된 상태에서 input이 focused이면 바뀌게하기

      form:hover input:focus {
        background-color: wheat;
      }

결과
마우스가 form위에 있지만 input이 focused상태가 아니면 배경색상 효과 적용이 안됨

CSS 지금까지배운거 복습

복습전,
Pseudo element 3개
: 이것들은 실제로 존재하는 elemet는 아니지만 스타일링을 할 수 있게 해줌

::placeholder

placeholder만 색상 변경

    <style>
      input::placeholder {
        color: chartreuse;
      }
    </style>
  </head>

  <body>
    <form>
      <input type="text" placeholder="Name" />
    </form>
  </body>

결과

다만, 글자 입력하면 글자는 그대로 black

글자가 색상 있게 하고싶으면

    <style>
      input {
        color: chartreuse;
      }
    </style>

다만, 얘는 placeholder는 baclk임.

selection

<head>
    <style>
      p::selection {
        background-color: goldenrod;
        color: wheat;
      }
    </style>
  </head>

  <body>
    <p>
      자고싶다자고싶다자고싶다자고싶다자고싶다자고싶다자고싶다자고싶다자고싶다
      자고싶다자고싶다자고싶다자고싶다자고싶다자고싶다자고싶다자고싶다자고싶다
    </p>
  </body>

결과

::first-letter

첫번째 글자만 크기 키우는 효과

      p::first-letter {
        font-size: 50px;
      }

결과

::first-line

첫째줄만 크기 키우는거

Colors and Variables

변수 : 값을 저장할 수 있게 해줌. 나중에 사용 가능

컬러 시스템

  • # color : #FCCE00;

  • RGB color : rgb(252,206,0);
    rgba (여기서 a는 투명도를 나타내) color : rgba(252,206,0,0.5)
    0.5 : 50%투명도 1 : 100%투명도

  • root
    변수 이름은 --변수이름 이렇게 지어줘야함.
    빈 공간이 있따면 dash(-)로 채워줘야함. 빈공간이 있으면 안됨.
    ex) --mian color (x) --main-color (o)

<head>
    <style>
      /* root에 컬러값을 변수로 저장하면 앞으로 컬러값 수정 한 번만 하면 됨 */
      :root {
        --main-color: #fcce00;
      }
      p {
        background-color: var(--main-color);
      }
      a {
        color: var(--main-color);
      }
    </style>
  </head>

  <body>
    <p>
      자고싶다자고싶다자고싶다자고싶다자고싶다자고싶다자고싶다자고싶다자고싶다
      자고싶다자고싶다자고싶다자고싶다자고싶다자고싶다자고싶다자고싶다자고싶다
    </p>
    <a href="#">website</a>
  </body>

컬러만 저장 할 수 있는게 아니야!

    <style>
      :root {
        --main-color: #fcce00;
        --default-border: 1px solid var(--main-color);
      }
      p {
        background-color: var(--main-color);
      }
      a {
        color: var(--main-color);
        border: var(--default-border);
      }
    </style>
  </head>

  <body>
    <p>
      자고싶다자고싶다자고싶다자고싶다자고싶다자고싶다자고싶다자고싶다자고싶다
      자고싶다자고싶다자고싶다자고싶다자고싶다자고싶다자고싶다자고싶다자고싶다
    </p>
    <a href="#">website</a>
  </body>

결과

4.0

Transitions

transition속성은 state가 없는 요소에 붙어야함

<head>
    <style>
      a {
        color: wheat;
        background-color: tomato;
        text-decoration: none;
        padding: 3px, 5px;
        border-radius: 5px;
        font-size: 55px;
        /* 배경 바뀌는 효과 6초, 글씨 색 바뀌는 효과 6초 */
        transition: background-color 6s ease-in-out, color 6s ease-in-out;
      /* trasition: all 5s ease-in-out; */

      }
      a:hover {
        color:tomato;
        background-color: wheat;
      }
    </style>
  </head>

  <body>
    <a href="#">Go home</a>
  </body>

결과

transition은 가장 처음 생겨난곳 element에 있어야함 state에 있으면 안됨


a:hover에 border-radius효과 추가
효과 모두 1초로 변경

결과

Transitions part Two

linear : 같은 속도로 좌우 직선으로 움직임
ease-in : 시작점에서보다 빨라지면서 움직임 (끝으로 갈수록 빨라짐)
ease-out : 끝에서 느려짐
ease-in-out : 처음엔 느리게 시작했다가 가속하고 느리게 끝남
cubic-bezier : 내 취향에 맞게 애니메이션 가능
ex) cubic-bezier(0.600, 0, 0.735, 0.045)

효과 더 보기

저 효과들 꼭 hover에서만 작동하는게 아니라 active, focus, focus-within에서도 다 작동 가능함



Transformations

ratate Y,X,Z : 360도 회전시키는거 ex) transform: ratateY (80deg);
scale Y,X... : 사진 키우기 ex) transform: scale (2, 2);
translate : 사진 위치 옮기기 ex) transform: translateX (300px);
등등...여러가지 있음

</head>
    <style>
      img {
        border: 5px solid orange;
        /* radius를 50%로 주면 원이됨 */
        border-radius: 50%;
        transform: rotateY(80deg);
      }
    </style>
  </head>

  <body>
    <img src="img/27.png" alt="왜안뜨냐" />
  </body>

결과

transformation은

  • margin, padding이 적용되지 않음. => 일종의 3D transformation이기때문.
  • 다른 box element, 이미지에 영향을 끼치지 않아.

<head>
    <style>
      img {
        border: 5px solid orange;
        border-radius: 50%;
        transition: transform 1s ease-in-out;
      }

      img:hover {
        transform: rotateZ(360deg) scale(0.5);
      }
    </style>
  </head>

  <body>
    <img src="img/27.png" alt="왜안뜨냐" />
  </body>

결과

더 많은 효과들은 transform MDN에서 확인해


Animations part One

마우스를 올려놓거나 transition없이 재생되는 애니메이션을 얻고 싶으면 어떻게 할까?

    <style>
      @keyframes yejingood {
        /* 0부터 360도까지 회전 */
        from {
          transform: rotateX(0);
        }
        to {
          transform: rotateX(360deg);
        }
      }
      img {
        border: 5px solid orange;
        border-radius: 50%;
        animation: yejingood 4s ease-in-out;
      }
    </style>
  </head>

  <body>
    <img src="img/27.png" alt="왜안뜨냐" />
  </body>

결과

무한재생 하고싶을 때
animation: yejingood 4s ease-in-out infinite;



<head>
    <style>
      @keyframes yejingood {
        from {
          transform: rotateY(0);
        }
        to {
          transform: rotateY(180deg) translateX(-100px);
        }
      }
      img {
        border: 5px solid orange;
        border-radius: 50%;
        animation: yejingood 4s ease-in-out infinite;
      }
    </style>
  </head>

  <body>
    <img src="img/27.png" alt="왜안뜨냐" />
  </body>

결과

근데 이렇게 하면 효과 다 주고나서 다시 원래대로 위치 돌아올때 뚝 끊겨서 돌아오잖아 나는 돌아올때도 자연스럽게 하고싶어!
~그건 다음시간에~


Animations part Two

효과 끝나고 다시 돌아올때도 자연스럽게 애니메이션 효과 주면서 돌아오기
위치 가운데로 옮김

<head>
    <style>
      body {
        display: flex;
        height: 100vh;
        align-items: center;
        justify-content: center;
      }
      @keyframes yejingood {
        0% {
          transform: rotateY(0);
        }
        50% {
          transform: rotateY(180deg) translateX(-100px);
        }
        100% {
          transform: rotateY(0) translateX(0px);
        }
      }
      img {
        border: 5px solid orange;
        border-radius: 50%;
        animation: yejingood 4s ease-in-out infinite;
        width: 200px;
      }
    </style>
  </head>

  <body>
    <img src="img/27.png" alt="왜안뜨냐" />
  </body>

결과

0,50,100% 뿐만 아니라 25,75%도 가능.


Media Queries

media query : 오직 css만을 이용해서 스크린의 사이즈를 알 수 있는 방법
네 웹사이트를 보고 있는 사용자의 스크린 사이즈 말이야.

야야 핸드폰이나 스크린 사이즈가 이 정도 크기라면 이 css를 보여줘! 이런거임

<head>
    <style>
      body {
        display: flex;
        height: 100vh;
        align-items: center;
        justify-content: center;
      }
      div {
        background-color: teal;
        width: 200px;
        height: 200px;
      }
      /* 600px보다 크기가 작으면 화면을 빨간색으로 변경 */
      @media screen and (max-width: 600px) {
        div {
          background-color: tomato;
        }
      }
    </style>
  </head>

  <body>
    <div></div>
  </body>

결과

+추가

      /* screen크기가 650px ~ 750px 사이에 있을때 적용 */
      @media screen and (min-width: 650px) and (max-width: 750px) {
        div {
          background-color: tomato;
        }


+추가

<head>
  <style>
      body {
        display: flex;
        height: 100vh;
        align-items: center;
        justify-content: center;
      }
      div {
        background-color: teal;
        width: 200px;
        height: 200px;
      }
      @media screen and (max-width: 600px) {
        div {
          background-color: tomato;
        }
      }
      @media screen and (min-width: 601px) and (max-width: 1200px) {
        div {
          background-color: thistle;
        }
      }
      @media screen and (min-width: 1200px) {
        div {
          background-color: yellowgreen;
        }
      }
    </style>
  </head>

  <body>
    <div></div>
  </body>

결과



모바일 환경에서는 어떻게 보이는지 확인 할 수 있는 방법
오마 - 검사 -

저거 클릭하면 확인 가능.

오른쪽 맨 위 아이콘 누르면 가로모드에서도 어떻게 보이는지 확인 가능


가로모드일때 css 색상 바꾸기
=> (orientation:landscape)

세로모드일때
=> landscape를 portrait로 변경

      @media screen and (min-width: 601px) and (max-width: 1200px) and (orientation:landscape){
        div {
          background-color: thistle;
        }
      }

혹시 세로모드로 들어가면 가로로 폰 돌려달라는 문구 뜨게하기,
폰 돌리면 문구 사라지게하기

      @media screen and (orientation: landscape) {
        span {
          display: none;
        }
      }


결론

<!DOCTYPE html>
<html lang="kr">
  <head>
    <title>home - my first website.</title>
    <style>
      body {
        display: flex;
        height: 100vh;
        align-items: center;
        justify-content: center;
        flex-direction: column;
      }
      div {
        background-color: teal;
        width: 200px;
        height: 200px;
      }
      @media screen and (max-width: 600px) {
        div {
          background-color: tomato;
        }
      }
      @media screen and (min-width: 601px) and (max-width: 1200px) and (orientation: landscape) {
        div {
          background-color: thistle;
        }
      }
      @media screen and (min-width: 1200px) {
        div {
          background-color: yellowgreen;
        }
      }
      span {
        font-size: 36px;
      }
      @media screen and (orientation: landscape) {
        span {
          display: none;
        }
      }
    </style>
  </head>

  <body>
    <div></div>
    <span>핸드폰을 돌려주세요 :(</span>
  </body>
</html>

결과

profile
yejin
♪(๑ᴖ◡ᴖ๑)♪ 기회는 도전에서부터 시작되는 것
이전 포스트

[코코아톡 클론] 3.11~3.16 필기

다음 포스트

[코코아톡 클론] 6.0~6.5 필기

0개의 댓글