Blog Content

[HTML] 크롬 input 자동완성 차단 여러 사람이 사용하는 PC에서 아이디 패스워드가 자동으로 입력이 될경우 보안상 문제가 발생할 수 있다.그렇기에 보안에 민감한 사이트들은 아이디 패스워드 입력란을 자동완성이 안되도록 하는 경우가 많다.위와 같은 경우에 ID, PASSWORD를 자동완성 안되도록 아래와 같이 처리하면된다. 값에 "false"를 사용하는 경우가 대부분이다. 하지만 문제는 off는 inter Explorer에서 사용되는 값이며, 다른 웹 브라우저에서는 사용이 되지 않는다."new-password"를 사용 할 경우 크롬에서 적용 되는것 을 알 수 있다.

[CSS] 크롬 input 노란색 배경 원하는 색상으로 변경하기 로그인창을 이쁘게 만들고 싶은 욕심에 border 곡선에 배경을 반투명으로 하고자 시도 하였다 그런데 크롬기능중 자동입력 기능일때 배경색이 크롬 기본설정(user agent stylesheet)에 의하여 위의 이미지 처럼 노랑색으로 지정되는것을 알 수 있다. 이럴 경우 사용 할 수 있는 방법은 아래와 같다. input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { transition: background-color 1000s ease-in-out 0s; /* input 배경색상 지우기} 어떻게..

onclick는 html 문서 안에서 Javascript 제어 할 수 Attribute입니다.js파일에서 event를 등록하여 제어 하는 방법도 있지만 html 문서 수정시 문서를 보고 직관적으로 제어 하는 부분을 파악하기 쉽도록 하기위해 저는 onclick를 자주 사용합니다. 즉시실행함수 안에 제어 하고자하는 함수가 전역함수가 아닐 경우 제어하지 못합니다.그렇기에 외부에서 접근 할 수 있도록 작성하도록 한다. 전역 함수가 아니므로 onclick로 접근이 불가능하다 button 외부 접근 허용 가능하도록 변수선언으로 경로를 만들어 주면사용이 가능하다 button

git/github는 무엇인가?git은 버전 관리 시스템 (Version Control System)의 종류중 하나 입니다.git을 처음 접하시는분들은 대체 git이 뭐길래 다들 사용을 권하는지 모르겠다 의문을 가지시는 분들이 많습니다.하지만 많은 사람들이 권하는 만큼 git의 기능을 알고나면 큰 매력을 느끼시게 될거라 생각합니다.git는 Repository로 버전별로 정리하는것을 말하며, github는 서버에서 Repository를 관리하는 시스템을 말합니다.쉽게 풀이하자면 git은 버전별 소스관리 시스템이라 보시면되고 github는 git을 서버컴퓨터에서 구현해주는 서비스라 보시면 됩니다. 1. git은 무슨 프로그램?코딩을 하다보면 이전 작업했던 내용들을 기억하기 위해 주석을 달거나 별도의 파일을 ..

저는 뭔가 새롭게 시작할때 항상 실수 하는것이 있습니다.빨리 배우고 싶은 조급한 마음에 기초를 놓치고 가는것이죠... 그러다보니 기본 규칙에 어긋나거나 작업도중 돌이킬수 없는 일들이 발생하고는 합니다.여러분은 그러시지 않기를 바라며, HTML의 가장 기초가 되는 내용으로 시작하겠습니다. HTML이란?HTML 이란 Hyper Text Markup Language 의 약자로써 월드와이드웹 문서를 작성하는 Markup Language 입니다. HTML 은 여러 태그들로 구성되어 있으며 각 태그들을 사용하여 원하는 형태의 문서를 만들어 갈 수 있습니다. 인터넷문서는 Hyper Text 의 원리를 이용하여 여러 문서를 링크시켜 다양한 정보를 손쉽게 검색하여 볼 수 있게 만들어 줍니다. 이러한 다양한 표현의 가능성..

속성(Attributes) : HTML속성 HTML 요소를 구성하거나 사용자가 원하는 기준에 맞게 다양한 방식으로 동작을 조정하는 추가 값입니다.쉽게 이야기 하자면 html 자체적 속성값을 말하는 것 입니다. Attributes은 일반적으로 아래 예제와 같이 이름 / 값 쌍으로옵니다. name = "value"참고 : 아래 예의 빨강색 부분이 속성명(Attributes name) 파랑색은 속성(Attributes)의 값(value)으로 보시면 될것 같습니다.예) 참고 문서 html속성리스트 : https://developer.mozilla.org/ko/docs/Web/HTML/Attributes 아래표는 위 링크의 내용을 간단하게 요약한 목록 입니다. 자세한 내용을 확인하고 싶으시면 위 링크를 한번쯤 둘..

웹 코딩 작업중 가장 기본이 되는 내용입니다. html공부를 목적으로 하고자 하는분 분이라면 아래 내용은 별거 아닐지라도 기본적으로 숙지하셨으면 좋겠습니다. BLOCK Element1. 줄 바꿈이 일어난다.2. 블록 요소 안에는 텍스트와 인라인 요소를 포함할 수 있다.3. 블록 요소 안에는 블록 요소가 포함될 수 있지만. 경우에 따라 포함 될 수 없는 요소도 있다.예) P태그 같은 경우 블록 요소임에도 자식요소로 가질 수 없다. 대표적인 블록요소 - INLINE Element1. 줄 바꿈이 일어나지 않는다.2. 인라인 요소 안에는 텍스트와 인라인 요소를 포함 할 수 있다.3.인라인 요소는 블록 요소를 포함 할 수 없다.4. 인라인 요소와 텍스트는 블록 요소 안에 포함되어야 한다. 대표적인 인라인요소

홈페이지를 제작하다보면 하나의 호스팅 서버에서 두가지 도메인으로 각각 다른 사이트를 구현하고 싶을때 여러가지 방법이 있겠지만접속한 도메인 주소에 따라 리다이렉션(redirection)시켜 각각 다른 폴더로 이동하도록 하는 방법을 소개해 드리겠습니다.( 저 같은 경우는 하나의 호스팅 서비스에서 두개의 다른 도메인을 가지고 각각 다른 서비스를 하고 싶을때 사용했습니다. ) 가장 많이 사용되는 리눅스 서버를 예를 들겠습니다.우선 서버 환경에 Apache모듈중 mod_rewrite모듈이 설치 되어 있어야 합니다.웹서버 가장 상위 디렉토리에 .htaccess 파일이 존재해야 합니다. (없을 경우 만드시면 됩니다.) mod_rewrite는 서버 Request를 정해진 Rule에 의해서 다른 URL or File로 ..

웹 개발에 앞서 구체화 하는 작업 프로토타이핑을 할때 노트에 그림을 그린다거나, 또는 포토샵이나 그외 툴로 작성 하시는 분들도 상당히 많습니다.그렇게 작업하는것도 나쁘진 않지만. 관련 툴을 사용하는 이유는 항상 같습니다. 작업효율이죠.....아래와 같은 프로토제작에 최적화된 프로그램을 사용하여, 불필요한 작업을 최소화 하기위해 사용해보시기를 권해 드립니다. Kakao OVEN (무료)다음카카오에서 제공하는 서비스이며, 프로토타이핑을 하기위한 웹기반 툴이다. (단 현재까지 인터넷 익스프롤러에서 작동하지 않습니다. 쿠롬을 추천해 드립니다.)카카오오븐 발취 소개글 :마치 데스크톱 애플리케이션을 웹으로 옮겨놓은 듯한 편리함과 직관적이고 아름다운 UI 컴포넌트 그리고 강력한 편집기능들은 당신의 손끝 아이디어를 단..

Web editor란?웹 개발에 앞서 보다 쉽게 빠르게 진행하기 위해서 필요한 도구가 바로 웹에이터 입니다.웹 에디터가 아니더라도 윈도우 기본 도구 메모장으로도 가능하고 그외 문서도구로도 가능하지만위 도구는 웹개발에 있어 특화되어 있지 않기때문에 전문 툴을 사용하는것보다 많은 시간을 투자하게 됨으로 추천하지는 않습니다. 왜? Web editor를 사용하는것이 좋을까요?간단하게 말씀드리자면 태그의 시작점 끝점을 판단하기 용의하며 태그별 색상으로 표현해주기 때문에 빠른시간안에 구조를 판단하기 유리 합니다.대표적인 기능중에는 태그 예제를 표시해주거나 오류표기, 문법단축키등이 있으며, 문법을 보정해주는 기능을 가진 에디터도 있습니다.그렇듯 개발사마다 다소 차이가 있으나 각각의 웹개발자의 입장에서 용의한 기능이 ..