LEO Devlog LEO Devlog

DOM 정리 DOM HTML 코드를 해석해서 요소들을 트리 형태로 구조화해 표현하는 방식이다 DOM은 자바스크립트를 사용해서 웹 화면의 구조를 추가,수정,삭제하거나 이벤트를 처리할 수 있도록 프로그래밍 인터페이스를 제공 HTML을 동적 구조로 조작할 수 있게 도와주는 모델 DOCUMENT window의 document 속성은 창이 포함한 문서를 참조 document는 모든 종류의 문서에 대한 공통의 속성과 메소드를 제공 document의 querySelector 메소드는 선택자를 인자로 전달받아 전달받은 선택자와 일치하는 문서 안의 첫 번째 요소(element)를 반환한다. textContent 속성은 노드가 포함하고 있는 텍스트 컨텐츠를 표현 EVENT 이벤트란 '시스템 내에서 일어나는 사건' (클릭,..

DOM DOM (Document Object Model) : 이름에서 유추해보자면, HTML의 엘리먼트를 객체로 가져와서 사용 가능한 모델 DOM으로 HTML을 조작할 수 있다. createElement - CREATE querySelector, querySelectorAll - READ textContent, id, classList, setAttribute - UPDATE remove, removeChild, innerHTML = "" , textContent = "" - DELETE appendChild - APPEND innerHTML과 textContent의 차이 -> 가급적 textContent를 사용하는 것이 좋다. 성능과 보안에 강점이 있고, innerHTML은 보안에 취약하다. DOM (..

CSS Selector 셀렉터 h1 { } div { } 전체 셀렉터 * { }​ Tag 셀렉터 section, h1 {}​ ID 셀렉터 #only {}​ class 셀렉터 .widget { } .center { } attribute 셀렉터 (암기할 필요 x) a[href] { } p[id="only"] { } p[class~="out"] { } p[class|="out"] { } section[id^="sect"] { } div[class$="2"] { } div[class*="w"] { }​ 후손 셀렉터 header h1 {} 자식 셀렉터 (후손 셀렉터와의 차이를 반드시 알고 있어야 합니다) header > p {}​ 인접 형제 셀렉터 section + p {}​ 형제 셀렉터 section ~ p {..

계산기 만들면서 ... 계산기의 작동에 대한 컴퓨터의 관점에서 사고하고 코드짜기 경우의 수 대비하여 코드 짜기 CSS로는 디자인적 요소를 최대한 가져가고, 자바스크립트로는 작동에 대한 완벽한 코드를 짜야 한다 내 생각만큼 잘 나오진 않았지만, hover만 조금 건드려봤다. 디자인의 세계란...만만치 않은 것 같다 CSS의 세세한 속성들이 많기 때문에 천천히 더 보자 !

CSS CSS의 사용 목적 ---> 웹페이지의 구조의 외부와 내부를 꾸미는 역할, 스타일링을 담당 HTML 내부에 직접 CSS를 정의하는 것은 좋지 않다 id와 class? CSS의 문법 구성 CSS 간단 속성 정리 텍스트의 가운데 정렬을 하기 위한 속성 text-align: center;​ 글자 색을 바꾸기 위한 속성 color: #4a4a4a;​ 배경 색을 바꾸기 위한 속성 background: #fff;​ background 속성과 background-color 속성은 어떻게 다른가요? : background-color는 단순히 색깔 옵션만 부여한 반면, background는 다른 color / image / repeat / attachment / position과 background 옵션을 추가적..