개발 마라톤

margin : auto에 대해서 block 요소에서의 auto 태그와 같이 텍스트를 적기 위한 block은 padding을 사용하여 내부 여백을 조정한다. 이와 다르게 내부 요소말고 외부에서 가운데 정렬할 수 있는 방법은 display : flex 등이 있다. 그리고 margin을 통해서 요소 위치를 조정하는 방법이 있는데 그때 사용할 수 있는 것이 margin : auto이다. ( padding은 auto 값을 사용할 수 없다. ) [Css] margin auto, 중앙정렬하기 :: hansol.cha (tistory.com) [Css] margin auto, 중앙정렬하기 margin: 0 auto; 위는 대표적인 중앙정렬 속성이다. 그런데 어떻게 동작되길래 중앙정렬이 되는 것일까? 1. '0'여기서..

반응형을 포함한 정사각형 이미지 만들기 부모 컨테이너에 해당 속성을 주는 것이 포인트이다. width: 100%; padding-bottom: 100%; position: relative; 태그 선택자를 사용할 시에 유의 상위 컴포넌트에서 태그 선택자를 사용하면 하위 컴포넌트에도 해당 스타일이 영향받는다는 것을 잊지말자. 다음은 예시이다. .recommendedSection { height: themes.$mainContainerHeight; p { margin-bottom: themes.$mediumSpacing; color: themes.$whiteColor; font-size: themes.$titleFontSize; } ... } 상위 컴포넌트의 app/page 컴포넌트에서 태그 선택자 p를 이용..

BannerSection의 완성 오늘이 되서야 BannerSection을 완성시켰다. 단순히 애니메이션을 적용하고 이벤트를 적용하는데 생각보다 많은 버그, 오류가 있었다. React 프로젝트는 이제 2번째이지만, 아직 배울 것이 많고, 그것이 또 흥미롭다고 생각한다. 있었던 이슈는 다음과 같다. 내부 컴포넌트의 애니메이션이 이벤트 시에 초기화 되는 현상 ( 내부 컴포넌트가 상위 컴포넌트의 상태 변화 시 모든 정보가 초기화되는 현상 ) onMouseEnter 등의 이벤트를 통해 클래스를 토글할 때 애니메이션 초기화 되는 이슈 · Issue #19 · 1004ljy980/CharFlyer (github.com) onMouseEnter 등의 이벤트를 통해 클래스를 토글할 때 애니메이션 초기화 되는 이슈 · I..

BannerSection 애니메이션 이번 애니메이션을 구현하면서 이슈가 존재했다. 자식이 부모보다 커지지 못하는 이슈 어찌보면 당연하게 생각했던 내용일 수도 있겠다. 자식은 크기를 기본적으로 부모에게 상속받으며, 자식은 부모 컨테이너 내에서 존재하는 것이 기본적인 설계이다. 브라우저 렌더링 순서와 원리 (velog.io) 브라우저 렌더링 순서와 원리 사전지식 1. 🖥 브라우저? 사용자가 선택한 자원을 서버에 요청하고 브라우저에 표시하는 것 이때 자원은 HTML문서, PDF, 이미지 등 다양한 형태를 띌 수 있음 자원의 주소는 URL(Uniform Resource Identifi velog.io 각 요소의 정확한 생성 방식은 찾아보지 못했지만, 생성되는 DOM 트리를 보면 어느정도 내용을 유추 가능할 것 ..

bannerSection 컴포넌트 설계 bannerSection은 어떻게 보면 디자인적인 부분의 한 요소일 뿐이지만, 이 프로젝트를 하면서 나의 큰 관심사 중 하나였다. 구상은 비행기 이미지에 섬네일 사진만을 결합하고, 비행기가 지정된 방향으로 흐르는 방식으로 구상하였다. 사용자가 관심있는 비행기를 hover 나 click 시에 자세히 확인할 수 있는 방식이다. 그러나 고민되는 부분이 몇 가지 있었다. 해당 섹션의 width는 어떻게 설정되어야 하는가? 글을 불러오는 기준은 어떻게 되는가? 글을 불러오는 방식과 해당 컴포넌트를 구성하는 방식은 어떻게 되는가? 이 3가지의 고민을 오랫동안 해왔고, 나름 정리한 내용을 작성해보려고 한다. 1. 해당 섹션의 width는 어떻게 설정되어야 하는가? 중요한 부분은..