[데브코스 FE] 1주차 세번째 수업 2024/07/18

3번째 수업에서는 악명높은 css의 grid, position에 대해 배웠다.

그리고 알고있었지만 낯설었던 가상요소와 transform에 대해서도 배웠다.

grid를 사용하면 레이아웃을 좀 더 자유롭고 유연하게 할 수 있고

position과 가상요소, transform을 이용하면 이미지나 아이콘등을 자유롭게 원하는 위치에 배치할 수 있다.

참고로 실습시간에 진행했던 카드뒤집기는 따로 블로그 글으로 작성해두었다!

2024.07.18 - [CSS] - CSS 만으로 카드 뒤집기 애니메이션 구현해보기(transform)

CSS 만으로 카드 뒤집기 애니메이션 구현해보기(transform)

오늘은 카드에 마우스를 올렸을때, 카드가 뒤집히는 애니메이션을 구현해보고자 합니다. 카드 3개를 만들기 위한 기본적인 html 뼈대 구조,애니메이션을 구현하기 위한 사전 css 지식, 마지막으

developer-dalsu.tistory.com

역시 내가 알고 있던 것은 기본 지식뿐이었는데

지난 목요일 실습을 통해 각 개념을 어떻게 실무에서 활용하는지 직접 느낄수 있었다.

세번째 수업때 새로배운 내용들을

따로 정리해보고자 한다.

학습내용

가상요소 (+ 가상 클래스 선택자)
grid 그리드
transform (+ perspective)
수업 때 질문들 Q&A

1. 가상요소

css파일에서 ::before, ::after를 본 적이 있는가?!!

바로 이것이 가상요소 선택자이다!!

가상 요소 선택자는 CSS에서 실제로 존재하지 않는 요소를 만들거나 범위를 만들어서

스타일을 적용할 때 사용하는 선택자 종류 중 하나다.
쉽게 말해, html에는 존재하지 않지만(코드상으로 실제 존재 X) CSS를 통해 가상으로 만들어 표현하고자 할 때 사용하는 선택자라고 생각하면 된다.

사실, 가상요소를 알기전까지는 <div>를 이용해서 앞뒤로 덕지덕지 스타일을 꾸며나갔다.

하지만 여기서 문제는 똑같은 코드가 계속해서 반복된다는 것이다.

이렇게 같은 코드가 반복적으로 사용되면 html 코드 양이 길어져서

추후에 코드를 직관적으로 파악하기도 힘들고

이를 유지 및 보수하는데도 어려움이 생긴다.

(실제로 중첩 div가 너무많이 생겨서 가독성이 너무 떨어졌었다.)

이번 가상요소 실습을 통해 아이콘, 배경화면 등을 구현하는 방법을 새로 알게되었다.

언제 쓰는것이 좋은가?

가상요소는 주로 정적인 데이터를 활용하는 것이 좋다.(아이콘, 사진 및 배경 등)

가상요소에는 이벤트리스너가 붙지 못하지때문에 동적이 요소에 가상요소를 활용하는건 좋지 않다.

사용법

::before, ::after을 넣고자 하는 요소를 선택하고

해당 요소의 앞, 뒤로 들어갈 content 속성값을 지정하면 된다.

content 속성값으로는 위와 같이 텍스트뿐만 아니라 이미지, 아이콘, 변수, 함수, HTML 속성도 가능하다.

<body>
    <h1>CSS Selector</h1>

    <p>font-size/p> // p태그에 가상요소 적용
 </body>

p::before {
  content: "CSS : ";
  color: lightcoral;
  font-weight: 700;
}

::before를 이용하여 가상요소를 적용한결과,"font-size"라는 문자 왼쪽에 밝은코랄색의 "CSS : "글자가 추가된 것을 확인할 수 있다.

🔍가상 클래스 선택자 + 가상 요소 선택자

실습에서 :hover등의 가상 클래스 선택자를 이용하여특정 조건을 만족할때 가상 요소가 등장하도록도 만들어보았다.

예를 들어, 특정 요소에 :hover가 되었을 때 가상 요소 선택자의 텍스트가 옆에 나오도록 하는 등의

사용자의 행위에 따라 가상 요소 선택자를 사용할 수도 있다.

css 선택자는

(hover될 요소):hover::before

처럼 작동순서대로 요소 -> hover -> before 이런식으로작성해주면 된다.

p:hover::after {
  content: "";
  height: 3px;
  width: 100%;
  display: block;
  background-color: lightblue;
  margin-top: 10px;
}

이 코드는

p태그에 마우스를 올렸을때

p태그에 가상요소 스타일을 적용하겠다는 의미이다.

물론 hover와 before 선택자가 적용되는 요소가 서로 다르다면

그 사이에 요소를 추가해줄 수도 있다.

(hover될 요소):hover(가상요소 적용요소)::before

title:hover p::after {
  content: "";
  height: 3px;
  width: 100%;
  display: block;
  background-color: lightblue;
  margin-top: 10px;
}

이 코드는

title태그에 마우스를 올렸을때

p태그에 가상요소 스타일을 적용하겠다는 의미이다.

주의할 점

보통 부모 박스에서 자식 요소를 고정시키거나 정확한 위치 배치를 위해

가상요소를 적용하고자 하는 부모에 "position:relative"를 부여하고,

자식인 요소에 "position:absolute" 및 top,bottom 등을 부여한다.

참고로 top과 bottom은 함께쓸 수 없고,

같은 논리로 left와 right를 함께쓸 수 없다!

또 position을 쓰다보면 요소들이 겹치는 경우도 생기는데,

이때 더 먼저보이고싶은 한 요소에 z-index를 부여하여 해결한다.

2. grid(그리드)

