1. 배경 고정하기
background-attachment: fixed를 이용해 배경 이미지를 고정해보자.
자세한 설명 보기2. sticky 헤더 고정하기
position:sticky를 이용해 헤더를 상단에 고정해보자.
자세한 설명 보기3. 짝수 태그에만 색을 넣어주는 선택자
class 없이 nth-child를 이용해 짝수/홀수 태그를 선택해 보자.
자세한 설명 보기4. flex를 이용한 가운데 정렬
display:flex를 이용한 가운데 정렬 방법. display:flex를 포함해 아래로 총 4줄을 복사해 사용해보자.
※위치를 주의해서 복사하자.
5. flex 줄 바꿈
flex-wrap을 이용해 아이템을 줄 바꿈 해보자.
자세한 설명 보기6. box-shadow inside
안쪽에 그림자를 넣어 들어간 느낌을 연출하고 싶을 때 사용해 보자.
자세한 설명 보기7. CSS 동작을 자연스럽게 해주는 애니메이션
hover 등의 동작시 자연스럽게, 천천히 바뀌도록 하고 싶을 때 사용해 보자.
자세한 설명 보기8. 마우스 올리면 선이 그려지는 애니메이션
마우스를 올리면 테두리 선이 점점 그려지면서 가운데 글씨나 로고, 이미지가 나오는 애니메이션.
동적인 연출을 하고싶을 때 사용해보자.