패스트캠퍼스 메가바이트스쿨 Day9 (2주차 목요일 - CSS 속성 2)

ctaaag·2022년 4월 21일

패스트캠퍼스 메가바이트스쿨 프론트엔드

목록 보기

11/41

Today Topic : CSS 속성 2

🗝 Keywords

✅ 배경

✅ 배치

✅ flex container

✅ flex items

✅ transition (전환)

✅ transform (변환)

1. 배경

  <div></div>

div {
  width: 200px;
  height: 200px;
  background-color: orange;
  background-image: url(./스크린샷\ 2022-04-17\ 오후\ 5.05.43.png); 
  background-size: 200px;
  background-repeat: no-repeat;
  background-position: center;
 
}

🚀 배경

background-color : 배경 색깔을 넣을 수 있음. transparent(투명함)

background-image : url(경로)를 하면 이미지 삽입이 가능함. none은 이미지 없음으로 나옴

background-size : 배경 이미지의 사이즈를 결정할 수 있음. 만약 배경이미지가 배경사이즈와 다르다면 반복이되거나, 짤리게 됨

background-repeat: 배경이미지의 반복을 설정할 수 있음 repeat-x는 수평으로, repeat-y는 수직으로 반복함. no-repeat은 반복 없음으로 설정함.

background-position: 배경 이미지의 위치를 방향으로 입력하거나, x,y축에 값을 넣어 입력할 수 있음.

background-size: 이미지의 실제 크기가 자동으로 입력되는데, px로 조정을 하거나 cover혹은 contain으로 설정을 할 수 있음
업로드중..

background-attachment : 이미지 스크롤 특성. scroll(이미지가 요소를 따라서 같이 스크롤) fixed(이미지가 뷰포트에 고정, 스크롤x)

2. 배치

🚀 position

top,bottom,left,right num px :해당 방향 기준으로 얼마만큼 떨어져있는지 위치를 나타낼 수 있음

static : 기본값

relative : 요소 자신을 기준으로 함. relative로 포지션이 변경되더라도, 원래 있던 자리에 존재하는 것처럼 작용함. 즉 우리 눈에 보이는 것은 허상된 포지션이라고 보는게 맞음. 실제로는 거의 사용되지 않음

absolute : 위치상 부모 요소를 기준. 특정한 포지션에 relative 관계를 만들어 줘야만 위치상 부모요소로 인식함. 그렇지 않으면 뷰포트 기준(조상요소)으로 진행될 수 있음.

fixed : 뷰포트(브라우저)를 기준으로 함

🚀 요소쌓임 순서 (z-index)

어떤 요소가 사용자와 더 가깝게 있는지(위에 쌓이는지) 결정하는 것.

요소에 position 속성의 값이 있는 경우 위에 쌓임.(기본값 static 제외)

위의 조건이 같은 경우, z-index 속성의 숫자 값이 높을 수록 위에 쌓임. 일반적인 요소보다 더 뒤로 밀고 싶으면 -1을 사용함.

위의 조건까지 같은 경우, HTML의 다음 구조일 수록 위에 쌓임

위와 같은 경우에는 1번,2번이 포지션 속성값이 있고, z-index는 없는 상태로 동일함. 이럴 때는 html에서 2번이 1번 다음에 위치해있기 때문에 2번이 위에 올라와있음.

만약 1번에 z-index 값을 넣어주게 되면 1번이 위에 쌓임.

3번째 아이템에 z-index값만 넣더라도 여전히 제일 밑에 있음. 포지션 값이 없기 때문

🚀 position 속성 설정시, display 변경

position 속성중에 absolute, fixed가 있다면 display가 block으로 자동 설정됨

relative는 해당이 안됨

3. flex(정렬) container

display: flex;
display: inline-flex;

🚀 flex

플렉스 컨테이너와 아이템 각각에 부여할 수 있는 속성이 따로 있음.

flex는 블록요소와 같이 컨테이너를 정의하고, inline-flex는 인라인 요소와 같이 플렉스 컨테이너를 정의함

🚀 flex direction

주 축을 설정(수평 혹은 수직)함. 수평정렬을 할 것이냐 혹은 수직 정렬을 할 것이냐.

row 수평정렬 좌->우

row-reverse 수평정렬 우->좌

column 수직정렬 좌->우

column-reverse 수직정렬 우->좌

