DevelUpTree

요구사항 명세서여러 영어 문장에 대한 그룹을 지을수 있는 템플릿을 등록한다.들어가기 전- What : 영어 문장 연습 프로그램 - How : 영어 문장 템플릿을 만들고, 사용자가 입력한 문장이 맞을때까지 시험을 볼 수 있게 합니다. - Why : 영어 문장에 익숙해지려면 반복학습을 해야하기 때문입니다. 요구사항명세 목록REQ-ID화면명요구사항명요구사항 내용중요도날짜작성자진행사항버전명REQ-0001Template RegisterCreate Template여러 영어 문장에 대한 그룹을 지을수 있는 템플릿을 등록한다.상@2022년 5월 27일박태건요구사항 정의0.1.0REQ-0001-1Template RegisterA set of korean, english Sentences영어 문장, 영어 문장 해석을 한 ..

이 글은 깃허브에 올라온 글을 바탕으로 제가 그대로 타이핑한 글입니다. 더 자세하고 정확한 정보를 보시려면 아래 링크를 참조해 주세요. Link Part 1. 전산 기초 개발 상식 Link 좋은 코드란? 객체 지향 프로그래밍이란? RESTFul API? TDD란? 어떠한 장점이 있는가? 함수형 프로그래밍? MVC 패턴이란? Git, GitHub란? 좋은 코드란 무엇일까? Clean Code? Efficient Code? Short Code? 읽기 쉬운 코드? 주석을 쓰면 되지 않을까? 그렇지만, 기본적으로 메타데이터이고, 주석의 내용과 실제 동작이 일치하는지는 어떻게 알아? 나한테만 읽기 쉬운 코드? 내 코드가 한 번 작성되고, 이 다음에 수정될 일이 없다고 누가 그래? 읽기 쉽기만 하면 되는거야? 읽기..

