자꾸 까먹는 CSS

gugyeoj1n·2022년 5월 20일
0

금붕어인지 자주 쓰던 CSS 기법들이 계속 생각이 안 나서 여기다 적어 둬야겠다

flex 로 정렬하기

아이템들을 정렬할 때 쓰는 기법

<div>
	<h1>첫번째 아이템</h1>
    <h1>두번째 아이템</h1>
</div>

컨테이너 역할을 할 상위 태그에 display: flex 를 걸어 주고, 가로로 할 거면 flex-direction: row, 세로로 할 거면 flex-direction: column 를 붙여 준다. row 는 왼쪽에서부터, column 는 위에서부터 정렬되니 다른 옵션을 원하면 -reverse 를 더해 주면 된다. 중앙 정렬이 필요할 땐 justify-content: centeralign-items: center 까지 붙여 주면 금상첨화

// JSX
<div style={{ display: 'flex', flexDirection: 'column' }}>
	<h1>첫번째 아이템</h1>
    <h1>두번째 아이템</h1>
</div>

position: fixed 마이웨이

페이지를 만들고 스크롤을 내리다 보면 당연하게도 위에 있는 부분은 보이지 않게 된다. 하지만 내비게이션 바처럼 계속 보여야 하는 아이템에 position: fixed 를 붙여 주면 영향을 받지 않고 자기 자리를 굳건하게 지킨다 !

하위 태그의 나열이 상위 태그 범위를 넘어갈 때

프로그래머스 페이지를 클론코딩해 보면서 접했던 문제이다. div 안에 버튼 컴포넌트를 가로로 나열하고, 범위를 넘어가면 줄바꿈이 되도록 해야 했다.

상위 태그의 width 도 이리저리 만져 봤는데 해결이 안 됐다. <br/> 같은 꼼수도 실패

열심히 구글링해 보니 flex-wrap 이라는 속성을 찾았다
flex 컨테이너 속 아이템들의 정렬을 결정하는 속성인데, wrap 은 아이템들이 컨테이너 안에서만 표시될 수 있도록 줄바꿈을 해준다. nowrapwrap-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 의 범위 지정하기

position: absoluteleft, top 으로 아이템의 위치를 고정할 때 일반적으로는 페이지 전체를 기준으로 위치가 지정된다. 여러 컨테이너에서 따로따로 absolute 정렬을 쓰고 싶다면 컨테이너의 스타일에 position: relative 를 추가해 주면 그 컨테이너를 기준으로 absolute 가 움직인다.

0개의 댓글