CSS 기본 지식

Padding, Margin

• Padding : 안쪽 여백
• Margin : 바깥쪽 여백

Position

• static : 요소를 일반적인 문서 흐름에 따라 배치한다.
• relative : static + 자신을 기준으로 top, right, bottom, left의 값에 따라 오프셋을 적용한다.
• absolute : 요소를 일반적인 문서 흐름에서 제거하고, 가장 가까운 위치 지정 조상 요소에 대해 상대적으로 배치한다.
• fixed : 요소를 일반적인 문서 흐름에서 제거하고, 뷰포트의 초기 컨테이닝 블록을 기준으로 삼아 배치한다.
• sticky : static + fixed 특징을 동시에 가진다. 

- 오프셋(offset) : top, left, right, bottom 값을 의미하고 기준이 되는 곳으로 부터 얼마만큼 떨어져있는지를 나타내기 위해 필요한 속성

- 뷰포트(viewport) : 화면에서 실제 내용이 표시되는 영역으로, 데스크톱은 사용자가 설정한 해상도가 뷰포트 영역이 되고 스마트기기는 기본으로 설정되어 있는 값이 뷰포트 영역이 된다.

- 컨테이닝 블록 : 요소의 위치와 크기를 지정하는데 사용하는 블록을 의미한다.

Cascading

CSS는 Cascading Style Sheet 줄임말이다. 사전적 정의에 의하면 Cascading은 폭포라는 뜻을 가지고 있다. 즉, 웹브라우저, 사용자, 컨텐츠 생산자의 조화를 중요한 철학으로 삼고 있다고 생각하면 된다.

 

1. 우선 순위

1. 사용자 스타일 시트
2. 제작자가 만든 !important 스타일
3. 제작자가 만든 일반 스타일
4. 기본적인 브라우저 스타일

2. 적용 범위

1. 인라인 스타일
2. id 스타일
3. class 스타일
4. 태그 스타일

<!-- 인라인 스타일 -->
<p style="color: orange;"></p>

/* id 스타일 */
#id-style { color: red; }

/* class 스타일 */
.classStyle { color : yellow; }

/* 태그 스타일 */
p { color : green; }

3. 소스 순서

1. 가장 마지막에 나온 스타일

p { color : black; }
/*
...
*/
p { color : pink; }

/* p 태그의 color 는 pink */

CSS 애니메이션, 트렌지션, JS 애니메이션

CSS 애니메이션

/*
...
*/
.animation-move {
  animation: move 4s
}

@keyframes move {
  from {
    left: 0;
    top: 0;
  }
  to {
    left: 350px;
    top: 350px;
  }
}

// animation.js
function myMove() {
  var ele = document.getElementById("animate");
  ele.className = 'animate-move";
}

@keyframes 를 사용하여 애니메이션명을 지정하고 animation-move 라는 클래스명을 가지는 요소에 입히고 있다.

 

트랜지션(Transition) vs 애니메이션(Animation)

트랜지션(Transition)

1. 요소의 변화를 일정 기간(duration)동안 일어나게 한다.
2. hover나 click 같은 이벤트 트리거에 의해 동작한다.
3. Layout을 변경시킬 경우, Reflow 발생을 줄이기 위해 낮은 계층의 요소에 효과를 주는 것이 좋다.

애니메이션(Animation)

1. 트랜지션은 시작하기 위해 이벤트가 필요하지만, 애니메이션은 시작, 정지, 반복까지 제어 가능(물론 이벤트 제어도 가능)
2. 하나 또는 복수의 @keyframes로 이루어진다.

JS 애니메이션

function myMove() {
  var ele = document.getElementById('animate');
  var pos = 0;
  var id = setInterval(frame, 5);
  function frame() {
    if (pos == 350) clearInterval(id);
    else {
      pos++;
      ele.style.top = pos + 'px';
      ele.style.left = pos + 'px';
    }
  }
}

위의 CSS애니메이션과 같은 효과를 입힌 코드이다. setInterval 을 주고 일정 주기마다 frame() 함수를 실행시켜 요소의 위치를 이동한다.

CSS 애니메이션 vs JS 애니메이션

1. 크로스 브라우징면에서는 JS 애니메이션을 사용하는 것이 낫다. 하지만, CSS 애니메이션은 모든 동작을 CSS에서 관리하고, 필요하다면 JS는 이벤트 감지를 위해서만 사용한다.
2. JS 애니메이션은 실행 로직을 브라우저 자체에서 실행하기 때문에 메모리 소비를 최적화 해준다.
3. Javascript에서는 CSS, 동작을 모두 관리해줘야하는 반면, CSS애니메이션은 CSS안에서 다 관리하기 때문에 관리에 용이하다.

https://github.com/Esoolgnah/Frontend-Interview-Questions/blob/main/Notes/important-5/position.md

GitHub - Esoolgnah/Frontend-Interview-Questions: 프론트엔드 중요도별 면접질문 + 용어 설명 ⭐️

https://makinghome.tistory.com/67

Cascading 캐스케이딩의 뜻 - 1. 스타일 우선순위

https://github.com/SeonHyungJo/FrontEnd-Note/blob/master/Performance/CSS%20%EC%95%A0%EB%8B%88%EB%A9%94%EC%9D%B4%EC%85%98%20vs%20JS%20%EC%95%A0%EB%8B%88%EB%A9%94%EC%9D%B4%EC%85%98.md

GitHub - SeonHyungJo/FrontEnd-Note: FrontEnd Knowledge Package 📦