[포스코x코딩온] 웹 풀스택 과정 1주차 회고 | CSS 속성 (2)

Position

: 요소의 위치를 지정할 수 있다.

• static 기본값
• relative 자신을 기준으로 배치

<style>
  div {
  	position: relative;
  	top: 30px;
  	left: 30px;
  }
</style>

• absolute 부모요소를 기준으로 배치 (부모요소가 relative이어야 함. 아니라면, relative 나올 때까지 올라감)

<style>
  div {
  	position: relative;
  }
  .item {
  	position: absolute;
  	top: 30px;
  	right: 30px;
  }
</style>

• fixed 뷰포트를 기준으로 배치 (따라서, 항상 고정이 되어 있음)

※ absolute fixed로 지정된 요소는 Block으로 변경된다.

 

Z-index

: 요소가 쌓이는 순서를 결정할 수 있다.

• z-index 값이 클수록 더 위에 쌓임
• 정수로만 표현 가능
• static 요소에는 z-index 설정해도 의미X

 

Background 속성

1) back-ground-color

• transparent로 투명하게도 할 수 있음

2) background: linear-gradient()

• 방향, 색상 지정하여 그라데이션 넣을 수 있음

3) background-image

• url()로 이미지 주소 입력하여 이미지 삽입.

<style>
  div {
  	background-color: orange;
  	background-image: url(이미지주소);
  	width: 500px;
  	height: 500px;
  }
</style>

4) background-repeat

• repeat 수평, 수직으로 이미지 반복
• repeat-x 수평(x축)으로만 이미지 반복
• repeat-y 수직(y축)으로만 이미지 반복
• no-repeat 반복X

5) background-position

• top bottom right left center 으로 방향 지정 가능
• ~px ~px 직접 x축, y축 위치 지정 가능

6) background-size

• auto 이미지의 실제 크기
• cover 가로/세로 중 더 넓은 너비에 이미지 크기가 맞춰짐
• contain 가로/세로 중 더 좁은 너비에 이미지 크기가 맞춰짐
• ~px ~px 크기 직접 지정 가능

7) background-attachment

• scroll 이미지가 요소를 따라서 '같이' 스크롤 됨
• fixed 이미지가 뷰포트에 고정된 상태로 스크롤 되지 않음
• local 요소 내에서 스크롤 시, 이미지도 스크롤 됨

 

display: flex;

• 부모요소의 display 속성을 flex로 설정하면, 자식요소들을 수평으로 정렬시킨다.
• 아래의 다양한 속성을 이용하여, 수평으로 정렬된 자식요소들의 배치를 조정할 수 있다.
• 수평 정렬된 flex item들의 width는 갖고 있는 내용물의 길이만큼 & height는 부모요소만큼으로 변한다.

1) flex-direction: 주 축을 설정

• row x축 (좌→우)
• column y축 (위→아래)
• row-reverse x축에서 반대 방향 (우→좌)
• column-reverse y축에서 반대방향 (아래→위)

2) flex-wrap: 줄 바꿈 여부 설정

• nowrap 줄 바꿈 없음
• wrap 줄 바꿈
• wrap-reverse 반대 방향으로 줄 바꿈

3) justify-content: 주 축 기준으로 flex items를 정렬

• flex-start 시작점에서 정렬
• flex-end 끝점에서 정렬
• center 가운데 정렬
• space-between 각 item 사이를 균등하게 하여 정렬
• space-around 각 item의 외부 여백을 균등하게 정렬
• space-evenly item 사이와 외부 여백을 균등하게 정렬
  

  

4) align-items: 교차 축 기준으로 flex items를 정렬

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

5) align-content: 교차 축 기준으로 한 묶음의 content를 정렬

• stretch 시작점에서 정렬
• flex-start 시작점에서 정렬
• flex-end 끝점에서 정렬
• center 가운데 정렬
• space-between space-around space-evenly

6) 그 외

flex-flow: flex-direction, flex-wrap을 합친 속성
order: 정렬된 요소들에게 순서를 부여하는 속성 (큰 값일수록 뒤로 이동)
align-self: 해당되는 요소 하나에 대해서만 배치 설정 가능