1. CSS 변수나, CSS 정의 속성은 CSS파일에 직접 추가되고, HTML 선택자를 통해 이 변수들을 구현한다.
요소마다 적용된 개별의 정의를 사용하는게 아니라, CSS 속성을 그룹으로 묶어서 관리할수 있다!
html {
--color-grey-100: rgb(236, 236, 236);
--color-grey-400: rgb(134, 134, 134);
--color-grey-600: rgb(58, 58, 58);
--color-grey-900: rgb(41, 41, 41);
--color-primary-500: rgb(167, 226, 255);
--color-primary-700: rgb(0, 170, 255);
--size-1 : 18px;
--size-5 : 50px;
background-color: var(--color-grey-100);
font-family: 'Krub', sans-serif;
font-weight: 400;
}
ㄴ 색상의 숫자값은 대게 50 - 900까지 올라감,
폰트사이즈는 1~5로 구분을 많이함
ㄴ font-size: var(--size-1)
2. 루트(:root) / html / *
ㄴ 각 특징에 대해 비교해보자면,
*** 루트셀렉터 > html (루트셀렉터가 html보다 최상위임을 기억!)
ㄴ css는 html 관련 이외에도 사용가능 하다!
3. CSS 전환 추가하기 (transition)
check point!!! transition 속성은 itinial state(요소의 초기)에 적용 해줘야 한다!
아래 card-container에 지정하고 싶을경우?
.card-container {
background-color: rgb(255, 255, 255);
width: 350px;
margin: 50px auto;
box-shadow: 3px 3px 10px rgb(201, 200, 200);
transition: trasnform 2s ease-out 1s
}
.card-container:hover {
transform: scale(1.05);
}
아래 card-container에 transition 요소가 적용되어있는데, h1:hover에 적용되 transform이 적용된다.
transition은 컨테이너안에 위치해있으면 꼭 해당요소가 아니더라도 적용 가능함!
.card-container {
background-color: rgb(255, 255, 255);
width: 350px;
margin: 50px auto;
box-shadow: 3px 3px 10px rgb(201, 200, 200);
transition: trasnform 2s ease-out 1s
}
h1 {
color: var(--color-grey-600);
text-align: left;
padding: 30px 50px 0px 50px;
margin: 10px 0;
font-family: 'Zilla Slab', serif;
font-weight: 600;
}
h1:hover {
transform: scale(1.05);
}
4. transition은 요소의 초기에 적용해야함!
css 종속적 논리에 따라서 덮어쓰게 되니, 작성시 주의할것! css의 가장 기본 원칙을 항상 기억할것 :)
.button {
color: var(--color-primary-700);
text-decoration: none;
text-transform: uppercase;
display: inline-block;
width: 70%;
padding: 10px;
margin: 0 0 30px 0;
border: 2px solid rgb(224, 224, 224);
font-size: var(--size-1);
font-weight: 600;
transition: background-color 0.5s ease-out;
}
.button:hover {
color: white;
background-color: var(--color-primary-700);
border: 2px solid rgb(255, 255, 255);
}
5. transform에 대해서 더 알아보기
https://developer.mozilla.org/en-US/docs/Web/CSS/transform
transform - CSS: Cascading Style Sheets | MDN
The transform CSS property lets you rotate, scale, skew, or translate an element. It modifies the coordinate space of the CSS visual formatting model.
developer.mozilla.org
7. SVG 작업
SVG란? 브라우저가 렌더링 할수있는 확장형 이미지의 텍스트기반 묘사이고, 모든 브라우저에서 사용할수 있다 :)
쉽게 말하면 이미지를 텍스트처럼 추가할수 있음! (html에 적용시킴)
아래 사이트에서 미리 정의된 SVG 아이콘 확인이 가능하고, 무료로 사용이 가능!!!
아래 사이트에서 svg, 혹은 svgg로 복사한뒤 html에 붙여주기만 하면 끝! :) so easy.
https://heroicons.com/
Heroicons
Beautiful hand-crafted SVG icons, by the makers of Tailwind CSS.
heroicons.com
Scalable Vector Graphics (SVG)