분류 전체보기 (37) 썸네일형 리스트형 jQuery 베이직(셀렉터, 메소드) 셀렉터 영원히 안녕 document.getElementBy어쩌구('') $('#아이디이름') $('.클래스이름') 메소드(함수) 쌩자바스크립트랑 약간 다름 많으니까 외우지 말고 구글링 $('#아이디이름').text('바보'); $('#아이디이름').html('태그 포함해서 모든 내용 변경'); $('#아이디이름').css('color', 'blue'); jQuery 설치 CDN (content delivery network) 구글에 jQuery CDN 검색 후 버전 골라서 -> HTML 파일에 스크립트 태그 복붙해주기 다운 받기 CDN 스크립트 태그 내의 src 주소로 접속 -> js 파일 하나가 열리는데, 우클릭 해서 작업 폴더에 저장한 다음 addEventListener HTML에 자바스크립트를 넣는 onclick은 옛날 방식임 document.getElementId('아이디이름').addEventListener('click', function(){ 코드; }); 여러 이벤트들 있음 click mouseover scroll (요소에 스크롤 바가 있어야 함) keydown (input 같은 거여야 함) function(함수) 긴 코드를 한 단어로 축약 function 한단어(){ 긴 코드; } 불러올 때는 한단어(); 파라미터, 변수 function 창열기(파라미터){ document.getElementById('아이디이름').style.display = 파라미터; } 창열기('none'); 창열기('block'); 두 개 이상 사용 가능 소괄호 내에 콤마로 구분해주기 function 더하기(변수, 변수2){ 변수 + 변수2; } 더하기(3, 4); onclick UI (onclick) -미리 만들어 놓고 -display: none이나 visibility: hidden으로 숨기기 -버튼 눌렀을 때 보이게 onclick 모든 HTML 태그 내 속성에 onclick 추가할 수 있음 : 누르게 되면, onclick 내부의 자바스크립트를 실행함 눌러라 document.getElementById('아이디').style.display = 'block' 자바스크립트를 이용해 HTML을 조작, 변경(셀렉터, 메소드) 내부 글자 바꾸기 document.getElementById('아이디이름').innerHTML = '바꿀내용'; 내부 글자의 색상 바꾸기 document.getElementById('아이디이름').style.color = 'blue'; 셀렉터 HTML 요소를 찾기 위해 사용 getElementById() 메소드 HTML 요소의 어떤 속성을 변경할지 결정하기 위해 사용 innerHTML style.color (이외에 굉장히 많음. 외우지 말고 검색하기) 패스트캠퍼스 챌린지 최종 후기 안녕하세요. 9월 6일부터 10월 5일까지 진행된 작심 30일 자기계발 챌린지에 참여한 외노자 카키입니다. 저에게 이런 날도 오다니... 작심 3일만 해오던 제가 30일을 다 채운 게 아직도 의아하네요. 사실 저는 이번 이벤트 시즌에 유입된 건 아니고, 2018년과 2019년 1월에 두 패키지를 수강 '신청'한 이력이 있는 기존 패캠 수강생입니다. 과거 그 당시에는 강의 신청만 하고 끝 마무리는 흐지부지했죠. 음... 완강하지 못했단 소리입니다. (참고로 애초에 시작도 못한 강의도 있답니다 헤헷) 왜 제 자신이 30일 동안 꾸준히 공부한 게 의아하다고 했는지 이해가 가시겠지요? 그런 제가 뭔가 하나 해보겠다고 지난 8월에 또 강의 하나를 수강하게 되었습니다. 강의 이름은, 한 번에 끝내는 프론트엔드 개발.. Vue 템플릿 문법 [패스트캠퍼스 챌린지 30일차] 보간법 Interpolation 문자열 콧수염 기법을 사용한 문자열 보간법 : 이중 중괄호 구문 {{콧수염}} 메시지: {{ msg }} 콧수염 부분은 실제 데이터로 대체돼서 화면에 출력됨 그리고 그 해당하는 데이터가 변경될 때 화면도 같이 갱신됨 : 반응성 v-once 디렉티브를 사용했을 땐 일회성 : 데이터를 변경해도 화면이 갱신되지 않음 결코 안 변할 거임: {{ msg }} 원시 HTML 콧수염은 뷰js 데이터를 HTML이 아닌 일반 텍스트로 해석해서 화면에 출력함 만약 실제 HTML 구조로 출력하고 싶으면, v-html 디렉티브를 사용해야 함 이중 중괄호 사용: {{ rawHtml}} v-html 디렉티브 사용: 예시. 콧수염에 html 구조 넣었을 때 실제 브라우저에 출력된 건 빨간 색의 He.. Vue 인스턴스와 라이프사이클 [패스트캠퍼스 챌린지 29일차] 인스턴스와 라이프사이클 어플리케이션 인스턴스 생성하기 어플리케이션 & 컴포넌트 인스턴스 | Vue.js 어플리케이션 인스턴스 생성 모든 Vue 어플리케이션은 createApp 함수를 사용하여 새로운 어플리케이션 인스턴스를 생성하여 시작한다 const app = Vue.createApp({ /* options */ }) 인스턴스가 생성되면, mount 메소드에 컨테이너를 전달하여 mount 할 수 있음. 예를들어, 에 Vue 어플리케이션을 마운트 시키고 싶다면, #app을 전달해야함 아래는 예전에 썼던 방법 Vue.createApp({ /*option*/ }).mount('#app') 메소드 체이닝 사용 가능 어플리케이션 인스턴스에 의해 노출된 대부분의 메소드들은 동일한 인스턴스를 반환하여 .. Vue 선언적 렌더링과 입력 핸들링, 조건문과 반복문 [패스트캠퍼스 챌린지 28일차] 선언적 렌더링과 입력 핸들링 단일 파일 컴포넌트 SFC (Single File Component) Vue라는 확장자로 만들어져 있는 하나의 파일을 '단일의 파일로 만들어져있는 컴포넌트'라는 개념으로 부름 템플릿, 스크립트, 스타일 이 세 태그로 구성해줄 수 있음 템플릿: html(Vue 문법) 스크립트:자바스크립트(Vue 문법) 스타일:CSS(SCSS은 설정 살짝 추가해줘야 함) : 두번째 예시 {{ count }} 여기서 중요한 건 데이터를 갱신하면 그것이 연결된 브라우저의 화면도 같이 갱신된다는 것임 → 반응성 Reactivity 데이터를 갱신하면 화면도 바뀐다! —참고— //메소드. 콜론 기호랑 펑션 키워드 생략 가능 export default { data: function () {}.. 이전 1 2 3 4 다음
