css 적용순서

0순위. important (현업에서 사용하지 않음. 디버깅 할 때는 유용하지만 실제 코드 작성시에는 쓰면 안된다.)
1순위. 태그 안의 인라인으로 설정한 스타일
2순위. id 선택자
3순위. class 선택자
4순위. 선택자
5순위. 기본 브라우저 스타일링

조금 더 구체적일 수록 우선순위가 높다. 만약 동일한 레벨이라면 마지막으로 정의된 특정한 스타일에 한해서 스타일링이 적용된다. 별도로 재정의 하지 않았다면 이전에 정의내린 값이 유효하다.

box

      div {
        width: 100px;
        height: 100px;
        margin-bottom: 10px;
        background-color: chocolate;
      }

      .box1, .box3{
        padding: 20px;
        border: 5px solid black;
      }
      
      .box1{
        box-sizing: border-box;
      }

box-sizing: border-box를 사용시 padding이나 border를 넣어도 내가 정의한 box width, height에 맞게 크기가 적용된다. border-box를 사용하는 것이 유지보수 하기에 더 좋으며, 현업에서는 대부분 이를 사용한다.

border & outline

내가 border-box를 사용할 때 바깥 쪽에 라인을 넣고 싶으면 outline을 사용하면 된다.
border는 내가 지정한 요소 크기 안쪽에 집어넣을 수 있고, outline은 내가 지정한 크기의 바깥 쪽에 라인을 넣을 수 있다.

block & inline

block은 한 줄에 하나씩
inline은 한 줄에 여러개
display 속성으로 inline 이나 block으로 설정할 수 있다.
inline-block은 실제 요소의 크기는 딱 컨텐츠만큼만 차지한다.

position

순차적인 요소들의 순서를 바꾸고 싶다면 그 때 사용할 수 있는 것이 position이다. position 옵션에는 absolute, fixed, relative, static, sticky가 있다.

Relative & Absolute

Relative: 다른 요소의 기존 위치를 그대로 유지하면서 상대적으로 우리가 지정한 것만큼 위치를 결정하여 재배치 시킬 수 있다.

absolute: relative와 반대된다. 절대적인 위치 지정을 할 수 있다.
1. 기존 문서 flow에서 빠져나오고, 그 아래 있는 요소들의 재배치가 일어난다.
2. absolute의 위치를 결정하는 기준은 부모가 결정하는데, 부모가 되는 것은 absolute가 들어있는 부모 요소 중에 static position이 아닌 가장 근접한 부모를 기준으로 위치가 결정된다.

margin: auto

균등하게 여백을 분배해서 수평으로 정렬을 하고 싶다면 margin: auto를 사용하면 된다.

text-align: center

박스 안에 있는 인라인 요소를 중간으로 정렬하고 싶을 때 사용한다. 부모 컨테이너 안에 있는 인라인 요소를 정렬할 때도 사용할 수 있다.

수평 & 수직으로 중간정렬

.box {
	width: 200px;
    height: 200px;
    background-color: grey;
    display: flex;
    justify-content: center;
    align-items: center;
    }

background-image

      .box1 {
        background-image: url('https://media.swncdn.com/cms/BST/67912-gettyimages-817147678-kieferpix.1200w.tn.webp');
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
      }

      .box2 { /*box1을 축약해서 쓴 것. 더 간단하다.*/
        background: center/cover no-repeat
        url('https://media.swncdn.com/cms/BST/67912-gettyimages-817147678-kieferpix.1200w.tn.webp');
      }

      .box3 { /*no-repeat 대신 fixed를 사용하면 사진이 고정된채 늘어났다 줄어들었다 한다.*/
        background: center/cover fixed
        url('https://media.swncdn.com/cms/BST/67912-gettyimages-817147678-kieferpix.1200w.tn.webp');
      }

