빵 입니다.

기능 정의 Todo 입력 Todo 수정 Todo 삭제 Todo Total 갯수 체크 Todo 완료 갯수 체크 Todo 미완료 갯수 체크 어떻게 해야하는지 감이 잡히지 않아서 dom api만 가지고 개발을 했다.우선, 코드가 매우 비효율적이다.재사용할 수 있는 코드가 매우 적고, ES5, ES6 섞어 쓴 부분도 많다.자바스크립트보단 html, css 단에 더 집중을 많이 한 느낌이 든다. HTML Todo 추가 완료 0건 미완료 0건 총 0건 CSS .todo_wrap{width:300px; margin:0 auto;} .todo_wrap h1{text-align:center;} .input_wrap{background:red;} .input_wrap:after{content:""; display:bloc..

라인프렌즈 클론사이트를 만들었습니다. 기존 사이트 https://www.linefriends.com/snackparty 클론사이트 http://webduck.dothome.co.kr/

마크다운( http://kirkstrobeck.github.io/whatismarkdown.com/ ) 마크다운은 WYSIWYG(What You See Is What You Get) 방식의 포맷팅이다. 가장 좋은 방법으로 단순화되어 있다.웹 디자이너와 개발자가 프로젝트를 접근할 때, 프로젝트에 스타일을 만든다. 이 스타일은 헤더와 링크같은 것들이 어떻게 보여질지 같은 기본적인 요소인에 대해 기술한 것이다.과거의 WYSIWYG 에디터들은 디자인 컨트롤하는 것에 너무 많은 것을 주었다. 누군가는 의도치 않게 디자인에 새로운 스타일(기울어진 빨간색 굵은 이탤릭 헤더처럼)이 추가할 수 있다. 보통은 의도적인 디자인 추가 였지만 불가피하게 바닥까지 경주가 이어졌기에 스타일 처리가 더 커지고 더 강해지고 밝아졌다...

회사에 교육 결재를 올리고 하루를 컨퍼런스에 투자했다.장소는 누리꿈스퀘어!!!! 회사랑 너무 가까워서 회사 가는 느낌이 들고........... 누리꿈스퀘어가 복잡해서 쉽게 찾을 수 있을까 걱정했지만, 저렇게 안내 표지판이 있어서 찾기 쉬웠다. 여느 행사와 마찬가지로 입장할 때, 경품 추첨권 겸 입장 팔찌를 준다. 사기업이 아닌 한국웹접근성평가센터에서 주최를 해서 그런지 실무에 유용한 자료집을 많이 주었다. 무거운 건 덤^^! 하지만 내용이 알차서 완전 이득! 국제회의실에서 컨퍼런스를 진행했는데, 장소에 비해 인원이 많이 없었다. 지금까지 많은 접근성 세미나와 컨퍼런스에 참석했는데, 다른 행사들보다 장애인분들이 많이 참석을 하셨다. 이번엔 사진을 많이 못 찍었다. 제일 인상 깊게 들은 섹션인 김현아 변호..

W3Schools 번역과 MDN 번역 및 검색을 통해 알게 된 점 위주의 정리 https://www.w3schools.com/js/js_arrays.asp https://msdn.microsoft.com/ko-kr/library/ccktxahf(v=vs.100).aspx https://msdn.microsoft.com/ko-kr/library/jj155291(v=vs.94).aspx 1. AJAX IntroAjax를 사용할 때의 장점 - 페이지가 로드 된 후에 웹 서버로부터 데이터를 읽을 수 있다. - 페이지를 다시 로드 할 필요 없이 웹 페이지를 업데이트 할 수 있다. - 백그라운드 상태로 웹 서버에 데이터를 보낼 수 있다.AJAX는 다음과 같이 결합하여 사용한다. - 웹 서버로부터 데이터를 요청하기 ..

대량의 데이터를 효과적으로 관리하는 매커니즘 = 자료구조배열, 리스트, 스택, 큐(대기 행렬), 트리(나무 구조)1. 배열 - 데이터를 빈틈없이 나열한 자료구조 - 일직선 상에 빈틈없이 데이터를 나열한 1차원 배열 - 테이블처럼 가로세로 빈틈없이 데이터를 나열한 2차원 배열 - 직육면체처럼 가로, 세로, 높이에 빈틈없이 데이터를 나열한 3차원 배열 - 유효한 데이터의 개수를 관리할 때 다른 변수를 사용2. 리스트 - 데이터를 순서대로 나열한 자료구조 - 데이터들이 화살표로 서로 연결되어 있어 데이터들이 떨어진 장소에 위치할 수 있다. - 데이터 위치에 구애 받지 않는다. - 데이터들이 ‘포인터’로 연결되어 있다. - 따라서 데이터의 위치에 관계없이 데이터의 순서를 관리할 수 있다. - 유효한 데이터의 개..

W3Schools 번역과 MDN 번역 및 검색을 통해 알게 된 점 위주의 정리 https://www.w3schools.com/js/js_arrays.asp https://msdn.microsoft.com/ko-kr/library/ccktxahf(v=vs.100).aspx https://msdn.microsoft.com/ko-kr/library/jj155291(v=vs.94).aspx concat() 2개 이상의 배열은 연결하고, 연결된 배열을 반환. array1.concat(array2, array3, ..., arrayX) copyWithin() 배열의 지정한 위치 안에 있는 요소들을 복사. array.copyWithin(target, start, end) every() 배열 안의 모든 요소들이 설정한..

W3Schools 번역과 MDN 번역 및 검색을 통해 알게 된 점 위주의 정리 https://www.w3schools.com/js/js_arrays.asp https://msdn.microsoft.com/ko-kr/library/ccktxahf(v=vs.100).aspxhttps://msdn.microsoft.com/ko-kr/library/ccktxahf(v=vs.100).aspx https://msdn.microsoft.com/ko-kr/library/jj155291(v=vs.94).aspxhttps://msdn.microsoft.com/ko-kr/library/jj155291(v=vs.94).aspxconstructor, length, prototype은 다른 객체에서도 사용할 수 있음. 이 페이지..

W3Schools 번역 및 검색을 통해 알게 된 점 위주의 정리 https://www.w3schools.com/js/js_arrays.asp 1. 하나의 이름으로 여러 값을 가질 수 있다. 1) var array_name = [item1, item2, ...]; → Literal 방식 (권장) var fruit1 = "apple"; var fruit2 = "banana"; var fruit3 = "orange"; → var fruit = ["apple", "banana", "orange"]; → var fruit = [ "apple", "banana", "orange" ]; 마지막 요소 뒤에 콤마(,)를 넣으면 IE8 이하 버전에서 오류 발생2) new 생성자를 이용해 배열을 만들 수 있다. var ca..

말줄임을 붙일 수 있는 다양한 방법! 1. 한줄 말줄임 .ellipsis{overflow:hidden; display:block; width:300px; white-space:nowrap; text-overflow:ellipsis;} display:block; CSS 말줄임은 block 요소에만 적용 가능하다. 인라인 요소일 경우 display를 block으로 선언해야한다. 인라인일 경우 넓이 값을 지정하지 못 하는데, 넓이 값이 없으면 말줄임의 기준점을 지정하지 못 하기 때문에 block 요소로 지정하는 것이 좋다. width:300px; 기준점. 글이 300px를 벗어날 경우 말줄임이 생긴다. overflow:hidden; 넓이 300px을 넘어간 글자들을 안보이게 처리한다. 이 속성이 없을 경우 기..