포스코x코딩온 웹 풀스택 양성과정

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

Codult 2024. 3. 28. 11:05
728x90

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: 해당되는 요소 하나에 대해서만 배치 설정 가능

 
728x90