프로그래밍 공부하기

1. DocumentFragment DocumentFragment 인터페이스는 부모가 없는 아주 작고 경량화된 document 객체이다. DocumentFragment에 문서 구조의 일부를 저장하여 사용한다. document와 다른 점은 활성화된 문서 트리 구조의 일부가 아니기 때문에 DocumentFragment를 변경해도 문서에는 영향을 미치지 않으며 성능에도 영향이 없다. template 태그의 HTMLTemplateElement.content 속성에도 DocumentFragment가 포함되어 있다. 2. DocumentFragment 속성과 메소드 DocumentFragment는 부모인 Node와 ParentNode의 속성과 메소드를 상속받고있다. 따라서 children, querySelector..

1. DOM의 정의 DOM(Document Object Model)이란 HTML, XML 문서의 프로그래밍 Interface이다. DOM은 문서를 프로그래밍 언어로 접근하고 조작가능하게 하는 모델이다. JavaScript DOM을 통해 HTML요소에 접근하고 조작할 수 있다. 모든 웹 브라우저는 스크립트가 접근할 수 있는 웹 페이지를 만들기 위해 어느 정도의 DOM 을 항상 사용한다. 2. DOM과 웹 브라우저 DOM은 작성한 HTML가 웹 브라우저에 의해 파싱된 것이다. 즉, 웹 브라우저에 DOM이 포함되어있는 것이다. 따라서 DOM은 웹 브라우저의 최상위 객체인 window의 하위 객체이며 window.document로도 HTML에 접근 가능하다. Javascript에서 window 객체를 사용한다는..

DOM을다루는방법 createElement apend, appendChild querySelector, querySelectorAll textContent, classList.add, id, setAttribute remove, removeChild 참고 사이트 gist.github.com/thegitfather/9c9f1a927cd57df14a59c268f118ce86 Vanilla JavaScript Quick Reference / Cheatsheet Vanilla JavaScript Quick Reference / Cheatsheet. GitHub Gist: instantly share code, notes, and snippets. gist.github.com

1. filter filter는 말 그대로 배열의 요소들을 걸러주는 역할을 한다. filter의 경우 내부함수의 인자로 사용 방법은 다음과 같다. arr = [10, 11, 12, 13, 14]; arr.filter(function(element){ return element > 12; //값이 12초과인 요소만 }); //[13, 14] arr.filter(function(element, index){ return index % 2 === 0; //index가 짝수인 요소만 }); //[10, 12, 14] arr.filter(function(...params){ return params[2][2] > params[0]; //arr[2]보다 작은 값인 요소만 }); //[10, 11] filter의 인..

오늘 배운 것) 기초 코딩 문제풀이 코드 스타일링(Javascript) 들여쓰기는 Tab이 아닌 Space 2개 권장(대부분의 JavaSciript프로젝트에서 2개의 스페이스를 사용) 변수이름 본질적인 의미를 가진 한 단어가 좋다.(산업분야에서 사용하는 언어는 그대로 사용) 변수에 할당되는 값의 형식이 아닌 의미를 반영한다. 데이터의 모음은 복수명사로 쓴다. boolean은 is,are를 붙인다. Class는 첫문자를 대문자를 사용한다. 상수는 모두 대문자를 사용한다. 함수이름 함수 이름은 동사로 시작한다. 문법적으로 생략이 가능한 중괄호도 생략하지 않는다. Javascript는 HTML의 큰 따옴표와 구분하기 위해 작은 따옴표('')를 사용한다. 줄바꿈이 필요한 문자열은 백틱(`)을 사용하여 표현한다...

오늘 배운 것) 고차함수: 함수를 리턴하거나 인자로 받는 함수 cf. 콜백함수: 함수의 인자로 전달되는 함수 내장 고차함수: filter, map, reduce

seesparkbox.com/foundry/naming_css_stuff_is_really_hard CSS Class Names to Prevent Refactoring Limit gross refactoring tomorrow by picking class names that are less likely to change. Ethan shares three naming options to help cushion the blow of future design changes. seesparkbox.com 코딩을 하면서 가장 어려운 것 중 하나는 이름짓기이다. C#, Java, Javascript 등의 언어의 변수, 함수 등의 이름짓기는 어느정도 아는 지식이 있지만 CSS의 class와 id는 무엇을 기준으..

1. //연산 //은 나눈 값을 정수로 돌려주는 연산자이다. 처음에는 /연산을 한 후 integer으로 형변환(소수점 이하 버림)하여 반환하는 줄 알았다. 그러나 Python에서 //연산은 나눈 값에 내림을 취하므로 예상과는 다른 결과가 나온다. -5 / -4 #-1.25 int(-5 / -4) #-1 예상결과 -5 // -4 #-2 실제결과 2. %연산 나눗셈을 연산으로 공식으로 일반화하면 다음과 같다.(a: 잿수, d:피젯수, q: 몫, r:나머지) a/d = q...r a = qd + r %연산을 위한 몫을 계산할 때 Python의 경우 값에 내림을 취하고, C++, Javascript 등은 버림(≒형변환)을 취하므로 음수 %연산은 python의 결과와 C++, javascript 등의 언어의 결과..

1. 구글 폰트 사이트에서 원하는 폰트를 찾는다. fonts.google.com/ Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com 2. 폰트를 선택한 후 Select this style을 선택한다. 3. 상단 우측의 사각형 버튼(View your selected familes)을 눌러 우측에 Selected Family 메뉴가 보이게 한다. 4. Use on the web의 링크와 CSS를 복사하고 링크는 html 파일에, CSS는 css파일에 넣어 사용한다.

오늘 배운 것) CSS Selector 레이아웃 나누기 웹 화면의 콘텐츠는 좌->우, 위->아래로 흐른다. 따라서 화면을 먼저 수직으로 분할하고 분할한 영역 안에서 수평으로 분할한다. 처음에 box-sizing:border-box과 body의 margin, padding을 0으로 세팅하고 시작하자 Flex Box 정렬을 하고 싶을 때는 display: flex를 사용한다. 정렬하고 싶은 요소를 둘러싼 부모 영역에 display:flex 적용 justify-content(horizontal 정렬), align-items(vertical 정렬), flex-direction(자식들 가로/세로로 세우기) 속성 flex box 자식들에게는 flex 속성을 부여할 수 있다. flex: 0 1 auto; 가 기본 값..