본문 바로가기

UI개발

자바스크립트 최대값, 최소값 찾기 var num = [88, 99, 54, 95, 11, 10]; var max = 0; for( var i = 0; i num2[i] ){ min = num2[i]; } } document.write( "최소값 " + min ); 더보기
DOM - 텍스트 노드 Text 개체 개요 엘리먼트 사이에 섞여있는 텍스트는 text노드로 변환된다. 핱빝비빝 Text 개체 및 속성 속성과 메서드에 관련된 정확한 정보를 얻기. hi 주목할 만한 속성 및 메서드 - textContent - splitText() - appendDate() - deleteData() - insertData() - replaceData() - subStringData() - normalize() - data - document.createTextNode() 공백도 Text 노드를 생성한다. 더보기
DOM - Element 노드 지오메트리와 스크롤링 지오메트리 / 인라인 스타일 Element 노드 크기, 오프셋, 스크롤링 개요 HTML 문서를 웹 브라우저에서 볼 때, DOM 노드가 해석되어 시각적인 모양으로 그려진다. 노드는 브라우저에서 볼 수 있는 시각적인 표현 형태를 가지고 있다. offsetParent를 기준으로 element의 offsetTop 및 offsetLeft 값을 가져오기 offsetTop 및 offsetLeft 속성을 사용하면, offsetParent로부터 element노드의 오프셋 픽셀 값을 가져올 수 있다. element의 바깥쪽 좌상단 경계로부터 offsetParent의 안쪽 좌상단 경계까지의 거리를 픽셀로 제공해준다. offsetParent의 값은 가장 가까운 부모 element 중에서 css 위치 값이 static이 아닌 element를 검색하여 결정.. 더보기
DOM - Element 노드 / Element 노드 선택 HTML*Element 개체 개요 HTML 문서 내의 각 element 들은 고유한 성질을 가지며, 각자 element를 DOM 트리내의 노드 개체로 인스턴스화하는 고유한 자바스크립트 생성자를 가진다. HTML*Element 개체의 속성 및 메서드 (상속받은 것 포함) HTML*Element 노드에 존재하는 속성 및 메서드와 관련된 정확한 정보를 얻으려면, 사양서를 무시하고 브라우저에게 물어보는 것이 제일 좋다. 다음 코드에서 생성한 배열을 살펴보면 HTML element 노드에 존재하는 속성 및 메서드에 대해 상세히 알 수 있다. 중요하게 생각되는 주요 속성 및 메서드 목록 - createElement() - tagName - children - getAttribute() - setAttribute().. 더보기
DOM - Document 노드 Document 노드 개요 HTMLDocument 생성자는 DOM 내에 DOCUMENT_NODE를 생성한다. 이를 확인하려면, document 노드 개체 생성에 사용되는 생성자가 무엇인지를 물어보면 된다. Document 및 HTMLDocument 생성자는 보통 HTML 문서를 로드 시 브라우저에 의해 인스턴스가 만들어진다. 하지만 document.implementation.createHTMLDocument()를 사용하면, 브라우저 내에 현재 로드된 문서 외부에 직접 HTML 문서를 생성할 수 있다. createHTMLDocument() 외에, createDocument()를 사용하여 HTML 문서로 설정된 document 개체를 생성할 수 있다. 이 메서드들을 사용하는 예로, 프로그래밍적인 방법으로 i.. 더보기
DOM - 노드 개요 문서 개체 모델 DOM은 자바스크립트 Node 객체의 계층화된 트리이다. HTML 문서를 작성할 때에는 HTML 콘텐츠를 다른 HTML 콘텐츠 내에 캡슐화하게 되는데, 이를 통해 트리로 표현 가능한 계층 구조가 만들어진다. 대게 이러한 계층 구조나 캡슐화 시스템은 HTML 문서 내에서 들여 쓰기 표시를 통해 시각적으로 표시된다. DOM은 원래 XML 문서를 위한 어플리케이션 프로그래밍 인터페이스였지만, HTML 문서에서도 사용되도록 확장되었다. HTML 문서를 다룰 때 마주치게 되는 가장 일반적인 노드 유형은 다음과 같다. DOCUMENT_NODE (window.document) ELEMENT_NODE (, , ) ATTRIBUTE_NODE (class="list") TEXT_NODE (줄바꿈과 공백을 .. 더보기
-webkit-tap-highligh-color -webkit-tap-highligh-color iOS와 안드로이드의 웹킷 기반 브라우저(사파리, 크롬)에서 링크를 터치하면 해당 위치를 표시하는 하이라이트가 나타나는데 그 때의 색상을 설정하는 것 -webkit-tap-highlight-color:rgba(0,0,0,0.3); 더보기
ui, ux UI (User Interfaces) 정보기기나 소프트 웨어의 화면 등 사람과 접하는 면. 어떤 프로그램을 사용할 때 메뉴나 버튼, 입력창 등. 버튼이나 글쓰기 창을 쉽게 누르고 사용하기 편하게 배치함. GUI (Graphical User Interface) 마우스를 움직여 화면에 나오는 그래픽 요소들을 조작함으로써 컴퓨터를 다룰 수 있게 됨.아이콘. CUI(TUI) 키보드를 통해 명령어를 입력하면 컴퓨터가 글자로 결과 표시. UX (User Experience, 사용자 경험) 소프트웨어를 사용하는 사용자의 느낌. 태도. 행동 등의 경험을 설계. 메뉴나 버튼, 입력창 등을 사용하면서 느끼는 생각이나 예상, 만족도 등의 모든 것. 버튼이나 글쓰기 창을 누르면 글을 입력할 수 있는 새 창이 뜰꺼라고 예측함... 더보기
검색엔진최적화 SEO(검색최적화) 방식 http://webmastertool.naver.com/guide/basic_markup.naver 검색엔진에서 트래픽이 들어온다는 점이 검색엔진 최적화가 중요하고, 능동적으로 정보를 검색하는 잠재고객이 접근할 확률이 높다는 이유이다. SEO(Search Engine Optimization)는 검색엔진을 통해 잠재고객을 더 많이 사이트로 유입하기 위해 특정 키워드로 검색엔진에 상위 노출을 진행하는 관점에서 검색엔진 알고리즘에 최적화하여 검색결과 상위에 표시하기 위한 일종의 사이트 최적화 노하우이다. SEO 방법 - 콘텐츠의 양, 질을 충실하게 한다. 좋은 컨텐츠는 스스로 확산되고 공유되는 속성을 가지고 있다. - 모든 페이지가 유입될 수 있도록 사이트 구성 개선 사용자는 반드시 .. 더보기
DOM (Document Object Model) DOM (Document Object Model) 웹 페이지를 자바스크립트로 제어하기 위한 객체 모델을 의미. Window객체가 창을 의미한다면, Document 객체는 윈도우에 로드된 문서를 의미한다고 할 수 있다. 문서 내에서 특정 태그에 해당되는 객체를 찾는 방법은 여러가지가 있다. document.getElementsByTagName 인자로 전달된 태그명에 해당하는 객체를 찾아서 그 리스트를 NodeList라는 유사 배열에 담아 반환한다. NodeList는 배열은 아니지만 length와 배열 접근 연산자를 사용해서 엘리먼트를 조회할 수 있다. document.getElementsByClassName 클래스 속성의 값을 기준으로 객체를 조회 document.getElementById 아이디 값을 기.. 더보기
BOM (Browser Object Model) BOM (Browser Object Model)웹 브라우저를 제어하기 위해서 브라우저가 제공해주는 객체들.자바스크립트를 통해서 새 창, url 정보 등을 알아낼 수 있도록 한다. alert alert("웃지마") 경고창이 실행하는 동안은 다음 소스가 실행되지 않는다. confirm function cfm(){if(confirm("확인?")){alert("확인!");}else{alert("취소ㅠ");}}cfm() prompt function prpt(){if(prompt("이름이 머야?") === "김찡찡이"){alert("찡찡이");}else{alert("누구세요??")}}prpt() Location현재 창의 url을 알려줌. location.href location.toString() 결과는 똑같지만 .. 더보기
Object Model Object Model 웹 브라우저의 구성요소들은 하나하나가 객체화되어 있다.자바스크립트로 객체를 제어해서 웹 브라우저를 제어할 수 있게 된다.객체들은 서로 계층적인 관계로 구조화되어 있다. BOM(Browser Object Model)과 DOM(Document Object Model)은 이 구조를 구성하고 있는 가장 큰 틀의 분류이다. 만들어진 태그의 해당되는 객체를 찾아서 메소드를 호출한다거나, 프로퍼티 값을 가져오는 등의 제어를 할 수 있다. 이미지 태그를 제어하고 싶다면이미지 태그의 해당되는 객체를 가져와야, 찾아야 한다. var img = document.getElementsByTagName("img"); 복수의 태그 목록 배열을 리턴함. (정확하게는 배열 아님ㅎ) img[0] // 첫 번째 이.. 더보기

티스토리툴바