IT_Developers/HTML27 meta - 메타 태그로 검색 엔진 접근차단하기 / robots, noindex, nofollow 메타 태그를 활용한 검색엔진 수집 금지 안녕하세요. 고코더 입니다. 루트 파일 밑에 robots.txt로 검색엔진을 차단하기도 하지만 메타 태그를 활용해 검색엔진의 접근을 차단이 가능합니다. 보통 사이트를 개발 중일 경우 미완성의 데이터를 가져가게 만들기보다는 해당 태그를 활용해 검색엔진을 차단할 수 있습니다. 그리고 나중에 해당 태그만 제거하면 색인 해가겠죠 아래 태그를 홈페이지 head 안에 선언하면 됩니다. ▼ 모든 검색 엔진을 차단 1cs ▼ 특정 검색 엔진만 차단 합니다. 순서대로 구글, 다음, 네이버 해당 bot은 각 엔진에서 지정한 name입니다. 123cs 공통 파일의 해당 태그를 입력하면 모든 페이지는 수집되지 않습니다. 반대로 특정 페이지에만 입력하면 해당 페이지만 가져가지 않습니다. .. 2019. 1. 6. HTML5 - Video 태그 사용하기 / 예제 HTML5 비디오 태그 샘플 안녕하세요. 고코더 입니다. 웹에서 비디오를 재생 시킬때 애용하던 태그가 있습니다. embed : 멀티미디어 태그 ▼ 이런식으로 src에 주소 값만 넣어주면 1cs ▼ 추억의 플레이어 스킨을 볼 수 있습니다 . HTML4에서 사용이 중지되었지만 HTML5에는 다시 사용이 가능하지만 권장사항은 아닙니다. 왜냐면 HTML5에 Video 강력한 태그가 존재하기 때문입니다. ▼ 아래의 코드를 웹에서 실행하면 12345Colored by Color Scriptercs ▼ 새로운 모습의 비디어 플레이어가 나타납니다. 훨씬 세련된 모습입니다. ▼ 이 태그의 컨트롤바 속성을 알아보겠습니다. controls : 플레이어 컨트롤바가 나타납니다. autoplay : 플레이어 컨트롤바가 나타납니다.. 2018. 12. 26. HTML - og(open graph) 태그 란? / 카톡,sns 미리보기 지정 open graph 태그란? / 썸네일, 제목 설명 등의 안녕하세요. 고코더 입니다. SNS나 카카오톡,라인 등 일상을 공유하는 커뮤니티 프로그램에서 링크를 공유하면 자연스럽게 보이는 썸네일, 제목, 설명들이 있습니다. ▼ 고코더 블로그를 카카오톡 으로 공유했을 때나타나는 og 태그 메타 정보 해당 화면에서 보이는 제목 : "고코더의 IT Express" 설명 : "각종 프로그래밍 강의... " 이미지: 고코더.jpg 등이 바로 open graph 태그로노출된 정보 입니다. ▼ 제 블로그의 소스 보기를 보면 아래처럼 og 태그가 입력 되어 있습니다. 규약 된 해당 태그를 읽고 카카오톡도 미리보기가 가능한 정보를 노출 해주고 있습니다. ▼이 규약은 페이스북에서 시작 되었습니다. http://bit.ly/2.. 2018. 4. 26. HTML - 동적으로 추가된 input 값이 결과에서 받아지지 않을때 append innerhtml로 추가한 동적 Input이 결과 값에서 넘어오지 않을때 안녕하세요. 고코더 입니다. 최근에 아주 간단하고 복잡한 문제를 마주했습니다. 동적으로 추가한 인풋 박스가 결과 페이지에서 전송 받을 수가 없었습니다. 그럴리가 없는데 하면서 계속 시도했지만 WAS 문제부터 서버스크립트 버전까지 다양하게 살펴봤지만 확인할 수 없는 오류였습니다. 그러던중 HTML 구조를 만지면서 테스트 한결과.. 너무나 간단한 실수가 있었습니다. ▼아래 코드를 한번 테스트 테스트 해보시길 바랍니다. 1234567891011121314151617181920212223242526272829303132333435363738394041 function falseIn(){ var text = ""; $('#inH.. 2018. 4. 12. 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. Front- 프론트엔드 디자인 무료 공개소스 / codepen.io 코드펜 사이트 사용법 코드펜은 흥미로운 사이트입니다. 프론트엔드 디자이너들이 만들어놓은 수많은 오픈 소스가 존재합니다. 업무의 있어서도 상당히 도움이 되는 좋은 곳입니다. 누구나 와서 가입 후에 HTML , CSS , JS 를 코딩해서 결과물을 놓고 자랑하는 사이트입니다. 프론트 개발자라면 학습으로도 좋습니다. ▼우선 사이트 주소는 이렇습니다. 사이트 디자인도 CI도 이쁘고 정갈하네요 https://codepen.io/ ▼ 공개된 소스중 하나를 선택하여 살펴보겠습니다 크리스마스 볼이라는 작품인데요 아래 URL로 접근해보세요 https://codepen.io/Mamboleoo/pen/VrdYxN ▼그럼 HTML, CSS, JS 가 있습니다. 해당 작품의 코딩 결과입니다. 이것들을 복사해가서 실행하면 그대로.. 2018. 1. 11. HTML5 - meter , progress 태그 비교 미터, 프로그래스 태그 차이 오늘은 간단한 HTML을 설명하려고 합니다. progress는 흔히 사용하는 태그입니다. 진행률 나타낼때 참 좋죠. 그런데 meter라는 태그도 progress와 너무 비슷합니다. 그래서 오늘은 이 두가지의 HTML 차이를 알아보려 합니다. 결론부터 말하면 progress : 진행율을 나타내기 위해, 동적 데이터 meter : 현재 점수나 범위를 나타낼때, 정적데이터 ▼ 아래 소스를 크롬에서 확인하면 meter 태그와 progress 태그 *당신의 수학점수는? 90점-> 90 *현재 프로젝트 완성률은 70%-> ▼ 아래처럼 보입니다. 특이점은 progress 태그는 눈금이 보이죠? 앞으로 뭔가 더 진행될거 같으 느껴집니다. 동적으로 보이고 meter 태그는 정적으로 보입니다... 2017. 12. 15. CSS - 엑셀 다운로드 출력시 셀서식 지정 엑셀 다운로드 출력시 셀서식 지정 안녕하세요 고코더 입니다. HTML을 작성하고 이를 엑셀로 다운로드 받을 수 있습니다.프로그램 개발시 만들어야 하는 대표적 기본 기능 입니다. 자주 마주치는 문제는 셀서식에 "01" 데이터를 숫자로 넣으면 "1"로 표현하여 노출 됩니다. ▼엑셀에서도 설서식 설정 없이 "01"을 입력하면 "1"로 기록 됩니다.그래서 그런지 HTML로 엑셀 다운로드 기능으로 언어에서 엑셀을 다운받으면01를 1로 노출 됩니다. 이럴땐 HTML에 style에 서식을 설정하면 해결 가능합니다. ▼대표적으로 실무에서 많이 쓰는형식만 우선 예제로 만들어 봤다.숫자형식 문자형식 소수점 형식날짜형식 아까처럼 "01"이 정상적으로 보일려면 문자형식으로 지정하면 해결 됩니다. 이외에 다양한 형식은 ->ht.. 2017. 7. 5. HTML - 프레임(frame)으로 홈페이지 구동하기 예제 프레임(frame)으로 홈페이지 구동하기 이유가 어찌 됐든 frame 안에사이트를 구동하여 서비스 하게될 계기가 있습니다.URL 갖다 쓰는 구조라던가 템플릿 구조라든지 아래 HTML에 SRC 속성에 사이트 주소를 주면깜쪽 그 페이지에 있던 사이트 마냥 홈페이지가 구동 될 것입니다. ▼ 아래 소스를 실행해보자123456789101112 Colored by Color Scriptercs ▼결과 화면HTML 페이지에 지금 보는 제 블로그포스트가 빈틈없이 노출되고 있는게 보입니다. 2017. 7. 5. 이전 1 2 3 다음
