유블로그

FrontEnd 프레임 워크 html / css 기반 디자인 템플릿과 선택적 자바스크립트 플러그인이 포함되어 있다. 반응형 디자인을 쉽게 만들 수 있는 기능을 제공한다. 장점 사용하기 쉬움 반응형 웹 구현 가능 -> 휴대폰, 태블릿, 데스크톱 등에 맞게 조정가능 모바일 우선 접근 방식 모든 최신 브라우저와 호환 가능

URL에 데이터를 포함시켜 요청 (쿼리스트링) 데이터를 헤더에 포함하여 전송 url에 데이터가 노출되어 보안에 취약 -> 데이터 노출되어도 상관없는 경우에 사용 전송하는 길이에 제한 있음(최대 2KB) -> 입력 값 적은 경우에 사용 캐싱(한 번 접근 후 또 요청오면 빠르게 사용하기 위해 레지스터에 데이터 저장) 가능 간단한 데이터를 빠르게 전송 URL에 데이터를 노출하지 않고 요청 데이터를 HTTP header 뒤의 body에 포함시킴 url에 데이터가 노출되지 않아서 기본 보안 되어있음 전송하는 길이에 제한 없음 캐싱 불가능 전달 데이터의 양이 같은 경우 GET 보다 느림

- Ajax(Asynchronous JavaScript and XML) 언어나 프레임워크가 아닌 구현하는 방식을 의미한다. 웹에서 화면을 갱신하지 않고 데이터를 서버로부터 가져와 처리한다. 자바스크립트의 XMLHttpRequest 객체로 데이터를 전달하고 비동기 방식으로 결과를 조회한다. 동적으로 DOM 을 구성해야하므로 구현이 복잡하다. 클라이언트 중심의 개발 방식이다. - ajax 요청에 대한 응답 ajax 적용하면 event 발생시 서버에서 요청을 처리한 후 text, xml, json 중 하나로 응답한다. client(브라우저)에서는 이 응답 데이터를 이용하여 화면 전환 없이 현재 페이지에서 동적으로 화면을 재구성한다. - javascript ajax XMLHttpRequest 는 자바스크립트가 ..

크로스 플랫폼을 지원하는 jQuery는 어떠한 브라우저에서도 동일하게 동작. 브라우저 호환성을 고려하여 대체코드를 작성할 필요가 없다. 네이티브 DOM API 보다 직관적이고 편리한 API 를 제공하여 개발 속도를 향상시킨다. Event 처리, Ajax, Animation 효과를 쉽게 사용할 수 있다. 다양한 effect 함수를 제공하여 동적인 페이지를 쉽게 구현할 수 있다. jquery 선택자는 DOM을 탐색하고, 다양한 메소드를 제공하는 래퍼세트(WrapperSet) 객체를 반환한다. 래퍼세트 객체는 메소드 체인을 제공하여 메소드 호출에서의 반복적인 코딩을 줄여준다. DOM 탐색 전에 웹브라우저에 문서가 모두 로드되어 있어야 한다.(document ready) - document ready 이후 처리..

- 행그룹요소 : , , 각 행 그룹은 최소 하나 이상의 을 가져야 한다. - : 행 - : 머리글. 두꺼운 글씨 - : 일반 데이터 - 셀 병합 colspan : 두 개 이상의 열을 하나로 합치기 위해 사용 rowspan : 두 개 이상의 행을 하나로 합치기 위해 사용 colspan=2 rowspan=2 rowspan=2와 같은 행 rowspan=2의 다음 행 rowspan=2의 다음 다음 행 rowspan=2의 다음 다음 행

- 엘리먼트가 화면에 출력되는 방식을 조정한다. - inline : 줄 바꿈 없이 연속으로 이어짐. ex) span - block : 줄 바꿈 있음. ex) div - none : 화면에서 숨기고 면적도 차지하지 않게 함. - inline-block : 줄 바꿈없이 margin 등 속성을 적용하게 하기 위함 - 박스를 화면의 어느 위치에 배치할 것인가를 설정 - left : 그림이나 박스가 왼쪽에 배치되고, 글씨는 박스의 오른쪽으로 흐른다. - right : 그림이나 박스가 오른쪽에 배치되고, 글씨는 박스의 왼쪽으로 흐른다. - none : 그림이나 박스가 왼쪽에 배치되고, 글씨는 첫 줄만 박스의 오른쪽으로 흐른다. - float 속성값 초기화하기..

선택자 의미 사용법 일반 선택자 전체 선택자 HTML 문서 내 모든 element 선택 * { } 타입 선택자 매칭되는 element 선택 h1, h2, h3 { } 클래스 선택자 class 속성 값과 매칭되는 element 선택 .className { } ID 선택자 id 속성 값과 매칭되는 element 선택 #idName { } 복합 선택자 하위 선택자 하위 element 선택 E1 E2 { } 자식 선택자 직속 하위 element 선택 E1 > E2 { } 인접 형제 선택자 인접 형제 관계인 element 선택 E1 + E2 { } 일반 형제 선택자 형제 관계인 element 선택 E1 ~ E2 { } - 일반선택자 우선 순위 전체 선택자 < 타입 선택자 < 클래스 선택자 < ID 선택자 - 하위..