[HTML+CSS+자바스크립트] 6장 CSS 필수 속성 다루기 (~276p)

안녕하세요!

<코딩 자율학습 HTML+CSS+자바스크립트> 멘토를 당담하게 된 박브레드입니다.

오늘은 여덟 번째 날로, CSS 공부 네 번째 날입니다!

CSS는 재밌으니까 조금만 더 힘내서 공부 시작해볼까요?

 

오늘 공부할 내용은 다음과 같습니다.

 

🏃공부할 내용(223~276p)

5. 위치 속성으로 HTML 요소 배치하기

6. 전환 효과 속성 적용하기

7. 애니메이션 속성으로 전환 효과  제어하기

8. 변형 효과 적용하기

9. 웹 폰트와 아이콘 폰트 사용하기

 

5. 위치 속성으로 HTML 요소 배치하기

---

5.1 position 속성

position 속성은 HTML 요소를 기본 흐름에서 벗어나 좌푯값에 따라 배치할 때 사용합니다.

position은 정말 무엇보다도 중요하고, 제대로 이해하는 게 중요해요!

글을 보면서 이해하는 것보다 직접 코드를 따라 치면서 실습을 해보는 게 더 중요하다고 생각해서

속성에 대해서 설명드릴 예정이고, 실습은 책을 보면서 꼭 해보셨으면 합니다!

 

- relative

좌표 속성에 따라 배치할 수 있는 속성입니다.

- absolute

relative와 마찬가지로 요소가 기본 흐름에서 벗어나 좌표 속성에 따라 배치됩니다. 다만 기준점이 다른데, relative일 때는 기준점이 요소의 왼쪽 위 모서리지만, absolute일 때는 웹 브라우저의 왼쪽 위 모서리입니다!

- fixed

해당 요소가 지정된 위치에 고정되는 속성입니다.

- sticky

스크롤하는 중에 일정 지점이 되면 요소가 fixed 값처럼 작동하는 것입니다.

- z-index

positoin 속성으로 배치한 요소의 z축 위치를 결정할 수 있습니다!

 

5.2 float 속성

요소를 화면에 배치하는 또 다른 방법으로 float 속성이 있습니다.

 

💡 멘토 TIP

현재는 float 속성이 잘 쓰이지 않고 flex나 grid가 많이 쓰여요!

7장에서 배울 예정이지만, flex는 정말 자세히 알아야 돼서 미리 알고 계시면 좋을 것 같아

잘 정리된 블로그 링크를 공유해드립니다.

CSS Flex(Flexible Box) 완벽 가이드

CSS Grid 완벽 가이드

 

 

5.3 clear 속성

clear 속성은 float 속성을 해제할 때 사용하는 속성입니다.

앞에서 알아본 float 속성에서 문제가 발생하는 원인은 float 속성이 대상 요소의 다음 요소에 영향을 주기 때문이에요!

따라서 영향을 주지 않도록 float 속성을 해제해야 합니다.

 

이 속성도 현재 float가 잘 쓰이지 않으니 잘 쓰이지 않겠죠?

그래도 알고 넘어가시면 좋을 것 같아요!

 

6. 전환 효과 속성 적용하기

---

6.1 전환이란

CSS에서 한 요소에 적용된 스타일 속성값을 다른 속성값으로 변하게 하는 것을 전환이라고 해요!

 

6.2 transition-property 속성

transition-property 속성은 전환 효과를 적용할 대상 속성을 지정해요.

transition-property: <속성값>

 

6.3 transition-duration 속성

transition-duration 속성은 전환 효과의 지속 시간을 설정하는 데 사용합니다.

속성값으로는 초 단위 값을 사용합니다. 시간 뒤에 s를 붙이시면 돼요! 만약 1초라면 1s

transition-duration: <시간>;

 

6.4 transition-delay 속성

transition-delay 속성을 사용하면 전환 효과의 발생을 지연할 수 있습니다.

속성값으로는 transition-duration 속성과 마찬가지로 지연하고 싶은 시간을 적으면 됩니다.

transition-delay: <시간>;

 

6.5 transition-timing-function 속성

transition-timing-function 속성은 전환 효과의 진행 속도를 지정합니다.

 

6.6 transition 속성으로 한 번에 지정하기

앞에서 배운 모든 전환 효과 속성은 단축 속성인 transition 속성으로 한 번에 작성할 수 있습니다.

transition-property: width;
transition-duration: 1s;
transition-timing-function: ease-in;
transition-delay: 1s;

반복되는 transition을 제외하니, 엄청 간편해지지 않았나요?

transition: width, 1s, ease-in, 1s;

 

7. 애니메이션 속성으로 전환 효과  제어하기

---

7.1 키 프레임 정의하기

애니메이션은 정지된 이미지를 연속적으로 보여줘서 움직이는 것처럼 보이게 해요!

애니메이션 속성은 이런 애니메이션 효과를 전환 효과에 부여합니다.

그래서 키 프레임 @keyframes를 정의해 실행해야돼요.

@keyframes <키 프레임명> {
	0% {/* CSS 코드 */}
	n% {/* CSS 코드 */}
	100%{/* CSS 코드 */}
}

 

7.2 animation-name 속성

animation-name 속성은 특정 요소에서 적용할 키 프레임명을 지정해요.

animation-name: <키 프레임>;

 

7.3 animation-duration 속성

animation-duration 속성은 애니메이션을 지속할 시간을 설정해요!

속성값으로는 초(s)나 밀리초(ms) 단위의 시간을 넣으면 됩니다.

animation-duration: <지속 시간>;

 

7.4 animation-delay 속성

animation-delay 속성을 사용하면 애니메이션 실행을 지연할 수 있습니다.

속성값으로는 초나 밀리초의 단위의 시간을 넣으면 돼요.

