본문 바로가기

HTML39

사이트 - 무료 HTML 디자인 템플릿 모음 / webjangi.com 무료 웹사이트 샘플 템플릿 모음 사이트 안녕하세요. 고코더 입니다. 개발자가 사이트를 만들다보면 가장 먼저 부딪치는 문제가 바로 웹사이트 디자인 입니다. 기능은 자신있는데 아무리 만들어도 제대로된 레이아웃이 없으면 없어 보이는 홈피가 됩니다. 그래서 보통 자유롭게 쓸수있는 무료 템플릿을 쓰게 마련인데요. 생각보다 구하기 어렵고 구해도 내가 원하던 모양이 아니라 난감한 경우가 많습니다. 그런데 최근에 좋은 사이트를 하나 알아냈습니다. ▼ 웹쟁이(?)닷컴 입니다. 일반 기업 홈페이지 같은데 무료 디자인을 모아두고 있습니다. 갯수도 많고 미리보기가 잘되어 있습니다. http://www.webjangi.com/design/freedesign ▼ 샘플보기, 보관하기, 다운로드등. 미리 볼 수 있는게 장점이네요 그.. 2019. 3. 12.
XE - 비회원 댓글에 이메일,홈페이지 입력창 없애기 스케치북 스킨 비회원 댓글 글쓴이와 비밀번호만 쓰게 하기 안녕하세요. 고코더 입니다. 개인 홈페이지 고코더넷을 만들고 나니 회원기능은 아예 사용을 하지 않고 있습니다. 그런데 문제는 XE는 오래된 CMS라 그런지 이메일 주소와 홈페이지 주소까지 넣어야 댓글이 쓸수 있는 아주 귀찮은 문제가 있습니다. ▼ 이메일 주소부터 홈페이지 주소까지 쓰라니... 누가 비회원으로 댓글을 달고 싶을까요, 그래서 한번 이 기능을 수정해보겠습니다. 게시판 하면 50프로 이상이 스케치북5 많이 사용하시니 이 스킨을 수정해보겠습니다. ▼ 해당 위치에 소스로 이동해주세요. (개인마다 조금 다를 수 있습니다) /html/modules/board/skins/sketchbook5/_comment.html ▼ 아래 소스의 위치를 찾아주세.. 2019. 3. 3.
이클립스 - JSP 수정시 반영하기 / publish to the server Eclipse HTML 수정 즉시 반영 안녕하세요. 고코더 입니다. 이클립스로 개발 시에 퍼블리싱 페이지를 수정 할 경우가 있습니다. 컴파일 언어라 그런지 간단한 디자인 페이지 수정시에 즉시 반영되지 않습니다. 서버를 재시작하거나 새로 고침을 몇번하면 이제야 변경된 페이지를 확인 할 수 있습니다. 그런데 이 버튼을 보셨을 겁니다. ▼publish to the server (단축키 : Ctrl + Alt + P) 이 버튼을 누르면 현재 수정된 페이지를 바로 확인 할 수 있게 해주는 기능입니다. 서버에 올라간 파일로 파일을 대체 해줍니다. 이클립스로 개발시에 html 수정이 즉시 반영 되지 않으면 이 버튼을 눌러 주세요 마무리 이클립스 편리 하네요! 2018. 8. 3.
브라우저 - 현재 페이지 저장 / 크롬 / IE 크롬 현재 보고 있는 페이지 저장 안녕하세요 고코더 입니다. 오늘은 재밌는 짤이나 정보 글을 파일로 보관하고 싶을때 할 수 있는 방법입니다. 그리고 개발자라면 사이트 분석을 위해서도 좋은 방법이겠네요. ▼ 방법은 엄청 간단합니다. Ctrl + S만 기억하면 됩니다. + 각종 편집기 에서도 저장으로 사용하는 단축키입니다. 이 단축키를 누르면 브라우저는 현재 페이지를 저장합니다. ▼ 크롬부터 보시죠. 제 블로그 페이지를 저장해보겠습니다. 페이지에서 단축키를 꾹 눌러주세요 Ctrl + S ▼ 그럼 저장페이지가 뜹니다. 저장을 눌러 보실까요 ▼ 그럼 다운로드를 실행합니다. ▼ 다운받은 파일을 살펴보니 두벌이 있네요. HTML 페이지와 각종 기타 파일들이 묶여 있는 폴더가 있습니다. HTML로 나와있는 버튼을 누.. 2018. 2. 6.
meta - X-UA-Compatible 태그 / 익스플로러 호환성 익스플로러 버전별 호환성 쿼크 설정 익스플로러의 최대 단점은 버전별로 보여지는 웹의 모습이 많이 다르다는 것입니다. 그래서 익스 버전별로 디버깅 하면서 퍼블리싱을 하는 회사가 지금도 많죠. 사용자마다 익스 버전이 다르니 하나라도 틀어지면 고객센터 메일이 많이 쌓이겠죠. 그래서 마이크로는 X-UA-Compatible 태그로 웹의 호환성을 지정할 수 있도록 하였습니다. 바로 X-UA-Compatible 태그입니다. 1 2 3 4 5 6 cs 위의 태그는 말그대로 개발된 환경을 기록하면 브라우저는 그 버전으로 해당 웹을 호환성 보기로 오픈을 합니다. edge라고 기록된건 IE 브라우저의 최신 버전의 엔진을 사용하라는 뜻이다. 1 cs 결국은 웹을 개발했다면 edge 태그를 기록해야 합니다. 과거 브라우저에 최.. 2018. 1. 30.
IIS - HTML을 ASP로 인식 / 스크립트 매핑 HTML in ASP 언어를 숨기기 가장 쉬운건 HTML 에 서버언어로 인식하게 하는 방법입니다. PHP나 ASP같은 스크립트 언어는 거의 필수적인 셋팅인데요 이번 시간은 IIS에서 HTML 안에 ASP를 실행시킬 수 있도록 만들어 보겠습니다. 우선 IIS를 실행합니다 시작->inetmgr->엔터 IIS가 없다면 아래 강의를 먼저 확인하세요 -> [IT_팁/WindowServer] - IIS - 윈도우7 인터넷 정보 서비스(IIS) 설치하기 ▼IIS에 들어왔다면 사이트를 클릭한 후에 오른쪽 위에 있는 "스크립트 매핑 추가"를 클릭합니다. ▼그리고 해당 내용처럼 입력을 해주세요 요청 경로 : *.html 2018. 1. 15.
Front- 프론트엔드 디자인 무료 공개소스 / codepen.io 코드펜 사이트 사용법 코드펜은 흥미로운 사이트입니다. 프론트엔드 디자이너들이 만들어놓은 수많은 오픈 소스가 존재합니다. 업무의 있어서도 상당히 도움이 되는 좋은 곳입니다. 누구나 와서 가입 후에 HTML , CSS , JS 를 코딩해서 결과물을 놓고 자랑하는 사이트입니다. 프론트 개발자라면 학습으로도 좋습니다. ▼우선 사이트 주소는 이렇습니다. 사이트 디자인도 CI도 이쁘고 정갈하네요 https://codepen.io/ ▼ 공개된 소스중 하나를 선택하여 살펴보겠습니다 크리스마스 볼이라는 작품인데요 아래 URL로 접근해보세요 https://codepen.io/Mamboleoo/pen/VrdYxN ▼그럼 HTML, CSS, JS 가 있습니다. 해당 작품의 코딩 결과입니다. 이것들을 복사해가서 실행하면 그대로.. 2018. 1. 11.
사이트 - 개발소스 라인 정렬 하기 / HTML / JS 개발코드 정렬 하기 얼마전 소스 리뷰를 보는데 MIN으로 압축된 JS 파일을 유지보수 하는 분을 보았습니다. 한줄로 된 그 코드를 분석하는 개발력에 놀라웠지만 생산적인 면에서는 소스를 정렬하고 유지보수 하는게 좋아 보이더군요 소스를 정렬 하는 방법은 상당히 많습니다. 첫번째로 해당 기능을 제공하는 사이트에서 정렬 하는 방법이 있고 두번째로 IDE 기능을 통해 하는게 사실 가장 좋고 세번째는 손으로 직접 정렬 하는 방법이 있을 것입니다. 그래서 오늘은 첫번째 방법을 알아보겠습니다. 바로 http://jsbeautifier.org/ 사이트를 활용 하는 방법 입니다. ▼ 접속하면 아래와 같이 바로 기능 페이지가 나옵니다. 기능에 충실하네요 ▼이번에는 정렬해볼 소스를 구해봅시다. http://code.jquer.. 2017. 12. 16.
HTML5 - meter , progress 태그 비교 미터, 프로그래스 태그 차이 오늘은 간단한 HTML을 설명하려고 합니다. progress는 흔히 사용하는 태그입니다. 진행률 나타낼때 참 좋죠. 그런데 meter라는 태그도 progress와 너무 비슷합니다. 그래서 오늘은 이 두가지의 HTML 차이를 알아보려 합니다. 결론부터 말하면 progress : 진행율을 나타내기 위해, 동적 데이터 meter : 현재 점수나 범위를 나타낼때, 정적데이터 ▼ 아래 소스를 크롬에서 확인하면 meter 태그와 progress 태그 *당신의 수학점수는? 90점-> 90 *현재 프로젝트 완성률은 70%-> ▼ 아래처럼 보입니다. 특이점은 progress 태그는 눈금이 보이죠? 앞으로 뭔가 더 진행될거 같으 느껴집니다. 동적으로 보이고 meter 태그는 정적으로 보입니다... 2017. 12. 15.