오늘의 공부를 정리하기 전에 헷갈리는 개념인 attribute와 property를 정리하고 가겠다.
Attribute
An attribute extends an element, changing its behavior or providing metadata.
An attribute always has the form name="value" (the attribute's identifier followed by its associated value).
You may see attributes without the equals sign or a value. That is a shorthand for providing the empty string in HTML, or the attribute’s name in XML.<input required> <!-- is the same as… --> <input required=""> <!-- or --> <input required="required">
Property (CSS)
A CSS property is a characteristic (like color) whose associated value defines one aspect of how the browser should display the element.
Here's an example of a CSS rule:/ "div" is a selector indicating that all the div elements /
/ in the document will be styled by that rule /
div {
/ The property "color" with the value "black" indicates /
/ that the text will have the color black /
color: black;
/ The property "background-color" with the value "white" indicates /
/ that the background color of the elements will be white /
background-color: white;
}
간단히 이야기 하자면 attribute => html 태그의 '속성'을 의미
property => css의 '속성'을 의미한다.
html 시작 태그 안에서 태그의 동작 방식을 바꾸거나 메타데이터를 추가해주는 것이 'attribute'이고 name="value" 의 형태를 가진다.
css 스타일시트에서 셀랙터 안의 바꾸고자 하는 속성을 보여주는것이 property이다.
예시를 들자면 span { color : blue; font-size : 20px; } 일때 color와 font-size가 property이다.
#4.0
transition은 변화를 애니메이션으로 만들 수 있게 해준다.
transition은 state가 없는 element에 써야한다
어떤 상태를 바꾸려면 state가 있는 element에다가 써야한다.
#4.1
추천하는 사이트 https://matthewlein.com/tools/ceaser
이곳에서
- linear
- ease-in
- ease-out
- ease-in-out
의 차이 확인 가능
cubic-bezier을 이용해 나만의 변화 속도 생성 가능
#4.2
transformation은 픽셀을 변형하고 margin이나 padding은 변형시키지 않는다.
transformation은 box 차원에서 일어나는게 아니다.
transform도 transition으로 애니메이션으로 만들 수 있다.
transform mdn 추천 복사해서 사용가능
