728x90 반응형 HTML6 input 자동완성 기능 없애기 jquery ui의 datepicker를 사용하던 중 input창에 계속 아래 툴팁으로 자동완성 기록이 떠서 날짜가 안보이게 되었다. 그래서 알아보던 중 재밌고 신기한 기능을 알게되었다. input태그의 autocomplete 속성인데 HTML5에서 태그에 새롭게 추가된 속성이라고 한다. 알아보지 않았다면 몰랐을 속성이라 알고나니 흥미로웠던 속성이였다. 아래처럼 off로 설정하면 자동완성 기능을 허용하지 않게 된다. ** 참고 사항 : 대부분의 최신 브라우저에서는 autocomplete을 off로 지정하더라도 브라우저가 사용자에게 계정 이름과 비밀번호 저장 여부를 묻는 것을 막을 수 없으며, 저장한 값을 사용해 자동완성하는 것도 막을 수 없다. 2022. 5. 26. select option의 속성 select를 보통은 커스텀하여 사용하지만 기본으로 쓸 때 유용한 속성들을 정리해 놓았다. 1. hidden 선택이라는 글자를 보통은 옵션 처음에 놓지만 선택할 때는 제외하고 싶다면 option에 hidden을 넣어주면 된다. 선택 짜장면 짬뽕 탕수육 기본 선택 짜장면 짬뽕 탕수육 hidden 처리된 모습 선택 짜장면 짬뽕 탕수육 기본적으로 안보이게 하고 싶을 때 쓴다. 2. selected 원하는 값을 미리 선택해놓고 싶을 때는 selected를 사용하면 된다. 짜장면 짬뽕 탕수육 짜장면 짬뽕 탕수육 3. disabled 값을 선택하지 못하게 막을 때는 disabled를 사용하면 된다. 선택 짜장면 짬뽕 탕수육 선택 짜장면 짬뽕 탕수육 4. optgroup option을 그룹으로 묶고싶다면 optgro.. 2022. 5. 25. 웹브라우저 HTML 렌더링 과정 웹브라우저 HTML 렌더링 과정 : 불러오기 - 파싱 - 렌더링 트리 만들기 - CSS 결정 - 레이아웃 - 그리기 1. 불러오기(Loading) 불러오기는 HTTP 모듈 또는 파일시스템으로 전달 받은 리소스 스트림(Resource Stream)을 읽는 과정으로 로더(Loader)가 이 역할을 맡고 있다. 로더는 단순히 읽는 것이 아니라, 이미 데이터를 읽었는지도 확인하고, 팝업창을 열지 말지, 또는 파일을 다운로드 받을 지를 결정한다. 2. 파싱(Parsing) 파싱은 DOM(Document Object Model) 트리를 만드는 과정이다. 웹 엔진이 가지고 있는 HTML/XML 파서가 문서를 파싱해서 DOM Tree를 만든다. ** DOM Tree : 내용을 저장하는 트리로 javascript에서.. 2021. 6. 28. css 선택자 strong 아래에 있는 span들 선택하기 (형제 선택자) - strong ~ span span 바로 다음 형제 p 태그 첫번째만 선택하기(인접 형제 선택자) - span + p a클래스 자식을 가지고 있는 부모만 선택하기 - span .a:only-child, p .a:only-child 자식이 없는 span만 선택하기 - span:empty ** css선택자 게임으로 익히기 http://flukeout.github.io CSS Diner A fun game to help you learn and practice CSS selectors. flukeout.github.io - 사이트에는 32레벨까지 있고 오른쪽에는 힌트, 도움말이 첨부되어있다. 2021. 6. 24. background 2개 넣기 .content { background: url(경로 설정) no-repeat 0 50% / cover, url(경로 설정) no-repeat 100% 50% / cover } ** 차례대로 background : 경로 반복여부 위치(left top기준) / 사이즈 2021. 6. 23. 자주 쓰이는 이벤트 onfocus (객체에 focus가 되었을 때) onblur (객체가 focus를 잃었을 때) onchange (객체의 내용이 바뀌고 focus를 잃었을 때) onclick (객체를 클릭했을 때) ondblclick (더블클릭할 때) onerror (에러가 발생했을 때) onkeydown (키를 눌렀을 때) onkeypress (키를 누르고 있을 때) onkeyup (키를 눌렀다 뗐을 때) onload (문서나 객체가 로딩되었을 때) onmouseover (마우스가 객체 위에 올라왔을 때) onmouseout (마우스가 객체 바깥으로 나갔을 때) onreset (Reset 버튼을 눌렀을 때) onresize (객체의 크기가 바뀌었을 때) onscroll (스크롤바를 조작할 때) onsubmit (폼이 전.. 2021. 6. 23. 이전 1 다음 728x90 반응형
