반응형 홈페이지를 만들다 보면 PC, 태블릿, 모바일 화면에 따라 br 태그에 의한 줄 바꿈이 다르게 보이는 경우가 있습니다.가나다라 마바사아자차카 타파하예를 들면 PC는 이렇게 나오는데모바일에선 아래처럼 나오는 경우입니다.가나다라 마마사아자차카 타파하 이럴 경우 br 태그에 css 스타일에 class 부여해서 조정가능합니다..pc_br {display:block}.t900_br{display:none}.mobile_br{display:none}@media all and (max-width:899px){ .pc_br{display:none !important} .t900_br {display:block !important}}@media screen and (max-width: 480px) { .t9..

이미지 슬라이드 관련 javascript 플러그인 종류가 상당합니다. slick, swiper, bxslider 등 많은데 이번에 bxslider를 활용해 한번 만들어봤습니다. 최종 결과물입니다. 물론 이미지는 저작권 때문에 다른 이미지로 변경 후 캡처했습니다. 이번 디자인의 요점은 좌 우 이미지의 흑백 처리와 페이지네이션(가운데 이미지 왼쪽 아래의 동그라미) 스타일 수정입니다. 가운데 이미지는 전부 보이게 하고 좌우 이미지는 화면에 따라 조금만 보이게 만들고 나면 이렇게 보이게 됩니다. 1. 페이지네이션 . bx-wrapper. bx-pager에 absolute 속성을 준 다음 위치를 조정합니다. 그리고 아래처럼 동그라미 모양을 변경해 주면 됩니다. .bx-wrapper .bx-pager.bx-defa..

티스토리 사용 중인 스킨이 2단 레이아웃이어서 웹 관련 코드를 넣으면 답답해 보여 스킨을 변경해 봤습니다. 기존 스킨은 카테고리를 바로 볼 수 있지만 글 본문 영역이 조금 답답해 보입니다. 그래서 티스토리에서 제공하는 스킨 중 Portfolio를 적용해 봅니다. 상단 부분은 모니터 해상도에 따라(이미지는 가로 1920px) 위치가 다르지만, 글 목록은 넓고 시원해 보여 좋네요. 그런데 본문 영역이 조금 넓어지긴 했지만 여전히 좁아 보입니다. 오랜만에 스킨편집 화면을 들어가 봅니다. 파이어폭스 개발자도구로 해당 부분 클래스명을 알아보고, 티스트리 html 편집으로 들어가서 css 복사한 다음 사용 중인 에디터에 붙여 넣기 후 해당 클래스를 찾았습니다. article_veiw 영역 스타일이 max-width..

정부에서 운영하는 공공데이터포털(data.go.kr)에는 다양한 데이터를 Open API로 이용할 수 있습니다. 오픈 API를 제공하는 서비스는 Java, Javascript, C#, PHP, Python, Node.js 등의 개발 언어로 활용 가능하고, 회원가입 또는 SNS로그인 후 신청 가능합니다. 저는 네이버 로그인으로 했고, 처음 로그인 하면 개인정보 동의 후 이용 가능합니다. 한국천문연구원 특일 정보를 신청했었고, 현재 웹사이트에 활용 중입니다. 예약 기능에 대체공휴일을 휴무로 처리해야 했습니다. 그래서 검색 결과 한국천문연구원에서 제공하는 데이터가 있다는 정보를 얻어 기능 개발을 마무리할 수 있었습니다. 공공기관데이터포털 데이터 활용 신청은 활용목적 및 내용을 입력 후 신청하면 대부분 자동승인..

PHPExcel로 엑셀 파일 생성 후 다운로드할 때 특정 셀 보호 기능 추가하는 방법입니다. 엑셀에서 검토 > 시트 보호 기능을 PHPExcel로 구현할 수 있답니다. $objPHPExcel->getActiveSheet()->getProtection()->setSheet(true); // 시트 전체 보호 $objPHPExcel->getActiveSheet()->protectCells('A1:J'.$last, '비밀번호'); $objPHPExcel->getActiveSheet()->getStyle('K1:L'.$last)->getProtection()->setLocked(PHPExcel_Style_Protection::PROTECTION_UNPROTECTED); 첫 번째 줄은 시트 전체를 보호하는 설정인데..

앞서 포스팅한 "jquery를 javascript로 바꿔보자 - 퀵스크롤(플로팅 배너) 기능" 과는 조금 다른 듯한 플로팅 배너 코드를 적어볼게요. 고정배너 위 코드대로 하면 이렇게 떠있는 배너가 생성됩니다. 여기에 아래 jquery 코드를 이용해 따라다니는 플로팅 배너로 만들 수 있습니다. 이렇게 코드를 적용한 다음 스크롤을 내리면 배너가 fixed 로 변경되면서 화면 안쪽에 고정되어 따라다니게 됩니다. 여기서 핵심은 scroll_btn 에 position fixed 를 주는 것이 아니라 scroll_btn 안에 있는 a 태그에 스타일(css)을 적용시켜 줘야 된다는 점입니다. 만약에 scroll_btn 에 해당 css 를 주면 아래처럼 화면 밖으로 나가버리게 됩니다. 위 css 부분을 잘 살펴보시기 ..