참고
- 노마드코드
- MDN
- 1분코딩
Part 2. CSS
1. Grid
Flex 는 한 방향 레이아웃 시스템이고 (1차원), Grid 는 두 방향(가로-세로) 레이아웃 시스템 (2차원) 이기 때문에 좀 더 복잡한 레이아웃을 구현할 때 용이하다. 요소들도 많고 좀 더 많은 내용이 있지만 실제 사용했던 요소들 위주로 정리해 보았다.
아래 크롬 개발자도구를 이용하면 grid 속성을 간편하게 확인할 수 있다.
Grid Container 와 Grid Item
<div class="container">
<div class="item">A</div>
<div class="item">B</div>
<div class="item">C</div>
<div class="item">D</div>
<div class="item">E</div>
<div class="item">F</div>
<div class="item">G</div>
<div class="item">H</div>
<div class="item">I</div>
</div>부모 요소인 div.container를 Grid Container(그리드 컨테이너)라고 부르고, 자식 요소인 div.item들을 Grid Item(그리드 아이템)이라고 부른다.
컨테이너가 Grid의 영향을 받는 전체 공간이고, 설정된 속성에 따라 각각의 아이템들이 어떤 형태로 배치되는 것이라고 생각하면 된다.
flex 와 마찬가지로
1. display : grid 로 선언하고 시작한다.
.container {
display: grid;
}2. 컨테이너에 적용하는 속성 / 아이템에 적용하는 속성 으로 나누어진다.
Container 에 적용하는 속성
grid-template-rows
행(row)의 배치
grid-template-columns
열(column)의 배치
repeat 함수
repeat(반복횟수, 반복값)
repeat(3, 1fr)은 1fr 1fr 1fr- repeat(3, 1fr 4fr 2fr) 이런 식의 패턴도 가능
minmax 함수
최솟값과 최댓값을 지정할 수 있는 함수
minmax(100px, auto)의 의미는 최소한 100px, 최대는 자동으로(auto) 늘어나게 라는 뜻이다. 즉 아무리 내용의 양이 적더라도 최소한 높이 100px은 확보하고, 내용이 많아 100px이 넘어가면 알아서 늘어나도록 처리하라는 뜻
auto-fill과 auto-fit
auto-fill과 auto-fit은 column의 개수를 미리 정하지 않고 설정된 너비가 허용하는 한 최대한 셀을 채운다
row-gap / column-gap / gap
그리드 셀 사이의 간격을 설정
Item 에 적용하는 속성
align-self
해당 아이템을 세로(column축) 방향으로 정렬
justify-self
해당 아이템을 가로(row축) 방향으로 정렬
place-self
align-self와 justify-self를 같이 쓸 수 있는 단축 속성
align-self, justify-self의 순서로 작성하고, 하나의 값만 쓰면 두 속성 모두에 적용
실제 적용
const Grid = styled.div`
display: grid;
grid-template-columns: repeat(9, 1fr);
gap: 30px;
`;위와 같이 간단히 적용하면 화면에 9개의 아이템들이 양옆, 아래, 위로 30px의 갭을 갖고 균일하게 배치되게 된다.
2. :not(selector)
:not()
부정(negation) CSS 가상 클래스 :not(X)는 인수로 간단한 선택자(selector) X를 취하는 기능 표기법. 인수로 표시되지 않은 요소와 일치합니다. X는 다른 부정 선택자를 포함해서는 안 된다.
실제 적용
마지막 요소만 margin-bottom 을 주고 싶지 않을 때 아래와 같이 간단히 표현한다.
const Container = styled.div`
:not(:last-child) {
margin-bottom: 50px;
}
`;3. calc()
calc()
calc() 함수는 매개변수로 표현식 하나를 받고, 표현식은 단순 계산식은 무엇이든 가능하며, 표준 연산자 우선순위를 따른다.
/ property: calc(expression) /
width: calc(100% - 80px);
실제 적용
50px의 높이를 가진 헤더 부분을 빼주기 위해 calc() 를 이용하여 높이를 정해주었다.
const Container = styled.div`
width: 100%;
height: calc(100vh - 50px);
`;4. background
이름과 같이 배경화면을 지정해주는 속성을 뜻한다.
아래와 같이 단축 속성으로 색 / 이미지 / 반복 / 위치 항목을 한 번에 지정할 수도 있다.
background: #000 url(images/bg.gif) no-repeat top right;
구성 요소
- background-attachment
- background-clip
- background-color
- background-image
- background-origin
- background-position
- background-repeat
- background-size
실제 적용
background 의 적용은 아래와 같이 동적으로 API 주소를 받아서 렌더링 할 때 좀 더 유용하게 쓰인 것 같다.
참고!!! src에 있는 .png 파일을 받을때는 object 로 받아진다는 에러가 발생 할 때는 require("../../assets/noUrl.png").default 이런식으로 default 를 붙여주면 해결된다.
const Backdrop = styled.div`
background-image: url(${(props) => props.bgImage});
background-position: center center;
background-size: cover;
`;참고!
css 의 background 속성은 SEO 와 screen reader 를 통한 접근성에 좋지 않다. 따라서, 해당 사용이미지가 해당 html 문서에서 필요 요소면 img태그로, 그냥 꾸미는 요소면 background-image로 처리하는 것을 지향한다.