유틸리티 메소드 코딩의 시작, TCP School 타입 검사 메소드 타입 검사 메소드 인수로 전달받은 값의 타입 확인 메소드 $.type() $.isArray() $.isFunction() $.isNumeric() $.isEmptyObject() $.isPlainObject() $.isWindow() $.isXMLDoc() $.type() 메소드 자바스크립트의 typeof 연산자는 값에 따라 부정확하거나 모순된 타입 검사 결과를 반환. 제이쿼리는 전달받은 값을 자바스크립트의 내부 클래스와 비교하여 더욱 정확한 타입 검사를 제공하는 $.type() 메소드를 제공. $(function() { $("button").on("click", function() { $("#text") .append($.type(tr..

Ajax 코딩의 시작, TCP School Ajax의 개요 Ajax란? Ajax란 Asynchronous JavaScript and XML을 의미. 웹 페이지 전체를 다시 로딩하지 않고도, 웹 페이지의 일부분만을 갱신 가능 Ajax는 백그라운드 영역에서 서버와 데이터를 교환하여 웹 페이지에 표시. $(function() { $("#requestBtn").on("click", function() { $("#text").load("/examples/media/jquery_ajax_data.txt"); }); }); Ajax 프레임워크 Ajax를 사용하여 손쉽게 개발할 수 있도록 미리 여러 가지 기능들을 포함해 놓은 개발 환경 제이쿼리와 Ajax 제이쿼리에서는 Ajax 기능을 손쉽게 사용할 수 있도록 여러 메..

이펙트 효과 코딩의 시작, TCP School 요소의 표시와 숨김 이펙트 (effect) 효과 이러한 이펙트 효과는 기본 설정으로 바로 사용할 수도 있고, animate() 메소드를 통해 설정을 변경해서 사용할 수도 있다. 요소의 표시와 숨김 (.hide(), .show()) .hide() 메소드 선택한 요소를 순간적으로 사라지게 한다. .hide() 메소드를 통해 숨겨진 요소는 CSS display 속성값이 none으로 설정 .show() 메소드 선택한 요소를 순간적으로 나타내게 한다. $(function() { $("#showBtn").on("click", function() { $("#text").show(); // id가 "text"인 요소를 나타나게 함. }); $("#hideBtn").on("..

이벤트 처리 코딩의 시작, TCP School 이벤트의 개념 이벤트(event) 란? 마우스를 클릭한다거나, 텍스트 박스에 글을 쓰는 등의 수많은 동작들이 event를 발생시킨다. 이벤트가 발생했다는 것은 웹페이에서 특정 동작이 발생하여, 웹 브라우저가 그 사실을 알려주는 것을 의미. 이벤트 핸들러(event handler) 특정 요소에서 발생하는 이벤트를 처리하기 위해서는 이벤트 핸들러(event handler)라는 함수를 작성하여 연결해야만 한다. 이벤트 핸들러가 연결된 특정 요소에서 지정된 타입의 이벤트가 발생하면, 웹 브라우저는 연결된 이벤트 핸들러를 실행 $(function() { $("button").on({ // 모든 요소에 mouseenter: function() { // mouseente..

스타일 설정 코딩의 시작, TCP School 프로퍼티 설정 CSS 스타일 설정 제이쿼리를 사용하면 선택한 요소의 스타일에 관한 속성값을 쉽게 받아오거나 설정 가능 .css() 메소드 .css() 메소드를 사용하여 선택한 요소의 CSS 스타을 간단하게 설정 가능 선택한 요소 집합의 첫 번째 요소의 스타일 속성값을 반환하거나 선택한 요소의 스타일 속성을 인수로 전달받은 값으로 설정 $(function() { $("button").on("click", function() { $("p").css("fontSize", "25px"); // 모든 요소의 글씨 크기를 25px로 설정 $("#text").html($("p").css("fontSize")); // 첫 번째 요소의 글씨 크기를 반환 // .css() 메..

반응형 웹디자인 반응형 웹 기본 개념 이해 Do it! 반응형 웹디자인 인프런 강의영상 정리 반응형 웹 반응형 웹이 나온 이유? 모바일 기기의 출현, 모바일 기기에서 웹 사이트가 모바일 화면 크기로 축소되어 보인다는 문제 -> 이로인한 대안으로 모바일웹이 등장하였지만, 태블릿, 패블릿 기기등에서의 모바일웹의 작은 화면이 문제 -> PC 버전, 모바일 버전 두 가지로 웹 사이트를 만드는 문제 또한 거론 앞의 문제들을 해결하기 위해 반응형 웹이라는 기술이 등장 반응형 웹이란 화면이 작은 기기에서 반응형 웹으로 제작된 웹사이트를 접속했을 때 웹사이트의 구조를 작은 화면에서 최적화된 구조로 보여주고, 큰 화면을 가진 기기에서는 웹사이트의 구조를 큰 화면에 최적화된 구조로 변경하여 보여주듯이 각 기기화면에 반응하..

요소의 영역 요소의 크기 선택한 요소의 크기에 관한 정보를 손쉽게 받아오거나 설정할 수 있다. inner와 outer 이미지 참조, TCP School 접두사로 inner가 붙은 메소드 : 선택한 요소의 크기에 padding 영역 포함 접두사로 outer가 붙은 메소드 : padding 영역을 포함하여 border 영역까지 포함된 크기 인수로 true값을 전달 할 시 : padding + border + margin 메소드 반환값 .width(), .height() 요소의 크기 .innerWidth(), innerHeight() 요소 + padding의 크기 .outerWidth(), .outerHeighT() 요소 + padding + border의 크기 .outerWidth(true), .outerH..

요소의 탐색 트리 탐색 (Tree Traversing) 특정 요소로부터 다른 요소들과의 관계를 통해 선택하길 원하는 요소까지 DOM 트리를 검색해 나아가는 과정 트리 탐색의 세 가지 영역 조상(Ancestor) 요소 탐색 형제(Sibiling) 요소 탐색 자손(Descenant) 요소 탐색 조상 요소의 탐색 DOM 트리에서 특정 요소의 부모(parent) 요소를 포함한 상위의 요소를 탐색하기 위한 메소드 .parent() .parents() .parentsUntil() .closest() 메소드 설명 .parent() 선택한 요소의 부모(parent) 요소를 선택함. .parents() 선택한 요소의 조상(ancestor) 요소를 모두 선택함. .parentsUntil() 선택한 요소의 조상 요소 중에서..