project 1 - Foods 학습 정리

vh 와 vw 

현재 실행중인 스크린 크기에 맞춰 상대적 크기를 반환하겠다는 뜻

반응형 웹디자인 기술은 %에 의존, 하지만 css의 %값이 모든 문제를 해결하지는 않음.

css의 너비 값은 가장 가까운 부모 요소에 상대적인 영향을 받음.

너비값과 높이값을 부모요소의 너비값의 뷰포트에 맞게 사용할 수있는 것이 vh vw단위이다. 

 

vh의 높이값은 100/1의 단위이다. 예를 들어 브라우저의 높이 값이 900px 일때 1vh는 9px 이다.

 

 

justify-content(메인축 방향 정렬)

space-evenly

아이템들의 사이와 양 끝에 균일한 간격을 만들어 줍니다.
주의! IE와 엣지(Edge)에서는 지원되지 않습니다.

 

출처: https://studiomeal.com/archives/197

이번에야말로 CSS Flex를 익혀보자

 

 

absolute position의 특징

 

position 속성이 absolute로 설정되어 있는 엘리먼트는 웹페이지 상에 배치될 때 다음과 같은 특징을 갖습니다.

• 부모 엘리먼트 내부에 속박되지 않고, 독립된 배치 문맥(positioning context)을 가지게 됩니다. 마치 포토샵 같은 그래픽 툴에서 새로운 레이어를 추가하는 효과에 비슷하다고 생각하시면 됩니다.
• 따라서, 엘리먼트를 기본적으로 브라우저 화면(viewport) 상에서 어디든지 원하는 위치에 자유롭게 배치시킬 수 있으며, 심지어 부모 엘리먼트 위에 겹쳐서 배치할 수도 있습니다.
• 단, 상위 엘리먼트 중에 position 속성이 relative인 엘리먼트가 있다면, 그 중 가장 가까운 엘리먼트의 내부에서만 엘리먼트를 자유롭게 배치할 수 있습니다. 즉, 전체 화면이 아닌 해당 상위 엘리먼트를 기준으로 offset 속성(top, left, bottom, right)이 적용됩니다.

참조 :https://www.daleseo.com/css-position-absolute/

[CSS] Absolute Position - 자유로운 엘리먼트 배치

 

 

 

transform:translate() - 지정 요소 X 또는 Y축으로 이동

translate는 요소를 지정한 위치로 X 또는 Y축만큼 이동 시킵니다.

 

transform:translateX(10px);        // X축으로 10px 이동
transform:translateY(10px);        // Y축으로 10px 이동
transform:translate(-10px, -10px); // X축으로 -10px, Y축으로 -10px 이동

 

 

transform:scale() - X 또는 Y축으로 확대/ 축소

scale은 해당 요소를 지정한 크기만큼 확대 또는 축소 시킬 수 있습니다.

transform:scaleX(x축 비율);          // x축으로 확대, 축소
transform:scaleY(y축 비율);          // y축으로 확대, 축소
transform:scale(x축 비율, y축 비율);  // x축, y축으로 확대, 축소

 

출처: https://www.biew.co.kr/entry/CSS3-Transform-속성-scale-rotate-translate-skew-실무예제-첨부파일-포함

 

 

CSS3 Transform 속성 : scale(), rotate(), translate(), skew() - 실무예제 첨부파일 포함

 

 

setInterval 함수

일정한 시간 간격으로 작업을 수행하기 위해서 사용합니다.

setInterval(function() {반복 실행하고 싶은 함수를 function 부분에 작성 }, 지연시간);

매개변수가 없을 경우 ( ) => { ... }  형태의 화살표 함수를 선언 할 수 있음.

 

const icons = document.querySelectorAll('.section-1-icons i')
let i = 1;

setInterval(()=>{
  i++;
  const icon = document.querySelector('.section-1-icons i.change');

  icon.classList.remove('change');

  if(i>icons.length){
    icons[0].classList.add('change');
    i = 1;
  } else{
    icon.nextElementSibling.classList.add('change')
  }

},1000)

 

 

 

 

transtion

트랜지션은 css 속성이 변할 때, duration (변화하는 시간)을 지정하여 일정 시간동안 변화를 나타내는 것

 

 

github 주소 : https://github.com/dahyekim0311/UdemyProject-Foods

github 호스팅 주소 : https://dahyekim0311.github.io/UdemyProject-Foods/