쇼츠를 유튜브에서 복사한 코드 그대로 가져오는 경우, 반응형이 아니라서 기기에 따라 양옆에 여백이 생기게 된다.  적용전   반응형 쇼츠여백없이 꽉차게 보일 수 있도록 하기 위해서는 아래처럼 CSS를 조정하면 된다. 1) 먼저 쇼츠 아이프레임 코드를 로 감싸준다.  2) CSS로 iframe이 쇼츠 비율에 맞게 나올 수 있도록 한다..shorts-container { position:relative; width:100%; height:0;; padding-bottom:177.78%}.shorts-container iframe { position:absolute; width:100%; height:100%; left:0; top:0;}   적용후디바..

특정 순서의 CSS를 변경할 때 유용한 nth-child(). 다양하게 활용이 가능하다. 3의 배수인 박스 배경 변경 .box:nth-child(3n){ background:red } 20번째 이후 모든 박스 배경 변경 /* 22번 부터 이후 모든 box 폰트색 변경 */ .box:nth-child(n+20) { background:red } 1번째부터 5번째까지 박스 배경 변경 1번째부터 지정할때는 -n으로 시작하는 것 주의 .box:nth-child(-n+6) { background:red } 15번째부터 20번째까지 박스 배경색 변경 .box:nth-child(n+15):nth-child(-n+20) { background:red } 마지막에서 3번째 박스 변경 .box:nth-last-child(..

audio태그를 이용해서 음악을 넣으면 아래처럼 ... 버튼을 누르면 다운로드, 재생속도를 조절할 수 있는 메뉴가 뜨게 된다. 이 메뉴가 뜨지 않게하려면 태그 사이에 controlsList="noplaybackrate nodownload nofullscreen"을 추가하면 된다. noplaybackrate -> 재생속도 메뉴 안보이게 nodownload -> 다운로드 메뉴 안보이게 nofullscreen -> 영상의 경우 풀스크린 안되게 코드

placeholder 글자색 변경하는 방법은 아주 간단! CSS 파일에 아래 코드를 추가하면 된다. input::placeholder {color:#ccc;} input::-webkit-input-placeholder {color:#ccc;} input:-ms-input-placeholder {color:#ccc;} textarea::placeholder {color:#ccc;} textarea::-webkit-input-placeholder {color:#ccc;} textarea:-ms-input-placeholder {color:#ccc;}

디자인하면서 간혹 캘리그라피 같은 손글씨 폰트가 필요할 때가 있는데 매번 찾기도 번거로워서 자주 사용하는 폰트들을 한번 정리해보고자한다. 손글씨체도 디자인에 다용도로 활용하기 어려운 애매한 폰트들이 많은데 이 폰트들은 깔끔하고 뭔가 프로페셔널해보이는 손글씨라 다용도로 활용하기 좋다. 더군다나 무료 사용이 가능하다는 점! (다만, 자세한 허용범위는 각 홈페이지를 참고!) 1. 제주한라산 제주특별자치도의 상징성과 문화적 고유성을 살리고, 국제도시로서 디자인적 예술적 품격을 갖춘 문화예술의 이미지를 담은 미래 지향적 서체 ■ 개인/기업/상업적인 용도 사용 가능 ■ 다운로드 : https://jeju.go.kr/jeju/symbol/font/infor.htm 2. 상상토끼 꽃길 사방간데 넘실데는 꽃길처럼 비단색..

explode 배열 최소값, 최대값 구하기 보통 데이터가 array 배열로 되어있으면 min(), max()함수를 써서 바로 최소값 최대값을 구할 수 있다.$arr = array(1,2,3,4,5,6,7); $price1 = min($arr);$price2 = max($arr);  하지만 데이터가 이미 구분자로 합쳐서 들어가져있다면 (예 : 100000|1500000|200000|130000)배열로 변경한 후에 최소값, 최대값을 구할 수 있다.$str = $view['sp_price'];$sub_str = explode("|", $str);$new_str = array();foreach ( $sub_str as $row ) { $arr = explode( ',', $row );}echo min($a..

기존에 쓰던 코드 그대로 파일 업로드해서 DB저장하는 기능을 사용하는데 아무리해도 파일 업로드가 되지 않아서 며칠 고생했는데 알고보니 간단하게 해결이 가능했다.  폼 내에 파일첨부 기능을 사용하는 경우, 폼 태그 안에 enctype="multipart/form-data"  를 꼭 넣어줘야한다.

상품 분류마다 다르게 보여주기상품 분류 스킨은 동일한데 특정 일부분만 다르게 보여지게 하고 싶은 경우아래 스크립트를 상품 목록파일(/product/list.html)에 로드되는 /js/module/product/menucategory.js 파일에 추가해주면 된다.var urll = window.location.href;var urlParams = new URL(urll).searchParams;var cate_no = urlParams.get('cate_no');if(cate_no =="54") { //54번 카테고리 분류에 보여질 스크립트}  [사용예시] 나의 경우에는 카테고리별 설명문구를 추가해주기 위해 아래와 같이 코드를 넣었다.상품분류페이지에서 간단한 분류 설명은 넣을 수는 있지만 3~4줄 ..

DB 데이터 자체에는 특수문자를 포함한 데이터가 잘 들어가지는데, 불러올 때 꺽쇠나 특수문자가 들어간 부분은 삭제되고 보여지는 오류가 있어 해결할 수 있는 방법을 알아보았다.를 태그로 인식하지 않게 하기 위해서는 htmlspecialchars() 함수를 써주면 된다. htmlspecialchar()PHP 4, PHP 5, PHP 7, PHP 8 사용가능 어떤 문자들은 HTML에서 특별한 정의를 지니는데 그 의미를 보존하려면 HTML엔티티로 표현해야한다. 이 함수는 이러한 변환을 거친 문자열을 반환해준다. CharacterReplacement& (앰퍼샌드)&" (쌍따옴표)"' (따옴표)' (부등호)⁢> (부등호)>  사용예시[예시코드1]$entity= "내용내용";echo..

카페24 게시판 스킨을 새로 만드는 경우,게시판 각 항목 링크 클릭 시 기본으로 설정 되어있는 스킨(free, prouduct 등)으로 적용되어새로 만든 스킨으로 적용이 되지 않는다. 이 경우 아래와 같이 링크 부분을 변경해 주어야한다. [예시] 게시판 목록 (list.html파일)게시판 상세 페이지로 넘어가는 링크 경로를 변경해주어야한다. {$checkbox}{$no} {$icon_re}{$icon_lock}{$subject}{$icon_file}{$comment_count}{$icon_mobile}{$icon_new}{$icon_hit} {$category_name} ..

워드나 한글 프로그램이나 일반페이지에 있는 것을 그대로 복사 붙여 사용하면 필요없는 태그들까지 복사하게 된다.이 경우 Visual Studio Code에서 정규표현식으로 쉽게 태그 제거가 가능하다.  정규 표현식 적용 전  태그 제거 방법 1) Ctrl + H를 누른 뒤, 세번째 아이콘(Use Regular Expression)을 클릭한다. 또는 Alt + R 을 누르면 선택이 된다.  2) 위칸에 아래처럼 정규식을 입력해준다. 이 정규식은 정규식에 작성한 태그 외의 태그를 모두 제거하는 정규식이다. |는 '또는'이라 지우면 안되는 태그들을 모두 |로 구분해서 넣어주면 된다. 아래의 경우에는 이미지태그(img), 링크태그(a href, /a), 테이블태그(tr, td, tbody, table, /tr, ..

그누보드 영카트 게시판에서 이모지를 등록하면 물음표로 뜨게 된다. 이 경우 CHARSET을 변경해주어야한다. 1. DB 기본 셋팅 변경 ALTER TABLE `yourDBName`.`yourTableName` CONVERT TO CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci; 2. config.php 파일 변경 기존 define('G5_DB_CHARSET', 'utf8'); 변경 define('G5_DB_CHARSET', 'utf8mb4'); 3. /adm/sql_write.sql 기존 ENGINE=MyISAM DEFAULT CHARSET=utf8; 변경 ENGINE=MyISAM DEFAULT CHARSET=utf8mb4; utf8이라 되어있는 부분을 utf8mb..

갤러리나 게시판 게시글이 많아지면 카테고라이징이 필요한 경우가 생긴다. 그누보드에서 게시판에 카테고리를 생성하여, 글 등록시에 카테고리를 선택할수도 있지만 날짜에 따라 자동으로 카테고라이징 하여 볼 수 있게 추가 카테고리를 추가하는 작업을 하였다. 예시화면 기본적으로 현재 연도에 해당하는 게시물만 보여지며, 게시판 우측 상단에서 연도를 선택한 뒤 '이동하기'를 클릭하면 해당 년도에 속하는 게시물만 볼 수 있도록 하는 기능이다. 코드 수정 방법 나의 경우에는 날짜를 게시물 등록 날짜가 아닌 사진을 찍은 날짜로 선택해서 등록할 수 있도록 하여서 날짜부분이 여분필드인 wr_1로 되어있는데, 게시물 등록날짜로 구분하고 싶은 경우에는 wr_1을 wr_datetime으로 변경해서 사용하면 된다. 1) /bbs/ca..

1. 구글 사이트 등록 전 - SEO 설정 구글 사이트 등록하기전에 홈페이지 사이에 메타태그를 적절히 넣어줘야한다. SEO 메타태그 관련한 자세한 내용은 아래 포스팅 참고 https://hongpage.kr/14 [네이버 웹마스터도구] 웹사이트 빠르게 등록하는 팁 ① 메타태그 설정 네이버에 사이트 등록하기 (네이버 웹마스터도구) STEP 1. 메타태그 삽입 네이버 또는 다른 포탈사이트에 내 홈페이지를 등록하기 위해서는 몇가지 설정을 해야하는데 그 중 가장 먼저 해야할 일 hongpage.kr 2. 구글 사이트 등록하기 1) 구글에 사이트 등록은 서치콘솔에서 가능하다. https://search.google.com/search-console?hl=ko 에 접속한 뒤, 오른쪽 URL 접두어 란에 사이트 주소..

다음 검색시 사이트가 뜨게 하려면 다음에 사이트 등록을 하면 되는데, SEO설정 없이 간단하게 아래와 같이 신청하면 하면 된다. 다음 사이트 검색 등록하기 1. 다음 검색등록 페이지(https://register.search.daum.net/index.daum)에 접속한 뒤, 가운데 등록화면 URL에 등록할 홈페이지 주소를 입력한다. 2. 개인정보 및 서비스 이용 동의에 체크 후 [확인]을 누른다. 3. 검색시 나오게할 정보들을 입력하면 된다. 1) 제목(필수) : 사이트이름 2) 모바일 URL : 별도의 모바일 홈페이지 주소가 있는 경우 적어준다. ex) 카페24 쇼핑몰의 경우 기존 주소 앞에 m. 붙은 모바일 주소 3) 설명 : 검색시 사이트이름 아래에 나오는 설명 4) 설명-품목 (필수) : 검색시..