Client

[css] animation 활용한 그라디언트 배경

잠이 안와서 블로그를 꾸미려다가 문득 프로필 이미지를 레어카드 마냥 번쩍이는 효과를 주고 싶어졌음 그러기 위해서 계획한것 금색 테두리를 준다 (금색이면 레어한것처럼 보이지않을까) 내부는 반투명한 배경을 주고 그라데이션을 동적으로 줘 빛나는 효과를 줘본다 우선 처음에는 linear-gradient를 동적으로 주려고 했는데 그건 계산을 해서 주기가 너무 힘든거 같아, 노선을 변경함 배경을 주고 background-position을 왼쪽 위에서 오른쪽 아래 대각으로 움직여주는 것 화면 구조는 이런 형식으로 이루어져있었기 때문에 우선 이미지위에 얹어줄 카드(iamge-deco)를 만들었음 .image-deco{ width:150px; height: 171px; border-radius: 15px; backgro..

[css] ::before ::after로 폰트어썸 넣기

블로그를 꾸미고 싶어서 이것저것 만지다가 메뉴탭에 아이콘을 넣고 싶어졌음 평소에 가상요소 선택자를 잘 안썼는데 지금 사용하는 스킨 특성상 ::before ::after를 활용할 일이 많아져서 나름 재미를 느끼는 중 아무튼, 내 목표는 메뉴탭에 각기 다른 아이콘을 앞에 삽입시켜주고 싶었기 때문에 nth-child()또한 같이 활용함 (더 좋은 다른 방식도 있을거같음) li:nth-child(1) .link_item::before{ content:"\f233"; font-family:"Font Awesome 5 Free"; font-weight:900; margin-right:4px; } 한번에 잘 되지 않았었는데 우선 첫번째로, content 부분에 그냥 아이콘 코드를 넣으면 인식을 못하던것, 앞에 \(..