마우스 오버시 텍스트 변경 효과

메뉴의 텍스트를 마우스로 오버시 위 아래로 움직이며 텍스트가 변경되는 효과를 부여하려고 할 때 이용하세요.   Home About Gallery Notes Contact  .SMN_effect-31 {display:flex;}.SMN_effect-31 li {margin-right:30px;width:120px;}.SMN..

• format_list_bulleted 코딩/HTML ㅣ CSS
• · 2024. 9. 4.
• textsms

그누보드 컨텐츠 추가 및 반응형 세팅

1. 그누보드 컨텐츠 수정위치 : www/bbs/content.phppages 폴더 생성 이후 컨텐츠에 연결헤서 수정 가능할 수 있도록 설정 예)1. 그누보드 관리자 로그인 후 게시판 관리 > 내용관리 > 내용추가2. ID : about 로 작성해서 추가3. pages 폴더에 about.php 파일 생성 후 코딩 작업  관리자 모드에서 게시판관리->내용 관리를 먼저 확인해 주세요.');}// 내용if($co_seo_title){ $co = get_content_by_field($g5['content_table'], 'content', 'co_seo_title', generate_seo_title($co_seo_title)); $co_id = isset($co['co_id']) ? $co['co..

• format_list_bulleted 코딩/그누보드
• · 2024. 9. 4.
• textsms

스크롤을 이용한 이미지 애니메이션

스크롤을 이용한 이미지 애니메이션을 알아보자아래로 스크롤하다가 해당 요소에 접근했을때 active 클래스명을 부여해주고 해당 클래스명이 붙으면 가려두었던 이미지가 왼쪽부터 오른쪽으로 나타나게 하는 코드입니다.  HTML 구조  CSS.con .img_box {position:relative;}.con .img_box:after {content:'';display:block;position:absolute;top:0;left:0;width:100%;height:100%;z-index:99;background:#fff;transition:transform 0.8s ease-in-out;transform:translate3d(0, 0, 0);}.con .img_box.active:after {transf..

• format_list_bulleted 코딩/Javascript
• · 2024. 8. 28.
• textsms

전체페이지 스크롤 fullpage.js 사용법 알아보기

홈페이지를 제작할 때 전체 페이지를 한번에 스크롤할 수 있는 라이브러리를 찾고 있다면 fullpage.js 를 사용해보세요.해당 라이브러리를 이용하면 간편하게 스크롤 한번에 위아래로 이동이 가능합니다. 해당 라이브러리는 3 버전 이후 부터는 유료이며 무단으로 사용시 개발자 도구에서 라이센스를 등록하라는 경고문이 뜨기 때문에 이 점 유의해주시구요. 3 버전 이전 2.9.7 버전은 무료로 사용할 수 있기 때문에 상황에 맞게 사용해보시길 바랍니다. fullpage.js 다운로드  우선 유료 버전이나 무료 버전을 다운로드 받으신 다음에해당 폴더에 들어가 dist 폴더에 접속합니다. 여기서 이제 필요한 파일은 크게 두가지 입니다. fullpage.cssfullpage.js (2.9.7버전은 jquery.fullp..

• format_list_bulleted 코딩/HTML ㅣ CSS
• · 2024. 8. 27.
• textsms

[HTML/CSS] iframe 유튜브 동영상 반응형으로 사이즈 조절하기

웹페이지 작업을 하다 유튜브 영상 삽입을 위해 iframe 을 사용할 일이 있습니다.하지만 기본적으로 유튜브에서 공유 버튼을 눌러 iframe 태그 내용을 불러올 수 있지만 기본 사이즈가 정해져 있어 아쉬운 부분이 있습니다. 1. 유튜브 동영상 가져오기 2. 반응형 사이즈에 맞춰 사이즈 조절하기해당 소스를 바로 복사 붙여넣기하면 반응형에 따라 달라지는 화면 사이즈에 따라 유튜브 화면 공간이 검은 배경 부분으로 잘리기 때문에 해당 문제를 해결하기 위해 아래 코드를 적용해보길 바랍니다.   .video_container {position:relative;padding-top:56.25%;height:0;width:100%;}.video_container iframe {position:absolute;top:..

• format_list_bulleted 코딩/HTML ㅣ CSS
• · 2024. 8. 14.
• textsms

[그누보드] 스킨 폴더명 정리

홈페이지 제작에 그누보드를 활용하다보면 스킨을 이용할 일이 많아집니다.이번 포스팅에서는 그누보드에는 어떠한 스킨들이 있고 어떠한 역할을 하는지에 대해 알아보도록 하겠습니다. 그누보드 스킨 종류그누보드에는 총 15가지 종류의 스킨 폴더가 존재합니다.  폴더명역할board게시판 스킨connect접속자 스킨content내용관리 스킨faqfaq 스킨latest최신글 스킨member회원관리 스킨new최근 게시물 스킨outlogin외부로그인 스킨poll설문조사 스킨qaQ&A 스킨search게시판 검색 스킨shop영카트 스킨social소셜회원관리 스킨visit접속자 카운터 스킨 여기서 저같은 경우는 보통 board, latest 두개 정도의 스킨은 자주 활요하는 것 같습니다.스킨의 경우 그누보드 스킨 게시판 (htt..

• format_list_bulleted 코딩/그누보드
• · 2024. 8. 13.
• textsms