* 이 글은 필자가 자신이 배운 내용을 정리하기 위한 것이며, 결코 Udemy 강의를 결제하지 않은 타인의 학습을 고려하여 작성되지 않았습니다.
* 이 글을 학습에 활용하기를 원하신다면, Udemy에서 '【한글자막】 The Web Developer 부트캠프 2024' 강의를 구매하시는 것을 권장드립니다.
이제 css를 반.. 조금 덜 배웠다.
오늘은 css에 애니메이션을 넣는 법을 배운다고 해서 조금 기대중이다.
Opacity와 Alpha Channel은 모두 불투명도를 바꿀 때에 사용한다.
Alpha Channel는 rgba(r, g, b, a)와 같이 사용되며, 0부터 1 사이의 실수값을 가진다. 1은 완전 불투명, 0은 완전 투명이다. background-color : rgba(255, 255, 255, 0.7);처럼 특정한 부분의 색을 정할 때 사용한다. 그 안에 버튼이라던가, 단락같은 다른 요소가 있더라도 불투명도를 적용받지 않는다. 16진법을 사용할 때에는 #rrggbb뒤에 00부터 FF까지의 수 중 하나를 입력한다. FF가 완전 불투명이다. 하지만 불투명도를 나타낼 일이 있다면 보통은 10진법을 이용한 rgba를 주로 사용한다고 한다.
Opacity는 특정 부분의 전체 불투명도를 정할 때에 사용된다. div의 style에 opacity: 0.7;과 같이 작성하여 사용할 수 있다.
Position, 위치는 다양한 값을 가지며, 화면 구성을 예쁘게? 할 수 있기 때문에 중요하다. 그런데 어렵다고 하니 일단은 개념만 배운다는 느낌으로 알아두고, 필요할 때 점차 알아가자. 내 경우에는 그래야 오래 공부할 수 있다.
position : static; 은 위치의 기본값이다. top, bottom, right, left가 영향을 끼치지 못한다.
position : relative; 는 이것만 사용하면 아무런 의미가 없지만, top, bottom, right, left를 함께 사용하면 의미가 생긴다. top을 작성하면 위에 여백이 생기는 식이다. 그러니까 사실상 아래로 이동한다. (top : 50px;과 같이 사용할 수 있다.)
position : absolute; 는 문서의 일반적인 흐름에서 요소가 제거된다고 한다. 부모 요소에 관계돼서 이동한다는데... 진짜 뭔 소린지 모르겠어서 이건 패스하련다. 자세한 건 mdn을 보자! 이해되면 수정하러 오겠다.
position : fixed; 는 그 자리에서 고정된다. 화면을 이동해도 따라다닌다. 네비게이션 바 등을 만들 때 사용하면 좋을 것 같다.
position : sticky; 는 화면 안에 그 대상이 있을 때에는 가만히 있다가 화면 밖에 나가려고 하면 붙어 있는? 특징이라는데 자세히 다루지는 않는다.
이제부터 transition을 배울건데, 꽤 간지난다... css를 배울 의욕이 생긴다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="app.css">
</head>
<body>
<div class="circle"></div>
</body>
</html>.circle {
background-color: aqua;
height: 300px;
width: 300px;
transition : 1s;
}
.circle:hover {
background-color: magenta;
border-radius: 50%;
}
나는 처음 접하는 거라 신기했는데, 다른 사람은 어떤지 모르겠다.
css 코드를 보면 transition : 1s;이라는 게 적혀있는 것을 확인할 수 있다. 이건 hover을 이용한 예시였지만, hover에서만 사용할 수 있는 건 아니다. javascript와 연결해 자주 사용한다고 하는데, 나는 아직 javascript를 배우지 않아 넘어가려고 한다.
transition은 transition : (특성) (소요 시간) (변환 타이밍 함수) (지연 시간);처럼 사용할 수 있다. 특성 자리에 all을 넣어 모든 특성에 대해 transition을 적용시킬 수 있다. 변환 타이밍 함수는 transition timing function이라고 하며, 소요시간은 같지만 느리게 가다가 천천히 갈지, 천천히 가다가 느리게 갈지 등을 정할 때 쓸 수 있다.
transform은 물체를 휘고 돌리고 늘리고 하는... 말 그대로 변형이다. 다양한 transform을 살펴보자.
transform : return(ndeg); 는 n도를 돌린다. transform-origin : ;을 이용해 회전축을 정할 수도 있다. (라디안, n회 회전과 같은 단위도 사용이 가능하지만 보통은 '도'를 많이 쓴다고 한다.)
transform : scale(n); 은 n배만큼 축소/확대 한다. 가로 세로 모두 해당된다. scaleX나 scaleY를 이용해 가로만 늘리거나 세로만 늘릴 수 있다.
transform : translate(a, b); 는 x축으로 a만큼, y축 방향으로 b만큼 이동한다.
transform : skew(); 는 2차원 평면 상에서 기울이는 기능인데, 강의에서 자세히 다루지는 않는다.
tip!
cursor : pointer;과 hover을 이용해 버튼 같은 곳에 마우스를 가져다 댔을 때 커서를 포인터로 바꿀 수 있다!
background 관련 요소? 를 알아보자.
background-color -> 생략
background-size : (contain/cover/200px 100px/auto...); -> background size는 다양한 옵션을 가지고 있다. contain은 정해진 구역을 꽉 채우면서 사진이 잘리지 않도록 하고(대신 같은 이미지가 여러번 보일 수 있다.), cover은 정해진 구역을 꽉 채우면서 비율을 유지하기 때문에 사진이 잘릴 수 있다. 보통은 cover을 많이 쓴다고 한다. background-size를 background에 속기법으로 작성한다면, background-position 뒤에 /를 붙인 후에 넣는 방식만 허용된다.
background-position : (top, bottom...); -> 배경의 기준이 되는 곳을 정한다.
전에 시스템 기본 폰트를 다뤘... 던 것 같기도 하다. 시스템 기본 폰트 외의 다른 폰트를 사용하기 위해선 유료 폰트를 구매하는 법도 있지만, 구글 폰트 사이트에서 많이 사용한다고 한다.
Browse Fonts - Google Fonts
Making the web more beautiful, fast, and open through great typography
fonts.google.com
필요하다면 아래 사이트를 이용하자. (language 설정을 korean으로 해놓았다.)
사용은 index.html에 link href 안에 구글 폰트 링크를 넣으면 된다. (get embed code라는 버튼이 있다.)
이번 포스트는 여기에서 마쳐야한다. 더 담을 내용이 없기 때문이다.
이 포스트가 언제 올라갈지는 모르겠지만, 다들 좋은 하루 보내길...