The Web Developer 부트캠프 2023/CSS

유용한 CSS 속성들

tjdvyzl 2023. 5. 28. 23:33

불투명도와 알파 채널

rgba

요소의 배경 투명도만 조절해서 그 요소 안에 있는 컨텐츠는 그대로 보이게 할 수 있음.

ex) background-color: rgba(255,255,255,0.7);

opacity

요소 전체 투명도를 조절함.

ex) opacity: 0.3;

위치 속성

Static

지금까지 다뤘던 모든 요소의 기본 위치 특성.

Relative

해당 요소는 문서의 일반적인 흐름에 따라 위치가 지정되며, 그 후에는 top, right, bottom 및 left의 값에 따라 자체적으로 오프셋이 적용된다. 이 오프셋은 다른 요소들의 위치에 영향을 주지 않으므로, 위치가 정적(static)인 경우와 동일하게 페이지 레이아웃에서 요소에 할당된 공간은 변하지 않는다.

Absolute

해당 요소는 일반적인 문서 흐름에서 제거되며, 페이지 레이아웃에서 요소에 대한 공간이 생성되지 않는다. 가장 가까운 위치 지정된 조상에 상대적으로 위치가 지정되며, 위치 지정된 조상이 없는 경우 초기 컨테이닝 블록에 상대적으로 배치된다.

Fixed

해당 요소는 일반적인 문서 흐름에서 제거되며, 페이지 레이아웃에서 요소에 대한 공간이 생성되지 않는다. 뷰포트에 의해 설정된 초기 컨테이닝 블록에 상대적으로 위치가 지정되는데, 조상 요소 중 하나가 transform, perspective 또는 filter 속성이 none이 아닌 다른 값으로 설정되어 있는 경우 또는 will-change 속성이 transform으로 설정된 경우, 해당 조상은 컨테이닝 블록으로 동작한다.

CSS 전환

.circle {
	width: 300px;
    height: 300px;
    background-color: magenta;
    transition: background-color 1s;
}

.circle:hover {
	background-color: cyan;
    border-radius: 50%;
}

위 코드를 보면 transition 특성을 통해 마우스를 올렸을 때 배경색을 1초동안 바뀌게 할 수 있다.

또, 타이밍 함수를 넣을 수 있는데 마우스를 올리기 전 상태에서 마우스를 올린 후의 상태까지 전환하는데에 다양한 방법이 있다.

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

<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>Document</title>
    <style>
        section div {
            height: 100px;
            width: 100px;
            background-color:turquoise;  
            margin: 20px 0;
            transition: margin-left 3s;
        }

        section:hover div {
            margin-left: 500px;
        }

        div:nth-of-type(1) {
            transition-timing-function: ease-in;
        }

        div:nth-of-type(2) {
            transition-timing-function: ease-out;
        }

        div:nth-of-type(3) {
            transition-timing-function: cubic-bezier(0.7, 0, 0.84, 0);
        }

        div:nth-of-type(4) {
            transition-timing-function: cubic-bezier(0.85, 0, 0.15, 1);
        }
    </style>
</head>

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

</html>

Document

<!DOCTYPE html>
<html lang="en">
  <head>
      <style>
        .circle {
            width: 300px;
            height: 300px;
            background-color: magenta;
            transition: background-color 1s ease-in 2s, border-radius 2s;
        }

        .circle:hover {
            background-color: cyan;
            border-radius: 50%;
        }
      </style>
  </head>

  <body>
    <div class="circle"></div>
  </body>

</html>

이런식으로 transition: duration, timing function, delay 순서에 맞게 작성할 수도 있다.

중요한 점은 전환하려는 특성을 추려서 한 번에 다 전환하지 말아야한다. 왜냐하면 결국은 코드를 바꿀 일이 생기게 되고 CSS의 hover을 업데이트했는데 갑자기 엉뚱하게도 예상치 못한 곳에 전환이 생길 수도 있기 때문이다.

또, .circle:hover {} 코드에서는 두 특성만 꼽았지만 모든 걸 다 전환하도록 설정했는데 나중에 추가한 어느 부분에는 적용하고 싶지 않을 수 있다.그렇기에 모두 다 전환하는 것보다 원하는 특성을 따로 추리는게 좋다.

참고 사이트: https://easings.net/

CSS 변환이 가진 능력

https://developer.mozilla.org/ko/docs/Web/CSS/transform

transform - CSS: Cascading Style Sheets | MDN

CSS transform 속성으로 요소에 회전, 크기 조절, 기울이기, 이동 효과를 부여할 수 있습니다. transform은 CSS 시각적 서식 모델의 좌표 공간을 변경합니다.

developer.mozilla.org

배경에 관한 진실

<!DOCTYPE html>
<html lang="en">
  <head>
      <link rel="stylesheet" href="temp.css">
  </head>

  <body>
    <section>
      <h1>I AM HEADING</h1>
    </section>
  </body>

</html>

section {
    width: 80%;
    height: 800px;
    /* background-image: url("https://images.unsplash.com/photo-1683191431434-b6dabac5002b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=708&q=80");
    background-size: cover;
    background-position: top; 
    background-repeat: no-repeat;
    */
    /* 밑에 속기법을 할 때 유념해야할 점이 있다.
        background-size를 쓰려면 <position> 뒤에 /와 함께 어떤 비율로 설정할지 넣어줘야한다. ex) center/80% 
    */
    background: no-repeat center/40% url("https://images.unsplash.com/photo-1683191431434-b6dabac5002b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=708&q=80"), blueviolet;
    margin: 0 auto;
}

h1 {
    font-size: 100px;
    color: white;
}

I AM HEADING

https://developer.mozilla.org/ko/docs/Web/CSS/background

background - CSS: Cascading Style Sheets | MDN

CSS background 단축 속성은 색상, 이미지, 원점, 크기, 반복 등 여러 배경 스타일을 한 번에 지정합니다.

developer.mozilla.org

놀라운 구글의 글꼴

구글 폰트에 들어가서 원하는 폰트 페이지 들어간 후, select regular을 누르면 url 링크로 삽입하는 방법도 있다.

또한, 글꼴 마다 weight가 고정이 되어있는데 밑에서 고른 폰트 같은 경우 regular이 400이라 weight가 400으로밖에 설정을 못한다. 그리고 만약 700이나 800으로 weight를 설정한다 해도 가장 가까운 400으로 설정될 것이다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Rubik+Puddles&display=swap" rel="stylesheet">

    <style>
      h1 {
        font-family: 'Rubik Puddles', cursive;
        text-align: center;
      }
    </style>
  </head>

  <body>
    <section class="s">
      <h1>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus, facilis corporis tenetur in, voluptate atque dolor accusantium rem explicabo quisquam quia dolore, officiis vel laudantium saepe. Nulla alias non impedit!</h1>
    </section>
  </body>

</html>

Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus, facilis corporis tenetur in, voluptate atque dolor accusantium rem explicabo quisquam quia dolore, officiis vel laudantium saepe. Nulla alias non impedit!

https://fonts.google.com/

Google Fonts

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

fonts.google.com