본문 바로가기

WEB기초44

[jquery] jQuery 입문 01 (170328) jQuery 입문 01 jQuery란?엘리먼트를 선택하는 강력한 방법과선택된 엘리먼트들을 효율적으로 제어할 수 있는 다양한 수단을 제공하는자바스크립트 라이브러리( 출처 : 생활코딩 ) jQuery 로딩 방법1. 외부 자바 스크립트 로딩시키기2. js파일에 다운받아서 넣기 jQuery 의 형태- $( ) : 이 부분은 겉보기엔 array형태의 값을 반환한다. 하지만 단순한 array 형태가 아닌 jquery의 기능이 합쳐진 object이다. -$( )의 괄호 속 selector : 이 곳은 선택자가 들어가는 자리. css에서 선택자를 이용했듯 같은 방식으로 이용한다. ex) $("div"), $(".myClass"), $("#myId")-.action1( ) : 취할 action이 이 자리에 온다. act.. 2017. 3. 28.
[CSS] CSS 입문 03 (170327) CSS 입문 03 Page Layout2단 레이아웃 배치법 01-navigation, content-navigation에 width를 주고 content에 margin값을 준다. ** 출력 결과 ** 2단 레이아웃 배치법 02- navigation, content- content에 맞춰 navigation의 height 나타나게 하기- navigation의 position을 absolute로 주고 넓이를 지정한다.- content의 border-left를 200px로 지정하여 색을 지정한다. ** 출력 결과 ** 3단 레이아웃 배치법- 좌, 우 navigation과 content- 위와 동일한 방법에서 각각의 navigation에 right:0과 left:0 을 지정한다.- content의 좌우에 mar.. 2017. 3. 27.
[CSS] CSS 입문 02 (170324) CSS 입문 02 float 속성2- float 된 요소에 영향을 받지 않게 하기 : clear: both; : clear: right; : clear: left; ** 출력 결과 ** 기본 스타일 제거- ul 요소의 기본 스타일 제거 list-style-type: none;- a 요소의 기본 스타일 제거text-decoration: none; Text 요소 (글자 스타일/글꼴/글자의 굵기/글자 꾸미기/글자의 크기/대소문자 변환 규칙/자간/들여쓰기) z-index ** 출력 결과 ** CSS 가중치1. css는 선택자가 상세할수록 가중치가 크다.2. 가중치가 같으면 나중에 정의한 css가 적용된다.3. 가중치가 같으면 나중에 정의한 css가 적용된다. 요소명 선택자 가중치 : 1점클래스 선택자 가중치 :.. 2017. 3. 24.
[CSS] css 입문 01 (170323) CSS 입문 01 ** 생소했던 개념들 위주의 포스팅 ** CSS 방향 순서- top -> right -> bottom -> left : 시계방향- padding : 10px 20px 30px 40px; 경우 시계방향으로 위치 가리킴- padding : 10px 20px 경우 상하, 좌우- padding : 10px 20px 30px 경우 left는 마주본 right인 20px로 자동 지정됨 overriding (재정의)- 기본으로 적용되어있는 margin, padding등은 overriding이 가능하다. CSS 가상클래스(pseudoClass)- 대표적인 예로 hover가 있다. - 마우스가 올라가면 자동으로 추가되는 가상 클래스- 눈으로는 확인할 수 없지만 마우스가 올라가면 가상클래스가 추가됨. m.. 2017. 3. 23.