Tech/HTML CSS (5) 썸네일형 리스트형 og 태그로 링크 미리보기 만들기 og태그를 이용해서 링크의 썸네일, 설명, 제목 넣는 방법을 함께 알아보겠습니다. og 태그를 이용한 미리보기 화면 입니다. 위의 이미지처럼 링크를 보낼때 보여지는 썸네일과 제목, 설명을 설정해주는 태그입니다 . HTML 삽입 미리보기할 수 없는 소스 주의할점이 있는데요, 위의 코드터럼 작성했는데 이미지가 뜨지 않는다면 flask가 설치안되있어서 그럴 수 있습니다. 그럴떈 flask를 설치해주시거나, 아래처럼 이미지 주소를 적어주면 됩니다. HTML 삽입 미리보기할 수 없는 소스 box-shadow 로 그림자효과 내기 div{ box-shadow:inset 4px 4px 4px #000; } inset을 설정해주면 그림자가 안쪽에 생성된다 숫자로 된 속성값은 순서대로 세로, 가로, 흐리게 값이다. 세로, 가로값은 필수 값이라서 꼭 작성해야한다. 그리고 마지막에 색상코드 값을 작성해주면 된다. See the Pen Untitled by 김채영 (@cherryat) on CodePen. 보라색 상자로 만들어본 예제이다 AOS.js (Animate On Scroll) 를 사용해보자 See the Pen Untitled by kimjihyun (@jihyun998) on CodePen. https://michalsnik.github.io/aos/ AOS - Animate on scroll library AOS Animate On Scroll Library Scroll down michalsnik.github.io 1. cdn 넣기 - css - js 2. AOS.init(); 넣기 init를 적어줘야 동작한다. 안에 속성들은 밑에 링크로 하나씩 써보면 재미있답니다! AOS . init ( ) ; // 초기화 // 나열된 기본 설정 // 선택적 설정 개체를 전달할 수도 있습니다 AOS . init ( { // 전역 설정: disable : false , // 다음 값 허용: 'phon.. gooey filter 를 응용한 메뉴 버튼 만들기 See the Pen gooey filter 응용 by nammyeon (@nammyeon) on CodePen. html에 svg를 넣은 후 css에서 적용하면 끝! http://www.w3.org/2000/svg" version="1.1"> 필터 ID는 원하는대로 정한 후 안에 있는 필터 값만 바꿔주기 적용하고자 하는 영역에 css로 필터 ID 불러오면 끝~~ div {filter: url(#bbq)} 참고로 values는 색상 매트릭스라고 하는 RGBA의 채널값인데 우리가 바꿔줄 수 있는 건 뒤에 있는 파란색 숫자 두 개다. 값을 마음대로 조절할 수 있는데 딱! 저 값이 가장 예쁘다. @@@@@@여기서 또 응용해서 쇼핑몰이나 앱에서 종종 보이는 버튼 만들기@@@@@@@@@@@@@@ See the P.. gooey filter 끈적하게 보이는 gooey filter See the Pen gooey filter by nammyeon (@nammyeon) on CodePen. 이전 1 다음