🚀 flex-wrap

묶음(줄 바꿈) 여부

no wrap : 기본 값. 요소들의 크기가 컨테이너 크기보다 클 경우 요소의 크기가 강제로 줄어서 컨테이너 크기에 맞게 됨.

wrap : 요소의 크기가 컨테이너보다 크면 크기를 유지하면서 칸이 모자라면 줄바꿈을 한다.

🚀 justify-content

주 축(보통 수평정렬)의 정렬 방법

flex-start : 기본 값. 주축의 시작점에서부터 시작

flex-end : 주축의 끝 점에서부터 시작. 아이템의 순서가 바뀌는 것이 절대 아님. 단순히 정렬만 바뀐 것임

center : 주축의 기준점. 즉 중앙 정렬을 함

🚀 align-content

교차 축의 여러 줄 정렬 방법

stretch : 기본 값. 시작점으로 정렬. 두 번째 그림에 해당

flex-start : 시작점으로 정렬. 세 번째 그림에 해당

flex-end : 끝 점으로 정렬

center : 가운데 정렬

🚀 align-items

교차 축의 한 줄 정렬방법. align-content보다 상대적으로 많이 쓰임. 그리고 한 줄일 때는 무조건 align-items를 해야만 함.

stretch : 교차 축으로 늘림

flex-start : 시작점으로 정렬.

flex-end : 끝점으로 정렬

4. flex items

🚀 flex-order

flex item의 순서를 결정하는 요소

🚀 flex-grow

flex item의 증가비율을 조정함. 이 때 증가하는 부분은 컨텐츠의 남은 부분에 대해서만 적용이 됨.

🚀 flex-shrink

flex item의 감소 너비 비율을 조정함. 수평정렬을 할 때 요소가 찌그러지는 것이 싫다면 적용이 가능함.

🚀 flex-basis

flex item의 공간 배분 전 기본 너비. 요소의 content.

5. 전환

🚀 transition

transition: 속성명 지속시간 타이밍함수 대기시간; 설정가능

요소 전환(시작과 끝)시의 효과를 지정하는 단축 속성

지속시간은 필수로 입력해야함

div {
  width:100px;
  height:100px;
  background-color: orange;
  transition: 1s; => 1초 동안 모든 속성이 전환됨
  transition: width 1s => width 속성값만 1초로 전환됨
  transition: width 1s .5s => 1초로 진행되며, 0.5초 동안 대기함 
  transition: 
  	width .5s, 
    background-color .2s;
}

div:active {
  width: 300px;
  background-color: royalblue;
}

🚀 transition-property

전환 효과를 사용할 속성 이름을 지정할 수 있음. 따로 지정하지 않으면 all이 적용됨

속성이름 : 전환 효과를 사용할 속성 이름 명시

🚀 transition-duration

transition : a속성 a시간, b속성 b시간 이런식으로 적용하면 a속성은 a시간 b속성은 b시간으로 전환효과가 적용됨

🚀 transition-delay

전환효과가 몇 초 뒤에 시작할지 대기시간을 지정

transition-timing-function

전환효과의 타이밍 함수를 지정

easing.net 이나 easing function mdn 사이트에 들어가면 자세한 내용 알 수 있음

6. 변환

🚀 transform 2D 변환 함수

translate, scale, rotate, skew로 이동,크기,회전,기울임을 변환할 수 있다.
해당 속성 X(n), Y(n)를 붙여주면 각각 x축, y축만 변환시킬 수 있음

🚀 transform 3D 변환 함수

2D와 마찬가지로 translate, scale, rotate, skew로 이동,크기,회전,기울임을 변환할 수 있다.

해당 속성 Z(n), 3d(n)를 붙여주면 각각 z축. 즉, 3d로 변환시킬 수 있음

3d는 원근법이 적용되어야만 해서, 속성 맨 앞에 perspective(px)를 꼭 붙여줘야만 함

🚀 perspective 속성과 함수 차이점

perspective는 함수로 설정할 수도 있고, 부모 요소에 속성으로 적용할수도 있음.

🚀 backface-visibility
div {
  transform: rotateX(180deg);
  backface-visibility: hidden;
visibility로 반대면을 숨겨서 클릭하면 다른 정보를 볼 수 있게 만들 수 있음.

실제 스타벅스 웹페이지 사이트에서 사용이 되었음