[CSS] 클론 코딩하며 알게된 기능들 정리

scss 인강을 들으면서 몰랐던 css 기능들에 대해서도 정리를 하려고 한다.

1) text 속성

1) text-transform

• 문자 변환 기능
  • uppercase, lowercase capitalize 등이 있다

2) text-shadow

• 텍스트에 그림자 효과를 추가
  text-shadow: <가로거리> <세로거리> <번짐 정도> <색상>
text-shadow: 1rem 4rem 1rem rgba(black, .5)

2) backface-visibility

• 요소의 뒷면이 사용자를 향할때 보일지 말지를 정하는 기능
  • visible, hidden
    `

3) background

1) background-clip

• 배경의 이미지나 배경색을 어디에 넣을지 정하는 속성
  • border-box, padding-box, content, text 등이 있다.
  • text - 요소의 배경을 글자에만 적용

2) background-image

• 배경 그림을 설정하는 속성

< linear-gradient >
backgroud color를 지정하기 위한 속성으로 시작점과 종료점에 지정할 2개의 색상이 기본적으로 필요하고, 중간 지점에 들어갈 컬러는 원하는만큼 지정 할 수 있다. 또한 색이 변하는 각도를 지정해줄 수 있다.

background-image: linear-gradient(to right bottom, $color-primary-light, $color-primary-dark);

background-image: linear-gradient(to right, red, yellow, blue); /* 중간 컬러를 넣을 수 있다. */

3) background-blend-mode

• 배경을 혼합했을 때의 상태를 설정(속성 값 많음)
• screen : 배경의 혼합 상태를 밝게 정의
• multiply : 배경의 혼합 상태를 어둡게 정의

4) background-position

• 배경 이미지의 위치를 지정하는 속성
  left top 왼쪽 상단
  left center 왼쪽 중앙
  left bottom 왼쪽 맨아래
  right top 오른쪽 상단
  right center 오른쪽 중앙
  right bottom 오른쪽 맨아래
  center top 가운데 상단
  center center 정 가운데
  center bottom 가운데 맨아래

• 한가지만 쓰면 나머지 하나는 자동으로 center가 된다.

4) animation

1) animation-timing-function

• linear : 일정한 속도
• ease : 기본 값. 천천히- 빨리 - 다시 천천히
• ease-in : 애니메이션 효과가 천천히 시작
• ease-out: 애니메이션 효과가 천천히 끝난다.
• ease-in-out: 천천히 시작해서 천천히 끝
• cubic-bezier(n,n,n,n) : 사용자 정의 따라 진행

2) animation-fill-mode

• CSS 애니메이션이 실행 전과 후에 대상에 스타일을 적용하는 방법을 지정
• forwards : 실행 된 애니메이션의 마지막 keyframe 에 의해 설정된 계산 값을 유지
• backwards : 첫번째 keyframe에 정의 된 값을 적용하고 animation-delay 기간 동안 이 값을 유지.
• both : 앞뒤 양쪽 모두의 규칙을 따르므로 애니메이션 속성이 양방향으로 확장

5) transform 속성

1) rotate()

요소를 지정한만큼 회전

• transform: rotateX(Ndeg) : x축 기준 N도 만큼 회전
• transform: rotateY(Ndeg) : y축 기준 N도 만큼 회전
• transform: rotate(Ndeg) : N도 만큼 회전

2) skew()

요소를 지정한만큼 x축 또는 y축으로 기울임

• transform: skewX(10deg) : x축 기준 10도 만큼 기울임
• transform: skewY(15deg) : y축 기준 15도 만큼 기울임
• transform: skew(20deg) : 20도 만큼 기울임

6) object-fit

• img나 video같은 대체 요소의 컨텐츠 크기를 어떤 방식으로 조절해 요소에 맞출것인지 정함.
  • 대체요소 : 자신의 표현 결과가 CSS의 범위를 벗어나는 요소로서, CSS 서식 모델과는 분리된 외부 객체인 요소입니다.
    (iframe, video, img embed)
• contain: 가로 세로비를 유지 하며 요소 컨텐츠 박스 내부에 들어가도록 크기 맞춤 조절.
• cover : 대체 콘텐츠의 가로세로비를 유지하며, 요소 콘텐츠 박스를 가득 채움. 서로의 가로세로비가 일치하지 않으면 객체 일부가 잘려나간다.
• fill: 요소 컨텐츠 박스 크기에 맞춰 대체 요소의 크기 조절. 컨텐츠가 컨텐츠 박스를 가득 채움.

7) perspective

• 원근감을 지정하는 속성. 속성값이 작을 수록 가깝게, 클 수록 멀게 보인다.
• 적용 대상 : 관찰 대상의 부모요소
  perspective: 150rem;

8) clip-path

• 요소의 범위를 잘라내는 속성

  https://developer.mozilla.org/ko/docs/Web/CSS/clip-path

polygon(0 0, 100% 0, 100% 85%, 0 100%)`
// x1 y1 x2 y2 x3 y3 x4 y4 

