ul : list-style-type , 사이트 요소 디자인 할 때 꼭 필요한 position 속성, 애니메이션을 줄 수 있는 transform

ul: list-style-type

ul 태그를 쓰면 앞에 원형, 사각형 등의 도형이 붙는다. 이 도형을 지정해줄 수 있는 속성이다. 다양한 모양을 제공한다.

참고자료

https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type 다양한 list-type-style

position 속성

요소의 크기나 정렬을 설정할 때, 부모-자식간에 position 값을 줄 수 있다. 부모의 position을 relative로 주고, 자식 태그의 position을 absolute로 주면 relative로 준 태그를 기준으로 absolute를 준 자식 태그들이 움직인다. 디자인 할 때 구역을 나누게 되는데, 그 때 잘 활용해주면 유용할 것 같다.

transform

transform으로 이미지 사이즈를 키우거나, 위치를 이동하거나 애니메이션을 줄 수 있다. 강의에서 들을 때 봤었던 scale은 크기를 키우는 역할이고, index 페이지 디자인 할 때 썼던 translateY는 Y좌표 설정하는 역할이다.

• 추가로 transition은 애니메이션의 속도를 조절할 수 있게 해준다. transform을 정의한 다음, transition: 1s와 같이 몇 초만에 나타나게 만들어 줄 것인지 정의하면 된다. transform은 다른 블럭에서 정의되어 있어도 된다. 해당 요소에만 적용된다면 OK. 다음은 코드 사용 예시이다.

img {

transition: transform 1s;

}

참고자료

https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions CSS transition 사용하기
https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms CSS transform 사용하기