daehyuntstory

해당사진은 네이버 footer에 있는 목록이다 근대 목록 사이마다 " l " 표시를 하여 분간하였는데 이건 여러가지 방법이 있지만 우리는 ::after기능을 이용하여 속성뒤에 " l "과 margin을 주어 만들어보자. CSS /* class뒤에 밑의 옵션과 글을 추가하겠다는 의미로 정의 */ .map_inner::after{ margin-left: 5px; /*content에 넣고싶은 내용입력*/ content: "|"; /* float 속성은 여기서 그 요소를 컨테이너의 오른쪽으로 밀어냅니다. */ float: right; display: block; } // 마지막은 " | "닫으면 안되니 마지막은 content를 없애준다. .map_inner:last-child::after{ content: ""..

@keyframes 동적인 효과를 보여주고싶을때 키프레임을 생성하여 태그에 추가해보자 css @keyframes shake{ 0%{ /* 애니메이션 시작점. 초기 상태 그대로 유지합니다. */ } 25%{ /* 애니메이션 1/4 지점에서 요소를 오른쪽으로 3도 회전시킵니다. */ transform:rotate(3deg) } 50%{ transform:rotate(0deg) } 75%{ transform:rotate(-3deg) } 100%{ transform:rotate(0deg) } } .reservation{ /* animation-name 속성은 'shake' 키프레임 애니메이션을 이 클래스에 적용하는 데 사용됩니다. */ animation-name: shake; /* animation-durati..