transform

      .box1 { /*X축에서 100px 만큼 떨어지기*/
        transform: translateX(100px);
      }

      .box2 { /*X축 Y축에서 -50px, -20px만큼 떨어지기*/
        transform: translate(-50px, -20px);
      }

      .box3 { /*1.3배 커지기*/
        transform: scale(1.3);
      }

      .box4 { /*45도 만큼 돌아가기*/
        transform: rotate(45deg);
      }

      .box5{ /*다 합쳐서도 사용 가능*/
        transform: translate(100px, 100px) scale(2) rotate(15deg);
      }

transition

      .box {
        width: 100px;
        height: 100px;
        margin: 20px;
        background-color: pink;
        transition: /*마우스가 올라갔을 때, 나왔을 때 요소 전체에 트랜지션을 적용하고 싶다면 이곳에 트랜지션을 쓰면 된다. */
        all  /*내가 변경되는 모든 트랜지션에 한해서 모두 적용을 하고 싶다면 all*/
        300ms /*애니메이션이 적용되는 시간. 보통 300ms 사용한다.*/
        cubic-bezier(.17,.67,.83,.67);
      }

      .box1:hover {
        background-color: blueviolet;
        /*마우스가 호버 되었을 때만 트랜지션을 하고 싶다면 여기에 트랜지션 작성하면 된다.*/
      }

      .box2:hover {
        border-radius: 100%;
        background-color: cornflowerblue;
      }

      .box3:hover {
        border-radius: 50%;
        transform: translateX(400px); /*X좌표로만 400px 움직이는 것*/
        background-color: blue;
      }

(기본속성)ease: 천천히 시작했다가 천천히 끝남.
linear: 일정한 간격으로 속도 유지됨.
ease-in: 시작할 때 천천히 하고, 끝날 때 빠르다.
ease-out: 시작할 때 빠르게, 끝날 때 천천히.
ease-in-out: 시작과 끝을 천천히
cubic-bezier: custom하게 만들 수 있다.

keyframes

	  /*@keyframes 내가 원하는 이름 작성*/
      @keyframes slidein {
        0% { /*초기값*/
          border-radius: 0%;
          background-color: aquamarine;
        }

        30% { /*중간값*/
          background-color: bisque;
        }

        60% {
          background-color: pink;
        }

        100% { /*최종값*/
          border-radius: 100%;
          background-color: hotpink;
        }
      }

      .box {
        width: 100px;
        height: 100px;
        margin: 20px;
        background-color: chocolate;
        animation: 
        3s /*3초 동안 실행*/
        slidein /*위에서 정의한 @keyframes 실행*/
        infinite /*무한반복*/
        alternate /*양방향으로 애니메이션이 돌아갈 수 있게 하는 것*/;
        }

css변수 (variable)

	  :root { /*반복적으로 사용하는 것을 한 곳에 정의하여 가독성, 유지보수성을 높일 수 있다. 항상 더블 하이픈으로 시작하여 변수 저장.*/
        --background-color: darkslategrey;
        --text-color: whitesmoke
      }

      .first-list {
        background-color: var(--background-color);
        /*var() 사용*/
        color: var(--text-color);
        margin-left: 8px;
      }
      .second-list {
        background-color: var(--background-color);
        color: var(--text-color);
        margin-left: 16px;
      }

      @media screen and (max-width: 768px) {
      /*스크린의 크기가 줄어들 때 적용*/
        :root {
          --background-color: darkslateblue;
          --text-color: white
        }
        
      }

Data Attribute

    <style>
      div {
        width: 100px;
        height: 100px;
        background-color: tomato;
        margin-bottom: 50px;
      }
      div[data-display-name='oo'] {
        background-color: beige;
      }
    </style>
  </head>
  <body>
    <div data-index="1" data-display-name="oo">ㅇㅇ</div>
    <div data-index="2" data-display-name="ii">ㄴㄴ</div>
    <span data-index="1" data-display-name="oo">ㅎㅎ</span>
    <script>
      const dream = document.querySelector('div[data-display-name="oo"]')
      console.log(oo.dataset);
      console.log(oo.dataset.displayName);
    </script>