CSS Basic

Layout Position

🌱absolute vs relative

• relative : 원래있는 자리는 유지하면서 그 자리에서 상대거리만큼의 top과 left만큼 옮겨가는 것
• absolute : 근접한 부모중에서 기본 static이 아닌 부모의 기준에서 포지션이 일어난다.

🌱 Sticky vs Fixed.

• Sticky :
  • 박스안에서 변경이 일어난다. 그대로 공간을 유지한다.
• Fixed
  • 부모와는 상관없이 나와서 position을 유지한다.
  • 뷰포트에서 규정된다

Alinment 속성

• margin : auto
  • 블럭레벨의 경우는 한 줄을 자동적으로 채워주는 마진이 들어있다.
  • 브라우저에서 자동적으로 margin을 만들어 준다.(양끝의 margin을 맞춤 수직은 적용이 안된다.)
• text-aline : center
  • 텍스트만 정렬되지 않고 다른 것들도 정렬이 된다.
  • 블럭레벨(div)이 아닌 경우만 가능하다(button같은 요소들)
• transform : translate(50%,50%)

background 속성

• background-image : url('지정url')
• backgourd-repeat : center;
• background-size: cover;

https://developer.mozilla.org/en-US/docs/Web/CSS/background

Transform 속성

• transform: translateX(100px) x축으로 부터 100px이동가능
• transform: translate(-50px, -20px); x축 , y축으로 부터 이동
• transform: scale(1.2); 배수로 만든다
• transform: rotate(45deg); 45도 이동한다
• transform: translate(100px, 100px) scale(2) rotate(46deg); 다 묶어서도 가능하다

Transtion 속성

애니메이션을 활용할 때 급작스럽게 일어나는 변화를 방지한다.

• transition : background-color 300ms linear;
• transition : background-color 300ms ease;
• transition :all 2s cubic-bezier(0.075, 0.82, 0.165, 1); 다양하게 변화되는 과정을 볼 수 있다,

Linear와 easy옵션에 대한 자세한 설명

https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timing-function

자주 반복되어 쓰는 수치가 CSS에 있다면?

• 커스텀 프로퍼티

  • —font-size : 32px; 커스텀 프로퍼티를 정의할 때.

  • font-size : var(—font-size) 부모의 있는 정의를 받아올 수 있다.

  • 보통 커스텀 프로퍼티는 최고의 root위치에 정의하여 어디서든 접근하게 한다.

  • 미디어 별로 다르게 스타일을 가지고 가고 싶을 때.

    @media screen and (max-width : 768px){
          :root{
            --bacgound-color : #125812;
            --text-color : #325745;
    
          }
        }

  https://developer.mozilla.org/en-US/docs/Web/CSS/—*

Data Attribute

원하는 데이터를 DOM요소에 추가할 수 있는 HTML5의 기능중 하나이다

data-*을 이용하여 활용하면 된다.

조심해야하는 DOM요소는 활용하지 않는게 좋다.

<div data-index="1" data-display-name="soon"></div>

<style>
    div[data-display-name='soon']{
        background-color : tomato;
    }
</style>