웹사이트 css grid를 활용한 레이아웃

웹사이트 레이아웃을 위한 css는 몇 번을 거쳐 어느 정도 정착하게 되었습니다.2000년도 초기(또는 그 이전)에는 포토샵 slice 기능을 이용한 table layout, 그 후 몇 년간 float, position을 이용한 레이아웃이 주를 이루었던 기억이 있습니다. 마이크로소프트 익스플로러(ie) 때문에 삽질한 추억이 많네요..;;그리고 몇 년 전부터 flex, grid라는 스타일을 이용해 레이아웃을 많이 잡는데 그중 grid 공부할 때 기록해 둔 코드를 다시 살펴봤습니다. Logo main content1 content2 content3 content4 content5 content6 content7 content8 c..

반응형 홈페이지를 만들다 보면 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); 첫 번째 줄은 시트 전체를 보호하는 설정인데..