금붕어인지 자주 쓰던 CSS 기법들이 계속 생각이 안 나서 여기다 적어 둬야겠다
아이템들을 정렬할 때 쓰는 기법
<div>
<h1>첫번째 아이템</h1>
<h1>두번째 아이템</h1>
</div>
컨테이너 역할을 할 상위 태그에 display: flex
를 걸어 주고, 가로로 할 거면 flex-direction: row
, 세로로 할 거면 flex-direction: column
를 붙여 준다. row
는 왼쪽에서부터, column
는 위에서부터 정렬되니 다른 옵션을 원하면 -reverse
를 더해 주면 된다. 중앙 정렬이 필요할 땐 justify-content: center
와 align-items: center
까지 붙여 주면 금상첨화
// JSX
<div style={{ display: 'flex', flexDirection: 'column' }}>
<h1>첫번째 아이템</h1>
<h1>두번째 아이템</h1>
</div>
페이지를 만들고 스크롤을 내리다 보면 당연하게도 위에 있는 부분은 보이지 않게 된다. 하지만 내비게이션 바처럼 계속 보여야 하는 아이템에 position: fixed
를 붙여 주면 영향을 받지 않고 자기 자리를 굳건하게 지킨다 !
프로그래머스 페이지를 클론코딩해 보면서 접했던 문제이다. div
안에 버튼 컴포넌트를 가로로 나열하고, 범위를 넘어가면 줄바꿈이 되도록 해야 했다.
상위 태그의 width
도 이리저리 만져 봤는데 해결이 안 됐다. <br/>
같은 꼼수도 실패
열심히 구글링해 보니 flex-wrap
이라는 속성을 찾았다
flex
컨테이너 속 아이템들의 정렬을 결정하는 속성인데, wrap
은 아이템들이 컨테이너 안에서만 표시될 수 있도록 줄바꿈을 해준다. nowrap
과 wrap-reverse
도 있다 !
// 클론한 프로그래머스 코드 일부
<div style={{ width: '100%', marginTop: '15px', marginBottom: '35px', display: 'flex',
flexDirection: 'row', alignItems: 'center', flexWrap: 'wrap' }}>
<StackButton>
Java
</StackButton>
<StackButton>
Spring
</StackButton>
...
position: absolute
와 left
, top
으로 아이템의 위치를 고정할 때 일반적으로는 페이지 전체를 기준으로 위치가 지정된다. 여러 컨테이너에서 따로따로 absolute
정렬을 쓰고 싶다면 컨테이너의 스타일에 position: relative
를 추가해 주면 그 컨테이너를 기준으로 absolute
가 움직인다.