차곡차곡 쌓기 차곡차곡 쌓기

1. useParams란? useParams hook은 현재 URL에서 Route path와 일치하는 동적 파라미터의 값을 반환한다. 2. 사용해보기 useParams 는 주로 고정된 Route path가 상황에 따라 변화하는 값을 path에 넣어줘야 할 때 사용한다 . ex) 쇼핑몰 상품 상세페이지, 유저 프로필 페이지 등 유저 프로필 페이지는 A, B, C라는 유저가 있으면 A유저의 프로필을 누르면 A 유저 프로필로 B라는 유저를 누르면 B 유저의 프로필로 이동해야 한다. 주소/profile/userA 👆이런 식으로 이동해야하고 이 뒤의 userA값을 토대로 서버에 요청을 해서 값을 받아와 화면에 나타내야한다. PageRouter.jsx function PageRouter() { return ( 우선..

Position 이란? 웹 페이지에서 html 태그나 id, class 박스 등의 위치를 지정해주는 속성. position을 이용해 페이지의 레이아웃을 결정할 수 있음. 기본값인 static을 제외한 값들은 top, right, bottom, left 값에 따라 위치 지정 1. position: sticky; 요소를 일반적인 문서 흐름에 따라 배치 (공간 차지) 가장 가까운 스크롤되는 조상과 컨테이닝 블록(가장 가까운 블록 레벨 조상)을 기준으로 삼음 오프셋은 다른 요소의 위치에 영향을 주지 않음 항상 새로운 쌓임 맥락을 생성 스크롤 동작이 존재하는 가장 가까운 조상에 달라 붙음 1-1. 예제 HTML 삽입 미리보기할 수 없는 소스 2. position: fixed;? 요소를 일반적인 문서의 흐름에서 제..

마진 겹침 1. 마진 겹침이란? 요소와 요소의 사이에 상하 margin의 공간이 있을 경우 더 높은 값이 적용되는 현상 2. 마진 겹침 현상의 조건 인접 형제 요소간의 마진은 겹침 부모 요소와 형제 요소가 block일 때 분리하는 콘텐츠가 없을 때 height , min-height, max-height, border, padding, inline 콘텐츠가 없을 때 모두 block 이어야 함 인접 형제 요소간의 마진 겹침 Hellow world Hellow world 위와 같이 h1에 모두 공통적으로 margin을 줘서 예상대로라면 두 요소 사이에는 위의 h1의 margin-bottom과 아래의 h1의 margin-top이 있어야 하지만 두개가 겹쳐있는 모습이 보인다. 첫번째 h1에 margin-bott..