2. Front-end

JQuery - [ XML / JSON + AJAX ]

* HTML - 웹 페이지를 구현하는 언어 > 장점 : 작업/요청을 처리하고 표시하기 쉽다. 서버에서 처리된 결과를 화면에 별도 처리 없이 추가 가능 > 단점 : html 형태의 데이터를 리턴해야만 올바른 값을 보여줌 요청이 반드시 동일한 도메인에서 처리해야 함. a.html -> a.html 페이지처리 * XML (확장 가능한 마크업 언어 ) - HTML 형태와 유사하게 생김. 태그의 형태로 정보 저장 > 장점 : 복잡한 구조의 데이터를 저장 가능. 이기종 및 응용 프로그램 사이의 데이터 교환이 좋음. HTML 기본 메서드 활용 가능(기능 제한) > 단점 : 데이터보다 많은 태그의 양(데이터 리소스가 많음, 처리속도 느림) 요청이 반드시 동일한 도메인에서 처리해야 함. a.html -> a.html 페..

HTML - [ BEM ]

BEM (Block Element Modifier) - HTML 클래스 속성의 작명법을 의미 1. 요소__일부분 : Underscore(Lodash) 기호로 요소의 일부분을 표시 (언더바 2개) 2. 요소--상태 : Hyphen(Dash) 기호로 요소의 상태를 표시

JQuery - [ Ajax 기본 사용]

AJAX (Asynchronous JavaScript And XML) - 비동기 방식의 자바스크립트와 XML을 말한다. JSON, XML, HTML 그리고 일반 텍스트 형식 등을 포함한 다양한 포맷을 주고 받을 수 있다. - AJAX의 강력한 특징은 페이지 전체를 리프레쉬 하지 않고서도 수행 되는 "비동기성" 이다. 이러한 비동기성을 통해 사용자의 Event가 있으면 전체 페이지가 아닌 일부분만을 업데이트 할 수 있게 해준다. AJAX의 주요 두가지 특징은 아래의 작업을 할 수 있게 해준다. * 페이지 새로고침 없이 서버에 요청 * 서버로부터 데이터를 받고 작업을 수행 => 즉 주소이동(화면 이동)없이 한 화면에서 내용이 바뀌는 부분은 ajax로 처리한 것이라 볼 수 있다! - 동기 방식 처리 : 서버 ..

CSS - [ position 이용 가운데 정렬 ]

1. 수직 가운데 정렬 아래와 같이 container 안에 item 클래스를 가진 div 태그를 만든다. 그리고 css로 크기와 색상을 준다. 그러면 아래와 같이 출력된다. 요소를 수직 가운데 정렬 할 때에는 정렬할 요소의 높이를 지정하고, position absolute값, top bottom 0 값, 그리고 위 아래 margin을 auto 값을 준다. 정렬할 요소에 position 값을 주었으므로, 부모 요소에도 position 값을 설정해주어야 한다.(static 제외) 부모 요소에는 position relative 값을 준다. 이를 정리해보면 -> item의 position이 absolute 이므로 container를 기준으로 위치가 변경되게 된다. top과 bottom에 0을 주었으니 아래 사진..

JS - [ 이클립스에서 JS 자동완성 사용하기 ]

Help -> Eclipse Marketplace : 여기서 eclipse에 추가할 수 있는 플러그인 검색 가능 Tern 검색 -> Install 선택 (Tern 플러그인 설치했으므로 사용할 수 있는 것 추가로 보여줌!) 프로젝트 이름 우클릭 -> Configure -> Convert to tern project Browser 2개 체크 JQuery 2개 체크 그러면 자바스크립트도 자동완성(ctrl + space bar)로 쓸 수 있음!! 참고로 프로젝트에 적용은 매번 해야됨 설정창 나가면 프로젝트 이름 우클릭 -> Properties -> Javascript -> Tern -> Modules 에서 다시 설정 가능하다!!

CSS - [ Google fonts / Google Material Icons ]

1. Google fonts 구글에 google fonts 라고 검색해서 들어가면 여러 폰트들을 확인할 수 있다. 여기서 nanum 을 검색해서 나눔 고딕체를 선택한다. (폰트는 생각보다 용량이 크므로 하나의 페이지에서 폰트를 너무 남발하지 않는게 중요하다. 사용할 폰트만 명시해서 사용하도록 하자!) 여기서 400과 700 두께를 select하고 link 태그를 복사해서 index 파일에 붙여넣기 해준다. index.html 파일에 넣을 때 main.css 삽입 링크보다 위에 넣어주도록 하자. 여기서 끝!이 아니라! 링크 태그 아래쪽에 있던 font-family 를 복사해서 css파일의 body 태그 선택자 안에 넣어줘야 완성이다. 폰트는 상속되므로 body태그에 적용해주면 안의 태그들에 모두 적용될 것..