9) box-decoration-break

• 컬럼 및 줄바꿈시 테두리와 패딩의 방식을 설정
• clone : 각각의 테두리 및 패딩이 독립적으로 적용
• slice : (기본값) 하나의 테두리와 패딩이 모든 박스에 적용

10)outline

• border 속성보다 더 외곽에 위치
• 테두리와 유사하지만 공간을 차지 하지 않으며 사각형이 아닐 수도 있다.
  1) outline-offset
  : 기본 값은 0이며, 테두리의 가장자리와 외곽선 사이의 여백을 지정

11) column

• column-count: 칼럼의 갯수 설정
• column-gap : 칼럼 사이의 간격 설정
• column-rule : 칼럼 사이에 들어갈 라인의 스타일을 지정

&__text {
    font-size: 1.4rem;
    column-count: 2;
    column-gap: 4rem;
    column-rule: 1px solid $color-gray-lite-2;
    -webkit-hyphens: auto;
    hyphens: auto;

    @include respond(phone) {
      font-size: 1.2rem;
      column-gap: 2rem;
    }
  }

12) shape-outside

이미지에 float을 주고 shape-outside로 요소의 테두리를 설정해주면, 자연스럽게 텍스트가 붙는다.

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Shapes

13) filter

• 흐림 효과나 색상 변형 등 그래픽 효과를 요소에 적용

&:hover &__img {
    transform: translateX(-3.5rem) scale(1);
    filter: blur(3px) brightness(80%);
  }

https://developer.mozilla.org/ko/docs/Web/CSS/filter

14) Media Query

1) min-resolution
: 출력 장치의 해상도. 해상도는 dpi나 dpcm으로 정해진다.

@media (min-resolution: 192dpi){
	...
}

//최소 192dpi 이상 해상도를 지닌 장치에 적용

2) orientation(가로, 세로 모드 확인)

@media (orientation: portrait) {
	/* Portrait 모드일 때 적용할 CSS */
}

@media (orientation: landscape) {
	/* Landscape 모드일 때 적용할 CSS */
}

15) figure 태그

사실 css속성은 아니지만 html5에서 figure 태그를 처음 써봐서 이게 무엇인지 알아 보려고 한다.

• <figure>요소는 독립적인 컨텐츠를 표현하고 <figcaption>요소를 사용해 설명을 붙일 수 있다.
• 주로 삽화, 다이어그램, 사진 등과 같이 문서 주요 흐름과는 독립적인 컨텐츠를 정의할때 사용한다.

 <section class="gallery">
            <figure class="gallery__item gallery__item--1">
                <img src="img/gal-1.jpeg" alt="Gallery Image 1" class="gallery__img">
            </figure>
            <figure class="gallery__item gallery__item--2">
                <img src="img/gal-2.jpeg" alt="Gallery Image 2" class="gallery__img">
            </figure>
            <figure class="gallery__item gallery__item--3">
                <img src="img/gal-3.jpeg" alt="Gallery Image 3" class="gallery__img">
              </figure>
</section>

https://developer.mozilla.org/ko/docs/Web/HTML/Element/figure

16) grid

https://studiomeal.com/archives/533