목록웹프로그래밍/HTML_CSS_Javascript 기초 (7)
bdfgdfg
DOM(Document Object Model) DOM은 HTML요소, 그 요소의 속성들을 트리구조로 나타내며, 해당 DOM에 접근하여 조작할 수 있도록 API를 제공하는 인터페이스. -> 즉 JS언어를 이용하여 웹 페이지의 요소들에 접근해 조작할 수 있는 인터페이스라고 보면 된다. -> JS에서는 document객체를 이용하여 접근이 가능하다. DOM 요소에 접근하는 여러가지 방법 1. getElementByID - 특정 태그의 속성인 ID가 가지는 값을 기준으로 HTML 요소를 반환. (한개) let element = document.getElementById('idSelect'); console.log(element); 2. getElementsByClassName - 특정 태그들의 속성인 clas..
자바스크립트의 비동기 처리방식 자바스크립트는 기본적으로 싱글쓰레드기반의 언어. 그렇기에 비동기 작업을 요청하고, 작업이 완료되어 콜백함수등의 처리를 할 때 별도의 쓰레드가 등장해 작업을 처리하는게 아닌, 하나의 쓰레드가 모든 작업을 처리하게 된다. -> 요청한 비동기 작업자체는 외부에서 처리는 하지만 그 결과를 받고, 어떻게 처리할지는 자바스크립트의 쓰레드가 담당. -> 이는 동시성 문제를 고려하지 않아도 된다는 장점이 있음. -> 또한 자바스크립트에서 비동기방식의 처리는 새로고침없이 데이터를 읽어올 수 있음. Call Stack: 자바스크립트의 쓰레드가 가진 스택영역 Web API: 웹 브라우저에서 제공하는 API로 AJAX나 Timeout등의 비동기 작업을 실행 Task Queue: Callback ..
우선 클로져 개념을 이해하기전에 자바스크립트의 Scope와 Scope Chain을 먼저 이해하는게 좋다. -> Scope는 변수의 접근 범위. 즉 식별자의 유효 범위를 의미한다. C,JAVA와 같은 컴파일 언어에서는 블록레벨 Scope를 따른다. 다만 js(다른 언어는 모르겠음.)의 경우 함수레벨 Scope를 따른다. 둘의 차이는 밑과 같이// 블록레벨 SCOPE라면. { var x = 10; } // 에러가 떠야한다. // 다만 JS에서는 함수레벨 Scope를 가지므로 밑은 10이 출력이 된다. console.log(x);블록레벨 Scope였다면 x라는 지역변수에는 접근할 수 없어 에러가 발생하지만 js에는 정상적으로 10이 출력이 된다. 여기서 중요한건 Scope의 범위. JS는 함수레벨의 Scope..
CSS 우선순위 속성 값 뒤에 !important 를 붙인 속성 (거의거의 안쓰인다고는 함.) HTML에서 style을 직접 지정한 속성 (인라인 스타일) #id 로 지정한 속성 (아이디) .클래스, :추상클래스 로 지정한 속성 (클래스, 및 가상(수도)클래스) 태그이름 으로 지정한 속성 상위 객체에 의해 상속된 속성 CSS 박스모델 모든 태그들은 자신의 박스영역을 가진다. 그 박스는 콘텐츠 영역의 박스(WIdth,Height), padding의 박스, border의 박스, margin등이 있다. 1. 내용(content) : 텍스트, 이미지등 실제 태그의 컨텐츠가 들어가는 영역의 크기. 2. 패딩(padding) : 내용과 테두리 사이의 간격. 3. 테두리(border) : 내용와 패딩 주변을 감싸는 ..