sohyeon kim

👀 영화 검색 사이트 제작 중 검색 창이 스크롤을 따라다니게 만들고 싶었다! ~ scroll ~ ⬇️ 왼쪽에 있는 serch-container 를 고정해 두었다! 💡 설정 코드 HTML ~ Search movie title Click CSS ~ #search-container { align-self: flex-start; position: sticky; top: 0; padding: 10px; } 그리고 설정하다 잘 안되서 찾아본 정보들.. 1. 임계값 설정 고정할 요소에 아래 속성 중 하나 이상에 대해 "auto" 이외의 값을 설정해야 한다. top: 0; right: 0; bottom: 0; left: 0; 2. 사파리 벤더 접두사 추가 사파리 브라우저에서 기능하도록! position: -webkit..

💡 flexbox : 행 or 열을 주축('가로 ➡️' 가 기본값)으로 설정해 웹 요소를 배치 / 정렬하는 1차원 레이아웃 방식 플렉스 컨테이너 : 플렉스박스 방식으로 레이아웃을 결정할 요소, ul 플렉스 아이템 : 플렉스 컨테이너 내부에서 플렉스박스 방식으로 배치되는 요소, li 고양이 강아지 오리 달팽이 고라니 * { box-sizing: border-box; } body { margin: 0; } #first-ul { display: flex; padding: 0; list-style: none; height: 300px; } 먼저 기본으로 이렇게 flex 를 설정해 주면 ⬇️ 한줄로 정렬된다! ⬇️ display: flex 는 기본적으로 블록레벨 속성, 그 줄을 전체 차지함 ⬇️ display: ..