[포스코x코딩온] CSS Background 요소와 Flex

이번 포스팅에서는 CSS의 Z-index요소와 Background 요소 그리고 Flex요소에 대해 알아보도록 하겠습니다.

 

Z-index

Z-index 요소는 우선순위 지정자로 우리가 웹 브라우저상에서 이미지들을 볼때 어떤 것이 더 사용자에게 가까운지를 나타내는 요소입니다.

예를 들어 3개의 이미지가 겹쳐있을 때 어떤 이미지가 먼저 보일지를 결정합니다.

 

z-index: n; - z-index에 숫자를 입력해서 우선 순위를 정한다. 숫자가 높을 수록 가장 위에 이미지이다.

 

 

실행 결과

 

노란색 원에 z-index값을 가장 높게 줘서 가장 먼저 보이는 결과가 나왔다.

 

 

 

 

item3에게 가장 높은 z-index값을 주고 그 다음 z-index값을 item1에 주어서 item2가 더 나중에 생겼음에도 불고하고 item1보다 뒤에 있는 것을 확인할 수 있다.

 

Background 요소

background 요소의 종류는 아래와 같다.

• background : linear-gradient()
• background-color
• background-image
• background-repat
• background-position
• baakground-size
• background-attachment

 

background : linear-gradient() 요소는 그라데이션 컬러를 백그라운드 요소로 삽입하는 기능이다.

• 색삭1 | 색상2 : 상하로 색 2개 지정
• 방향 | 색1 | 색2 : 해당 방향으로 색상 2개 지정(ex, 90deg blue red)
• 방향 | 색1 | 색1의 비중 | 색2 : 색상 1의 비중을 %로 지정
• 방향 | 색1 | 색2 | 색3 : 색상 3개 사용

등 다양한 방법으로 그라데이션을 지정해 줄 수 있다.

 

background-color는 요소의 지금까지 자주 사용했었던 요소의 배경 색상을 지정해주는 요소이다.

• 기본값은 투명이다.
• 따로 색상을 지정 가능하다.

 

background-image는 요소의 배경 이미지를 삽입하는 요소이다.

• 기본값은 이미지가 없다.
• url("경로")로 이미지 경로를 지정해준다.
• background-image : url("");

 

 

 

background-repeat 요소는 배경의 이미지 반복을 지정 해주는 요소이다.

• 기본값은 repeat으로 이미지를 수직, 수평 반복 시킨다.
• repeat-x는 이미지를 수평반복시킨다.
• repeat-y는 이미지를 수직 반복 시킨다.
• no-repeat은 이미지를 반복 시키지 않는다.

 

 

 

첫 번째 이미지는 background-repeat : repeat-x; 값을 주어 x축만 반복 시켰고, 두 번째 이미지는 no-repat을 주어 한 장의 이미지만 표시 했다.

 

background-position는 요소의 배경 이미지 위치를 조정 하는 요소이다.

• 기본 값은 0% 0%로 0%~100% 사이 값을 줄 수 있다.
• top, bottom, left, right, center 방향으로 방향을 지정할 수 있다.
• px, em, rem 등 단위를 지정 가능하다.

 

 

첫 번째 이미지는 position은 background-position : center;로 지정하여 이미지가 중앙에 나오고 있다.

두 번째 이미지는 position을 background-position : 100px 30px로 두어서 왼쪽 에서 100px 멀어지고 위에서 30px 떨어진 위치에 이미지가 나타난다.

 

background-size 요소는 배경 이미지 크기를 조정하는 요소이다.

• 기본값은 auto로 지정 되어있고 이미지의 실제 크기로 지정된다.
• 단위는 px, em, rem 등 단위로 지정할 수 있다.
• cover: 비율을 유지, 요소의 더 "넓은" 너비에 맞춘다.
• contain 비율을 유지, 요소의 더 "짧은" 너비에 맞춘다.

 

 

첫 번째 이미지는 contain을 사용해서 더 짧은, 세로를 기준으로 이미지를 맞춰서 이미지가 공간안에 들어갈 수 있도록 크기를 조정한다.

반면 두 번째 이미지는 cover를 사용해서 더 넓은, 가로를 기준으로 이미지를 맞춰서 전체 이미지가 공간안을 초과한다.

 

background-attachment 요소는 요소의 배경 이미지 스크롤 특성으로 배경에 스크롤 기능을 추가할 수 있다.

• scroll : 기본값으로 설정되어있다. 이미지가 요소를 따라서 같이 스크롤 된다.
• fixed : 이미지가 뷰포트에 고정, 스크롤x
• local : 요소 내 스크롤 시 이미지가 같이 스크롤 된다.
• fixed는 뷰포인트가 기반이기 때문에 웹 페이지를 스크롤 하면 이미지도 같이 움직이는 것 처럼 보인다.

 

display: flex

flex요소는 자식을 가지고 있는 부모에게 주었을 때 수직 요소일 때, 이 수직 요소들을 수평 요소로 바꿔 주는 역할을 한다.

부모에게 display: flex를 주면 부모는 Flex Container가 돼고, 자식들은 Flex Items이라고 부른다.

 

flex-direction를 통해서 추 축을 설정할 수 있다.

• row : 행 축 (좌 -> 우), 기본값
• row-reverse : 행 축 (우 -> 좌)
• column : 열 축 (위 -> 아래)
• column-reverse : 열 축( 아래 -> 위 )

 

 

출력 결과

column

 

첫 번째 출력 결과는 flex-direction : row값을 주었고 두 번째 출력 결과는 column을 주어 세로 방향으로 나왔다.

 

flex-wrap은 Flex Item 묶음여부를 선택하는 것으로 자동으로 줄이 바뀐다.

• nowrap : 묶음(줄 바꿈) 없음
• wrap : 여러 줄로 묶음
• wrap-reberse : wrap의 반대 방향으로 묶음

 

출력 결과

 

출력 결과를 보면 원래 한줄이던 결과가 두 줄로 나오는 것을 확인할 수 있다.

원래는 많은 양의 상자가 한줄로 나오면서 크기가 줄어들지만, wrap을 사용하면 크기가 줄어들지 않고 원래 크기의 상자가 나오면서 넘치는 양은 아랫 줄로 내려오게 된다.

 

justify-content는 주 축의 정렬 방법이다.

• flex-start : 기본값, Flex Items를 시작점으로 정렬
• flex-end : Flex Items를 끝점으로 정렬
• center : Flex Items를 가운데 정렬
• space-between : 각 Flex Items 사이를 균등하게 정렬
• space-around : 각 Flex Items의 외부 여백을 균등하게 정렬(시작점과 끝점은 다른 곳보다 작은 여백을 가진다)
• space-evenly : 모든 Flex Items여백을 균등하게 정렬( 모든 여백이 균등하다 )

 

align-items은 교차 축의 한 줄 정렬 방법이다.

• stretch : 기본값, Flex Items를 교차 축으로 늘림
• flex-start : Flex Items를 각 줄의 시작점으로 정렬
• flex-end : Flex Items를 각 줄의 끝점으로 정렬
• center : Flex Items를 각 줄의 가운데 정렬
• baseline : Flex Items를 각 줄의 문자 기준선에 정렬

 

 

align-content 교차 축의 여러 줄 정렬 방법

• stretch : 기본값으로 Flex Items를 시작점으로 정렬
• flex-start : Flex Items를 시작점으로 정렬
• flex-end : Flex Items를 끝점으로 정렬
• center : Flex Items를 가운데 정렬
• space-between : 각 Flex Items 사이를 균등하게 정렬
• space-around : 각 Flex Items의 외부 여백을 균등하게 정렬