I'm sw engineer!

jQuery 입력 양식 필터 선택자 - 태그 중에 type 속성에 따른 태그선택자 E: button E : checkbox E: file E:image E:password E:radio E:reset E:submit E:text E:checked - check 된 입력양식 선택 E:disabled - 비활성화된 입력양식 선택 E:enabled - 활성화된 입력양식 선택 E:focus - 초점이 맞춰져 있는 입력양식 선택 E:input - 모든 입력양식 선택 E:selected - option 객체 중에 선택된 태그 선택

E : element : 요소 A : attribute : 속성 V : value : 값 attribute를 조건으로 원하는 element 찾기 1️⃣E[A] - 해당 속성을 가지는 요소 선택 -ex : $('span') 2️⃣E[A=V] / E[A!=V] - 해당속성의 값이 일치/ 불일치하는 요소 선택 -ex : $('span[id="text1"]') /$('span[id!="text1"]') 3️⃣E[A*=V] - 해당 속성의 값이 포함되는 요소 선택 -ex : $('span[id*="text1"]') 4️⃣E[A^=V] - 해당 속성의 값으로 시작되는 요소 선택 -ex : $('span[id^="text1"]') 5️⃣E[A$=V] - 해당 속성의 값으로 끝나는 요소 선택 -ex : $('span[..

jQuery( element object | 'css stye selector' ) = $ ( element object | 'css stye selector' ) 래퍼( wrapper )란, jQuery 또는 $로 시작되는 함수이고, 인자로 전달된 요소들에 제이쿼리의 기능성을 부가해서 반환한다는 의미이다. 셀렉터 종류 종류 표현 Ex All $('*') $('*') ID 선택자 $('#id') $('#data') Class 선택자 $('.className') $('.data') Element ( tag ) $('elementName') $('p') 다중 선택자 $('tag, tag1, tag2') $('span, th, td') 속성 $('[속성이름]') $('[value]') // value라는 속성..

position 속성 - css에서 position 속성은 HTML 문서 상에서 요소가 배치되는 방식을 결정. - 정확한 위치 지정을 위해서는 top, left, bottom, right 속성과 함께 사용 static - position 속성을 따로 지정해주지 않았다면, 기본값인 static이 적용. - position : static; 으로 되어있으면 HTML에 작성된 순서대로 화면에 표시하라는 의미이기 때문에 top, left, bottom, right 속성을 작성해도 무시된다. relative - position : relative; 로 되어있으면, 이 요소를 원래 위치 기준으로 상대적 ( relative )으로 위치를 지정한다는 의미이므로, top, left, bottom, right 속성을 이용..

변수의 선언은 var, const, let 으로 할 수 있다. ES6 에서 const 와 let이 추가되었다 var의 문제점 - 변수 중복선언이 가능하다 → 예상치 못한 값이 반환될 수 있다 - 함수 외부에서 선언한 변수는 전역변수로 설정된다. → 함수 레벨 스코프 때문 - 변수 선언이전에 변수를 참조하면 언제나 undefined를 반환. let - 변수 중복선언이 불가능하다. - 재할당은 가능하다. - 지역변수로 선언됨. ( 블록레벨 스코프 ) - 선언단계와 초기화 단계가 분리되어 진행 → 런타임 이전에 자바스크립트 엔진에 의해 선언 단계가 먼저 실행되지만, 초기화 단계가 실행되지 않았을 때 해당 변수에 접근하려하면 참조에러가 뜬다. ( 일시적 사각지대- Temporal Dead Zone :TDZ ) ..

outline-offset css속성은 outline ( 윤곽선 )과 요소의 가장자리 사이의 간격을 설정한다. 예로든 요소의 크기는 동일하고 out-line 설정만 바뀌는 것이다. outline-offset: 4px; outline-offset: .6rem; outline-offset: 12px; outline: 5px dashed blue; 출처 : https://developer.mozilla.org/en-US/docs/Web/CSS/outline-offset

CSS는 같은 속성을 여러번 정의하게 되면, 나중에 설정한 값이 적용된다. 만약 나중에 설정한 값이 적용되지 않아야 한다면 속성값 뒤에 !important 를 붙여준다. 프로젝트를 하다보면 css파일도 많아지고 추가하게되면서 같은 속성을 정의하게 되어 내가 원하는 효과가 나오지 않을 때가 있는데, 너무 남발하면 안되겠지만 중요한 곳에 적어두면 되겠다. 먼저 !important를 적어놓았어도 나중에 정의한 값에도 !important를 붙이면 나중에 설정한 값으로 바뀐다 ex) p{ background-color : red !important; float : left; } p{ background-color : blue; float : left } p{ background-color : green !impo..

" target="_blank" rel="noopener">http://code.jquery.com/jquery-latest.js"> 항상 최신버전의 jQuery를 사용할 수 있는 주소이다. 만약 적용이 안된다면 주소의 위치를 확인해봐야 한다.

overflow 속성은 요소의 콘텐츠가 커서 블록서식 맥락에 맞출 수 없을 때의 처리법을 지정한다. overflow: visible; visible - 콘텐츠를 자르지 않고 안쪽 여백상자 밖에도 그릴 수 있다. overflow: hidden; hidden - 콘텐츠를 안쪽 여백상자에 맞춰 잘라낸다. - 스크롤 지원도 하지 않는다. overflow: scroll; scroll - 콘텐츠를 안쪽 여백상자에 맞춰 잘라낸다. - 콘텐츠를 잘라냈는지의 여부와 상관없이 항상 스크롤로바를 노출한다. overflow: auto; auto - 사용자 에이전트가 결정한다. - 콘텐츠가 안쪽 여백상자안에 들어간다면, visible과 동일하게 보이나 새로운 블록서식 문맥을 생성 - 데스크톱 브라우저의 경우 콘텐츠가 넘치면 스..

부트스트랩에서 제공하는 그리드 시스템 (Grid System) 은 콘텐츠를 논리적이고 일관성 있는 질서와 구조로 디자인할 수 있도록 돕는 그래픽시스템을 의미한다. 그리드 시스템은 일련의 컨테이너(container), 행(row), 열(column)을 이용하여 콘텐츠를 레이아웃하고 정렬하며 반응형디자인이다. 1. container - container가 감싸고 있는 콘텐츠를 가운데 정렬해준다. - 반응형으로 너비(width)를 지정하려면 ➡ .container - 화면의 100%로 너비(width)를 지정하려면 ➡ .container-fluid 2. row - column을 한줄로 감싸줌. (원래 div는 한줄을 차지하는 태그인데, row로 묶인 div끼리는 한줄안에 위치함.) 3. column - row..