본문 바로가기
반응형

Embedded169

[JS] Lodash 이것 또한 자바 스크립트 라이브러리 중 하나이다. CDN은 이거! 그런데 얘는 잘 안 사용하는 듯... 2023. 10. 11.
[JS] ScrollMagic 이쯤되니까 대체 사용하는 JS 라이브러리가 몇 개여;;;; 물론 편하기는 한데… 라이브러리라는 말 써서 뭔가 있어보이기는 한데, 결국에는 여기저기서 긁어왔습니다^_^ 아닌가… 이거 맞는건가… 그래도 결과물만 좋으면 되니까 말이지… https://scrollmagic.io/ ScrollMagic The javascript library for magical scroll interactions. ScrollMagic helps you to easily react to the user's current scroll position. scrollmagic.io 이 코드를 다들 CDN이라고 부르더라... 기억하자. CDN!!! Ex ) /** * 요소가 화면에 보여짐 여부에 따른 요소 관리 */ // 관리할 요소.. 2023. 10. 11.
[JS] Swiper https://swiperjs.com/ Swiper - The Most Modern Mobile Touch Slider Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior. swiperjs.com Swiper에는 다양한 옵션들이 있습니다. 옵션을 사용하면 마우스로만 움직이는 슬라이드를 버튼 클릭으로 움직이게 하거나, 아무런 동작을 하지 않아도 자동으로 슬라이드가 넘어가게 하는 등 사용자가 더 편리하게 이용할 수 있습니다. 사용 방법 사이트 접속해서 다운 받기 alpha가 아닌 파일 다운 받기 사이트 링크로 파일 불러오기 4. 기본 레이아웃 추가 Sl.. 2023. 10. 11.
[JS] GSAP 웹 개발하는데 생각보다 이곳 저곳에서 소스를 많이 긁어오는구나 싶다… 임베디드 했을 때는 이런거 없이 전부 코딩했었는데, 새롭다! GSAP 바로가기 ↓↓↓↓↓↓↓↓↓ https://greensock.com/docs/v3/Installation GSAP Greensock에서 제공해주는 자바스크립트 애니메이션 라이브러리라고 한다. 상당히 복잡한 애니메이션 구현이 가능해서 매우 인기라고 한다. 사용방법은 이전 것보다 살짝 복잡하다. 우선 저 사이트로 들어가서 GSAP을 설치해야한다. 그 다음 원하는 플러그인을 고르면 코드가 보여지는데, 이 코드를 사용하면 된다. HTML에 위에 코드까지 적으면, JavaScript에서 하기와 같이 사용이 가능하다. /** * 페이지 스크롤에 따른 요소 제어 */ // 페이지 .. 2023. 10. 11.
[HTML] 구글 머터리얼 아이콘(Google Material Icons) 지난 포스트 ‘구글 폰트’에 이은 유용한 사이트 추가!! 구글 머티리얼 아이콘 바로가기 ↓↓↓↓↓↓↓↓↓ https://fonts.google.com/icons?selected=Material+Icons => head 태그 안에 위 코드를 추가한다. 구글 폰트와 마찬가지로 코드가 나온다. 이건 이미지이기 때문에 SVG나 PNG 이미지를 다운받아서 사용해도 된다. 2023. 10. 11.
[HTML] 구글 폰트 웹페이지를 만들다보면 이쁜 폰트를 사용하고 싶은 경우가 있다. 그럴 경우에는 ‘구글 폰트’를 이용하면 된다. 구글폰트 바로가기 ↓↓↓↓↓↓↓↓↓ https://fonts.google.com/ Browse Fonts - Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com 원하는 폰트를 선택한 후, 원하는 크기와 굵기의 글씨까지 선택하면 옆에 코드가 나오는데, 저 코드를 그대로 사용하면 원하는 폰트를 손쉽게 사용할 수 있다. 2023. 10. 11.
[HTML] 오픈 그래프 처음에 ‘오픈 그래프’라는 단어를 들었을 때, 그래프 관련 내용인 줄 알았는데, 뜬금없이 SNS로 홈페이지 링크 보낼 때 이쁘게 보여지는게 오픈 그래프라네;;; 오픈그래프 Open Graph 콘텐츠의 요약내용이 SNS에 게시되는데 최적화되도록 설정하는 것 이런거다;;; 어떤가? '오픈 그래프'라는 단어만 듣고 상상이 가는가? 사용되는 코드는 하기와 같다. Naver 블로그, 카카오톡 미리보기 설정 트위터 미리보기 설정 모바일 앱 미리보기 설정 모바일 앱이 존재하는 경우 앱으로 연결 시 노출 2023. 10. 11.
[HTML] 필수 HTML 코드 정리 코딩을 하는데 있어 가장 중요한 것은 자신만의 코딩 작성 능력을 가지는 것이라고 생각한다. 솔직히 그 많은 코딩 문법 쓰지도 않고, 자주 쓰는 애들만 쓰게 된다. 그런 김에 HTML도 자주 사용하는 것 위주로 정리해 보려고 한다. : html 문서의 시작. 어떤 html버전인지 웹 브라우저에게 알려주는 역할을 한다. html5에서는 안 써도 된다고 하는데, 우선은 쓰도록 하자. ~ : html태그. 이 안에다 html문을 쓴다. 한국어로 된 홈페이지 만들 때, 이 곳에 lang=”ko”를 써서 한국어 사용을 알린다. 우리나라에서는 거의 필수적. & ~ : 사실 이 두가지가 좀 헷갈렸다. 그냥 head는 홈페이지 메인 화면 외적인 부분에 쓴다고 알면 된다. 홈페이지명, 문자 style, jsp나 css파일.. 2023. 10. 11.
[CSS] nth-child & nth-of-type [html] 지금 가입하면, 배송비 무료 쿠폰 증정!!! 로그인 회원가입 [css] @charset "EUC-KR"; body{ margin : 0px; padding: 0px; } a{ text-decoration-line: none; } .event{ background-color: green; height: 50px; color: white; text-align: center; /*가로만 가운데가 상태가 된다*/ line-height: 40px; /*세로 가운데 정렬 설정한다*/ cursor: pointer; } .inner{ background-color: orange; width: 1300px; margin: auto; position: relative; } .inner img:nth-child.. 2023. 9. 17.
[CSS] <li> 리스트의 점 없애기 로그인 회원가입 .up_menu{ position: absolute; top: 10px; right: 0; display: flex; list-style-type:none; } up_menu 클래스에 list-style-type:none; 문구를 추가한다. 2023. 9. 17.
반응형

티스토리툴바