맨땅에 헤딩

🔗 사전지식1 (figma) local style이란? local style은 피그마에서 계속 사용할 스타일값들을 특정이름으로 저장해두고 사용하는 것이다. 코드로 생각하면 변수에 자주 쓰는 스타일값을 저장해두고 불러온다고 생각하면 된다. 예를 들어 #f00이라는 값을 계속해서 사용해야 한다면 local style의 color styles에 neutral-01이라는 이름으로 저장해서 color값을 #f00으로 불러오고 싶을때 neutral-01 불러오면 된다. 이렇게 local style을 지정하면, 1. 앞으로 사용할 값들을 손쉽게 불러올 수 있고 2. 값들의 일관성을 지킬 수 있다. 수많은 폰트들이나 색상들을 위와 같이 저장함으로써 여러 명이서 공동작업을 할 때도 전체적으로 통일된 느낌을 유지하기도 편..

➡️ 이미지나 비디오가 박스크기에 들어가면서도 가로세로비를 유지하여 찌그러지며 왜곡되는 현상을 방지하기 위해 height: auto; / object-fit: contain; / object-fit: cover; 을 사용한다. 1. 기능 콘텐츠의 가로세로비 유지 2. 방법 1️⃣ height: auto; 2️⃣ object-fit: contain; 3️⃣ object-fit: cover; 이미지나 비디오를 화면에 그리다보면 원본사진의 사이즈와 콘텐츠가 들어가야하는 박스사이즈가 달라서 찌그러지는 왜곡현상이 발생할 때가 있다. 예를 들면 아래와 같은 상황인데 짱구가 위아래로 조금 찌그러져있는 것을 확인할 수 있다. 인위적으로 찌그러지는 상황을 만들기 위해서 아래의 img에 width: 700px; heigh..

이번에 nav를 만들면서 position의 fixed를 사용했다. position에는 여러가지 배치 방법이 있는데 유용하게 사용되기 때문에 다시 보기 위해서 정리해둔다. 참고자료는 유튜브 유노코딩이고, 보고 이해하면서 일일이 정리한 내용이다. ✔️ 정의 1. position 속성값: position은 문서 상의 요소를 배치하는 방법을 정의 2. position이 요소의 배치 방법을 결정하면, top, bottom, right, left가 최종위치를 결정하는 방식 (offset) ➡️ 상하좌우 위치 지정은 필요에 따라 선택적으로 적용! 1. position을 어떤 값을 사용할지 정하고 2. 그로부터 얼마나 위치를 옮길지(offset)을 결정한다. 1️⃣ relative position을 relative로 ..

프로젝트를 시작하면, 초기에 먼저 css를 초기화하고 시작하는 것이 좋다. 이렇게 초기화를 해주는 이유는 브라우저마다 기본으로 제공하는 스타일이 있기때문이다. 예를 들면 내가 margin을 지정하지 않았는데도, 알아서 margin값이 들어있어서 내가 원하는대로 화면을 가득채우는 것이 불가능하다. 아래의 사진은 width를 100%로 주었음에도 불구하고 자세히보면 margin값으로 인해 화면을 가득채우지 못하고 있는 것을 볼 수 있다. 그래서 개발자가 의도한대로 디자인이 나오게 하기위해서는 이러한 설정을 다시 리셋해주는 과정을 거쳐야한다. (프로젝트를 이미 많이 진행하고 난 뒤에 바꾸는 것은 더 어려우므로 프로젝트 초기에 먼저 설정한 뒤 시작하는 것이 좋다) 🔎 원리 ➡️ user agent stylesh..