grid는 화면을 배치하는 display 값 중 하나이다. (ex - display:grid)

그리드는 각 칸으로 구성되어있는데,

각 열과 행마다 고유 번호가 존재해서

이를 이용하여 영역들을 합칠수도, 간격을 조정할수도 있다.

자세한 설명을 할 수 있을래야 하겠지만 말솜씨가 그렇게 좋지않아서 ^^;

grid 개념에 대한 자세한 설명은 이 블로그 글을 참고하면 좋을 것 같다.

여기서는 실습시간에 배운 여러 코드들을 다시 복기해보고자 한다!

grid-template-columns: 100px 100px 100px; // 100px의 너비를 가진 3단으로 가로방향 구성
    
grid-template-columns: 1fr 2fr 1fr; // 1 : 2 : 1 의 비율로 구성

grid-template-columns: repeat(2, 1fr, 2fr); // 1:2의 비율을 2번반복
    
grid-auto-rows: 100px // grid범위인 명시적영역이 아닌 , 암시적 영역인 경우의 처리.(작성해둔 그리드에 포함되지 않는)

grid-column: span 2; // 현재위치기준 두 행차지 처리

인상깊었던건 새로운 단위인 'fr'와 repeat()를 활용한 방법이었다.

만약에 10칸을 전부 1 2 1 2... 이런 비율로 채워야하는데

grid-template-columns: 1fr 2fr 1fr 1fr... 이런식으로 노가다 코드를 작성하는 것은... 그야말로 헬이다

이럴때 repeat(반복횟수, 비율1, 비율2 ....) 를 이용하여

코드를 간결하게 작성해준다. (꿀팁^^~)

3. transform (+ perspective)

주로 인터랙티브한 애니메이션을 적용하거나

요소의 위치를 조정할때 transform을 사용한다.

다음은 수업시간에 배웠던 꿀팁들이다!

🔍컨테이너 안의 div 중앙배치

border: 5px solid lightgray;
  width: 50%;
  height: 50%;
  background-color: antiquewhite;

position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

컨테이너(부모)에는 반드시 "position:relative"를 적용했다고 가정한다.

transform: translate(-50%, -50%);

자식요소인 자기 사이즈의 절반(-50%)만큼 깔쌈하게 이동해준다.

이게 왜필요하냐~ 싶은데

css를 많이 사용하다보면 느끼겠지만

top:50% left:50% 이런식으로 중앙배치하려고 시도하면

div의 왼쪽꼭짓점을 기준으로 배치되기 때문에

전~혀 중앙배치가 되지 않는다.

이때 transform: translate(-50%, -50%);을 이용하여

div의 절반 너비와 높이만큼 다시 back 이동해주면

중앙배치가 된다!

🔍perspective

transform: perspective(800px) rotateX(45deg);

transform의 값을 적어줄때

이와같이 perspective값도 같이 적어주는 경우가 있다.

perspective는 원근감, 즉 멀리보이는 시각적 효과를 부여한다.

transform을 통한 애니메이션적용시 값이 클수록, 시선이 더 멀리있어 더 크게 회전되어 보이게 된다.

또한 transform의 값으로는 속도함수도 활용할수 있어

지정된 값이나 문자열 뿐만 아니라 "cubic-bezier"등 그래프 속도 함수로

애니메이션을 더 다양하게 표현할 수 있다.

다양한 속도함수 그래프 살펴보기

https://easings.net/ko

Easing Functions Cheat Sheet

Easing functions specify the speed of animation to make the movement more natural. Real objects don’t just move at a constant speed, and do not start and stop in an instant. This page helps you choose the right easing function.

easings.net

perspective에 대해 자세한건 맨 위에 첨부했던 "카드 뒤집기"실습 글에 정리해두었다!

4. 수업 때 질문들(Q&A)

Q : transform을 여러개 적용하고 싶으면 어떻게 해야하나요?

A: transform을 여러 줄에 걸쳐서 적으면, 우선순위에 따라 맨 아래 transform만 적용됩니다.

따라서, 한 줄에 병렬로 작성하여 해결합니다.

  transform: translate(-50%, -50%) rotate(45deg);

Q : transition: transform 0.3s;와 transition: 0.3s; 의 차이는 무엇인가요?

A: transition에는 초 앞에 all 이 생략되어있어서, 그냥 초만 적으면 transform 뿐만 아닌 style 모두 전환에 포함됩니다. 따라서, 애니메이션만 적용하기 위해 transform 키워드를 붙여줍니다.

(요약)

transition: transform 0.3s;-> transform 속성에 변경이 있을 때에만 전환 효과가 적용

transition: 0.3s; 의 차이는 무엇인가요?-> 모든 속성에 대해 전환 효과 적용

3일차에도 CSS를 공부했는데

이때 배운 것들이 CSS 핵심 내용이면서 복잡한 내용이다보니

낯선 내용이 많아 실습따라가는데 애를 많이 먹었다.

그래도 꿀팁들이랑 수업때 궁금했던 부분 많이 알아가서

간지러운 부분이 긁힌것처럼 시원하고 상쾌한 것 같다!

낼 수업때에도 css에 시달리겠지만 아좌좌 빠이팅

'TIL(Today I Learn)' 카테고리의 다른 글

[데브코스 FE] 2주차 두번째 수업 2024/07/23 (0)	2024.07.26
[데브코스 FE] 2주차 첫번째 수업 2024/07/22 (2)	2024.07.25
[데브코스 FE] 1주차 네번째 수업 2024/07/19 (3)	2024.07.24
[데브코스 FE] 1주차 두번째 수업 2024/07/17 (3)	2024.07.21
[데브코스 FE] 1주차 첫번째 수업 2024/07/16 (1)	2024.07.21