본문 바로가기

IT와 생활109

div 겹침 문제 해결 방법 - DIV의 float 사용 문제라면 clear로 해결 [div 겹침 문제 해결 방법 - DIV의 float 사용 문제라면 clear로 해결] 90년대와 2천년대에는 사이트 디자인을 거의 테이블로 했지만, 최근의 홈페이지는 반응형도 염두에 두어야 하고 속도 문제도 있기 때문에 테이블 구조로 짜는 경우가 거의 없습니다. 그래서 최근의 사이트는 대부분 DIV로 디자인 배치가 작성됩니다. 그러다보면 div 겹침 문제가 일어나서 골치가 아픈 경우가 있습니다. Div 겹침 문제 예제 Float 속성 div는 기본적으로 좌우 100%의 너비를 가지고 있고 div를 추가하면 자동으로 아래쪽으로 길이가 길어지게 됩니다. 그 중의 한 가지 문제는, 이것을 옆으로 배치하거나 할 때 float를 사용해서 배치를 하게 되는데, 이 경우에 div 겹침 문제가 종종 발생합니다. 이럴.. 2018. 10. 14.
그누보드 내용관리 변경, PHP 적용하기 방법 [그누보드 내용관리 변경, PHP 적용하기 방법] 그누보드의 내용관리란? '그누보드'의 시작은 게시판 프로그램입니다. 좀 더 자세히 설명하자면 입력내용을 DB에 저장하고 불러와서 보여주는 프로그램인 것입니다. 그러므로 그누보드로 홈페이지를 만들었다면 대부분 DB가 목록형태로 관리됩니다. 그런데 그누보드 내용관리는 하나의 문서처럼 보여주는 기능을 가지고 있습니다. 홈페이지를 제작하면 커뮤니티 사이트가 아니라면 일반 문서 페이지 개수가 게시판 페이지 개수보다 더 많게 됩니다. 그래서 그누보드에서도 일반 문서처럼 페이지를 만들 필요에 의해 그누보드 내용관리 기능이 추가되었습니다. 하지만 아직도 문제가 있습니다. 그누보드 내용관리를 변경하고 PHP를 적용하려면 기능의 한계가 있기 때문입니다. 내용관리는 게시판에.. 2018. 10. 9.
아이프레임 가로 세로 비율 - iframe 크기 자동 조절 [아이프레임 가로 세로 비율 - iframe 크기 자동 조절]​ [엮인 글]애드센스, 아이프레임으로 광고 수익을 내도 될까? - iframe iframe 크기 자동 조절하기 유튜브 등의 공유 방법이 아이프레임이기 때문에, iframe을 사이트에 넣을 때 알아두어야 할 것이 아이프레임 가로 세로 비율 자동 조절 방법입니다. 그러나 iframe의 속성 자체에 있는 기능을 사용하는 것이 아니라 꼼수를 이용하려고 합니다.​웹사이트를 개발하다 보면 아이프레임을 이용해서 외부 컨텐츠를 가져오게 되는데, 문제는 유튜브 등의 아이프레임 공유 코드를 딸 때 이미 크기가 정해져 있다는 것입니다. (iframe 가로 세로 크기가 공유 코드 속에 들어 있음)​유튜브 같은 경우 일반적으로 아이프레임 가로 세로 비율은 560px.. 2018. 10. 5.
그누보드 게시판 리스트에서 공지사항만 다른 설정하기 [그누보드 게시판 리스트에서 공지사항만 다른 설정하기] [엮인 글]표준화 - DTD 선언 : 종류와 사용 방법 / DTD와 쿼크모드 공지사항 게시물에만 설정하기 그누보드는 홈페이지 제작과 회원관리 등의 용도로 사용되지만, 그 시작은 게시판이었습니다. 그누보드 이외에도 제로보드나 킴스보드 등도 그 뿌리는 역시 게시판입니다. 그래서 게시판을 자유자재로 다루는 것은 그누보드의 기초를 다루는 것이기도 합니다. 게시판으로 구성된 그누보드에는 글을 쓸 때 공지사항으로 지정해서 맨 위에 따로 나타나도록 할 수 있습니다. 이것은 다른 일반 글들과 구분하기 위해서 입니다. 이렇게 볼 때, 그누보드 게시판 리스트에서 공지사항만 다른 설정을 해야 할 때가 있습니다. 글자 색을 바꾼다거나 크게 보이게 한다거나 배경 그림을 넣.. 2018. 10. 5.
실제 아이피 알아내기 - 특정 아이피 적용 소스 코드 (아이피주소 확인) [실제 아이피 알아내기 - 특정 아이피 적용 소스 코드 (아이피주소 확인)]아이피주소 확인을 하는 소스 코드는 꽤 있지만, 그 중에는 가짜 아이피를 가져오는 경우가 있습니다.이것은 여러 가지 경로를 거치는 네트워크 특성 상 종종 있는 일이며 프록시 서버를 거치는 경우에는 프록시 서버의 아이피를 넘겨 받게 됩니다. 예를 들어서 브라우저 설정이 외국 프록시 서버로 되어 있을 경우 엉뚱하게 네덜란드 아이피를 받는 것입니다. 이럴 때는 실제 아이피주소 확인으로 검수하는 과정이 있어야만 실제 아이피를 알아내기가 가능합니다. 또한 웹사이트를 제작하다보면 항상 모든 페이지를 하나의 코드만으로 운영할 수 없음을 알게 됩니다. 예를 들어 운영자만 들어갈 수 있는 페이지를 만드는 것은 로그를 확인하면 되지만, 내 집에서만.. 2018. 10. 4.
구글 맞춤검색 검색엔진 - 자신의 검색창을 이용하는 방법 [구글 맞춤검색 검색엔진 - 자신의 검색창을 이용하는 방법]구글은 검색엔진 회사답게 자사의 검색엔진을 이용한 서비스를 하고 있습니다. 대표적인 것이 바로 구글 맞춤검색 검색엔진입니다.간단히 요약하자면, 구글의 검색 기능을 다른 사이트/홈페이지에서 빌려다 사용할 수 있다고 하겠습니다. 물론 인터넷에서 구글 맞춤검색 신청과 검색창 달기를 찾아보면 매우 많은 설명을 볼 수 있습니다. 하지만 대부분 검색창 달기만 설명하고 있으며, 마치 자신의 사이트인 것처럼 검색페이지에 자연스럽게 연결되는 방법에 대해서는 설명문을 찾기가 힘듭니다. 이런 부분은 구글 도움말에서도 역시 찾아보기 힘듭니다. 그래서 이 문서에서는 구글 맞춤검색 검색엔진을 자신의 사이트의 검색엔진인 것처럼 활용하는 방법에 대해서 설명합니다. (주 내용.. 2018. 10. 3.
CSS 둥글게 하기 - 모서리 둥글게, 테두리 둥글게, 외곽선 둥글게 만들기 CSS : border-radius [CSS 둥글게 하기 - 모서리 둥글게, 테두리 둥글게, 외곽선 둥글게 만들기 CSS : border-radius] 웹디자인을 하다보면 모든 개체가 사각형이라서 지겨울 때가 있습니다. CSS 둥글게 만들기는 창의적인 웹디자인에 필요한 방법일 것입니다.div나 li의 border 모서리를 둥글게 하기는 CSS에서 border-radius 속성을 사용합니다.border-radius 속성은 포토샵 없이도 외곽선을 둥글게 만들 수 있다는 장점이 있습니다. 기본적인 div 등은 html, php문서에서 개체를 만들어 준 후에 CSS파일을 열어서 테두리를 둥글게 만드는 속성을 주는 방법입니다. DIV, LI, SPAN 등의 개체를 만든 후 적용한다 예를 들기 위해 div로 사각형을 만들고 div개체의 모서리를 둥글.. 2018. 10. 2.
인풋값 가져오기(input값 가져오기) 해서 링크로 보내기 [인풋값 가져오기(input값 가져오기) 해서 링크로 보내기] 인풋값 가져오기 인풋(input)은 여러 가지 경우에서 자주 볼 수 있습니다.검색창에 입력을 한다든지, 회원가입을 한다든지 하는 모든 입력행위는 웹페이지 의 글자입력 상자를 통하는 것입니다.이 인풋을 만드는 가장 대표적인 것이 form의 value값입니다. 대부분의 검색창은 바로 이 form으로 되어 있습니다. 이 글에서는 form의 value값을 가져오기 해서 링크로 새창을 띄우는 코드 소스에 대해 알아 보려고 합니다.사용자가 아직 검색을 하지 않았어도 입력된 input값을 가져오기해서 그 값으로 검색엔진으로 연결하는 예입니다. input값 가져오기을 가져오기해서 링크로 보내기 위해서는 다음 세 가지가 필요합니다. form문과 스크립트의 l.. 2018. 10. 1.
스마트에디터 본문 링크 새창으로 띄우기 스크립트 [스마트에디터 본문 링크 새창으로 띄우기 스크립트] [엮인 글]인풋값 가져오기(input값 가져오기) 해서 링크로 보내기 스마트에디터 본문 링크 새창 코드 스마트에디터는 오픈 에디터 프로그램으로 그누보드, 네이버 등에서 위지위그를 구현하기 위해 글 입력 에디터로 사용되고 있습니다. 그런데 스마트에디터가 업데이트되면서 어떤 버전에서는 글 내부에 적힌 URL 주소의 링크가 자신의 창에서 링크되고 있습니다. 그래서 스마트에디터의 본문 링크를 새창으로 띄우기 하려는 문의도 꽤 있습니다. 스마트에디터의 자신 창 링크의 원인은 스마트에디터에 URL이 적힐 때 링크 타겟이 _self로 잡히기 때문입니다. 더구나 스마트에디터에는 "새창" 띄우기 옵션도 없습니다. 사용자 입장에서는 속수무책인 셈이 됩니다. 이럴 때 스마.. 2018. 10. 1.
검색창 코드 소스와 검색창에 미리 입력된 검색어 - placeholder [검색창 코드 소스와 검색창에 미리 입력된 검색어 - placeholder] 검색창 코드 소스 검색을 지원하는 사이트를 다니다 보면 검색창에 "검색어를 입력해 주세요" 같은 단어가 미리 입력되어 있는 것을 보게 됩니다. 이것은 placeholder 속성을 이용한 임시 검색어입니다. placeholder란 "간단한 힌트"라는 의미의 코드인데, 이것을 검색창 코드 소스에 사용하면 손 쉽게 미리 검색어를 입력해 놓을 수 있습니다. 그런데 사실은 검색창에 미리 검색어를 입력하는 과정보다 검색창을 만드는 것이 먼저 이루어져야 하므로 검색창 코드 소스를 먼저 작성하겠습니다. HTML이나 PHP 파일 등의 필요한 부분에 먼저 아래의 검색창 코드 소스를 입력해 봅시다. // 검색을 처리할 페이지로 검색어를 보내는 기능.. 2018. 9. 30.
스크롤 때 상단 고정 코드 - 상단 고정 레이어 스크립트 [스크롤 때 상단 고정 코드 - 상단 고정 레이어 스크립트] 스크롤 때 상단 고정 코드 준비하기 요즘은 메뉴 등의 일부가 스크롤해도 상단에 고정되는 CSS가 많이 쓰이고 있습니다.웹브라우저에서의 상단 고정 레이어는 DIV나 nav 요소가 브라우저의 상단에 닿으면 먼춰 서서 계속 보이게 합니다.상단 고정 레이어 CSS는 PC에서 뿐만 아니라 모바일 홈페이지를 만들 때도 아주 유용하게 사용할 수 있습니다. 상단에 고정되는 레이어를 제작하기 위해서는 준비물 1개와 HTML, PHP 파일과 CSS파일, 이렇게 두 가지가 필요합니다. 스크롤 상단 고정 레이어 CSS를 시작하기 전에 먼저 준비해야 할 것이 있습니다. 그것은 jquery입니다. 제작 중에 사이트 내에 jquery파일을 업로드 하거나 웹링크로 불러온 .. 2018. 9. 29.
게시판 목록 리스트 글자 크기, 본문 글자 크기 CSS로 조절하기 - 스킨 수정 [게시판 목록 리스트 글자 크기, 본문 글자 크기 CSS로 조절하기 - 스킨 수정] 그누보드 스킨 수정 경로 한동안 한국의 사이트들은 작은 글씨, 오밀조밀한 배치가 유행했었습니다. 지금 보면 눈이 아파서 어떻게 사용했을까 할 정도로 촘촘하고 글자도 작습니다.물론 당시엔 모니터 해상도가 낮아서 지금보다 상대적으로 글자가 컸던 이유도 있습니다.그러나 그런 점을 감안하더라도 현재의 사이트들은 글자 크기가 많이 커졌습니다. 대부분의 게시판 목록과 본문 글자 크기는 CSS를 사용하여 한 번에 조절하고 있습니다.그누보드의 경우에도 마찬가지 입니다. 특정 부분에 CSS를 적용하는 것은 굳이 그누보드가 아니더라도 다 같으니, 스킨에 대해서 알아보도록 합시다. 그누보드에서 기본으로 적용된 스킨은 "그누보드5"를 기준으로.. 2018. 9. 28.

티스토리툴바