animation-delay: <지연 시간>;

 

7.5 animation-fill-mode 속성

애니메이션이 끝나도 원래 상태로 돌아가지 않고 애니메이션이 종료된 시점의 상태를 유지하길 원할 수도 있어요.

이럴 때는 animation-fill-mode 속성을 사용하면 됩니다. 

 

7.6 animation-iterator-count 속성

애니메이션은 기본으로 1회 실행하고 종료됩니다.

이때 animation-iterator-count 속성을 사용하면 실행 횟수를 조절할 수 있습니다.

 

무한으로 반복하게 하려면 infinite 값도 사용할 수 있어요!

animation-iterator-count: <횟수>

 

7.7 animation-play-state 속성

animation-play-state 속성은 애니메이션의 재생 상태를 지정합니다.

속성값으로는 책을 참고하시면 좋을 것 같아요!

 

7.8 animation-direction 속성

animation-direction 속성은 애니메이션의 진행 방향을 지정합니다.

animation-direction: <속성값>;

 

7.9 animation 속성으로 한 번에 지정하기

마지막으로 앞에서 살펴본 모든 애니메이션 속성은 단축 속성인 animation 속성으로 한 번에 작성할 수 있습니다.

다음과 같은 코드는 bgchange 키 프레임에 정의된 속성을 ease-in 속도로 3회 실행한다는 뜻이겠죠?

animation: bgchange 5s 3 ease-in;

 

8. 변형 효과 적용하기

---

8.1 transform 속성

transform 속성을 사용하면 요소에 특정 변형 효과를 지정할 수 있습니다.

속성값에는 변형 효과가 정의된 다양한 함수를 사용 목적에 맞게 넣으면 됩니다.

 

속성값 종류가 매우 많은데 한 번 같이 살펴보면서

책에 있는 예제대로 2차원 좌표 이동해보고, 확대 또는 축소해보고, 기울이고, 회전해보는 등

transform을 자유자재로 쓸 수 있는 정도로 연습해주세요!

 

translate, scale, skew, rotate 4가지 속성, 다 중요하니 여러번 사용해보세요~

 

 

9. 웹 폰트와 아이콘 폰트 사용하기

---

9.1 구글 폰트 적용하기

구글 폰트를 적용하는 방법은 말보단 실습이 더 중요할 것 같아서

한 번 같이 적용해보겠습니다!

구글 폰트를 웹 페이지에 사용하는 방법을 알아보겠습니다. 

 

1. 사이트 들어가기 (https://fonts.google.com/)

 

 

 

2. 원하는 폰트 선택하기

구글 폰트 사이트에 들어갔다면, 원하는 폰트를 선택하면 됩니다.

맘에 드는 폰트를 선택해도 되고 검색을 통해 원하는 폰트를 찾을 수도 있습니다. 

저는 예시로 montserrat 폰트를 검색해서 선택했습니다. 

 

3. 폰트 스타일 선택하고 추가하기

폰트를 정했다면, 그 폰트의 다양한 스타일(글씨 굵기 또는 기울임체 등) 중에서 사용할 스타일을 선택해야 합니다. 

+ Select this style 을 누르면 해당 폰트 스타일이 추가됩니다. 

 

선택한 폰트 스타일은 아래 그림에 표시된 버튼을 누르면 확인할 수 있습니다.

저는 Regular 400, Medium 500, Bold 700 스타일을 선택했습니다. 

 

 

 

4. Embedding 코드 복사하기

이제 해당 폰트를 HTML 파일에 embedding 하기 위한 코드를 복사해서 HTML 파일에 코드를 추가하면 됩니다. 

Embed 탭을 클릭해서 <link> 코드를 복사한 뒤 HTML <head> 부분에 추가해줍니다. 

링크된 폰트를 CSS에서 사용하는 방법은 아래 그림의 파란색 박스에 나와있습니다. 

 

 

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Google Fonts</title>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700&display=swap" rel="stylesheet" />
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <p class="regular">Montserrat Regular 400</p>
    <p class="medium">Montserrat Medium 500</p>
    <p class="bold">Montserrat Bold 700</p>
  </body>
</html>

 

CSS

p {
  font-family: "Montserrat", sans-serif;
}
 
.regular {
  font-weight: 400;
}
 
.medium {
  font-weight: 500;
}
 
.bold {
  font-weight: 700;
}

 

그럼 아래와 같은 결과가 나오게 될 것입니다!

 

9.2 아이콘 폰트 적용하기

아이콘 폰트는 다양한 아이콘을 웹 폰트를 사용하는 것처럼 간단하고 쉽게 사용하는 기술입니다.

다양한 아이콘을 이미지 파일(jpeg, png)이 아니라 CSS를 적용하는 방식으로 간단하게 사용할 수 있어서

실무에서 대단히 활용도가 높아요!

 

아이콘 폰트는 책을 통해서 실습을 해보시면 좋을 것 같아요!

 

 

오늘 CSS 필수 속성을 다 다뤄봤는데 어떠셨나요?

움직이기까지 하니까 더 재밌어지지 않았나요??

 

다음 장부터는 아까 잠깐 언급했던 flex에 대해서 배울 예정이에요

이제 많이 어려워질 예정이라 이번 장에서 했던 것들을 확실하게 알아야 합니다!

 

✅ 정리

1. 위치 속성으로 HTML 요소 배치하기
2. 전환 효과 속성 적용하기
3. 애니메이션 속성으로 전환 효과  제어하기
4. 변형 효과 적용하기
5. 웹 폰트와 아이콘 폰트 사용하기

 

🤓 1분 퀴즈/마무리/실습 문제/셀프체크

271~276p에 있는 마무리를 통해서 정리 다시 해보시고, 셀프 체크도 꼭 해보세요!