study blog

변수에 데이터를 저장해서 쓰자 $변수명: 변수에 넣을 값 $main : #ff0000; .red { color: $main; } @import 파일경로 scss파일에 import로 또 다른 scss파일 불러오기 가능 @import './_reset.scss'; $main : #ff0000; .red { color: $main; } 보통 import용 scss파일에는 처음에 _(언더바) 사용함 ex._reset.scss nesting div.container { h4 { color: blue; } p { color: green; } } div.container의 h4, p태그를 따로 적을 필요없이 한 번에 적을 수 있음 @extends 문법 .alert { background: #eee; width: 50..

/*코딩애플 유료강의를 듣고 기록하는 포스팅*/ 데이터 바인딩 웹서비스 개발방식 서버가 html 파일을 완성해서 유저에게 보내는 방식 서버가 빈 html 파일에 데이터를 보냄 (채워넣는 작업은 브라우저한테 시킴=> 자바스크립트를 이용해서) 서버에서 데이터를 가져오는 방법은 Ajax를 배워야 한다. 데이터 바인딩이란 웹서비스 개발방식에 적은 두가지 방법 중 두번째에 해당한다. 즉, 서버가 보낸 사이트의 데이터를 html에 넣는 작업이다. var example = [{ price: 5000, title: 'Example1' }, { price: 50000, title: 'Example2' }, ] $('.title').eq(0).html(example[0].title); //출력값: Example1 $('...

/*코딩애플 유료강의를 듣고 기록하는 포스팅*/ Array(배열)와 Object(객체) 자료형 여러가지 자료를 한 곳에 저장할 때 [Array]와 {Object} 자료형을 쓴다. 차이점은 object에는 자료 왼쪽에 이름을 써야한다는 것이다. 배열은 배열 안에 배열을 또 넣을 수 있다. let 배열 = ['example', '100', [1,2,3]] let 객체 = {name: 'example', model: 100} 자료를 저장해두었다면 우리는 꺼내서 쓸 수도 있어야 한다. document.getElementById('id').innerHTML = 배열[0]; //자바스크립트 $('#id').html(배열[0]); //제이쿼리 $('#id').html(객체.model); 배열은 변수이름[몇번째]를 써..

/*코딩애플 유료강의를 듣고 기록하는 포스팅*/ 이벤트 버블링 이벤트 버블링이란 이벤트가 상위요소로 퍼지는 현상이다. 즉, div1-div2-p태그 가 있다고 가정한다면 p태그 하나를 클릭했다 하더라도 컴퓨터는 그 상위요소인 div1,div2를 다 클릭했다고 인식하는 것이다. 이걸 알아두어야 하는 이유는 이로인해 버그가 생길 수도 있기 때문이다. 버블링으로 버그가 생겼을 때는 if문이나 e.target 등으로 대처할 수 있다. 예시를 먼저 보자. $('.background').click(function(event){ if ( event.target == event.currentTarget ) { $('.background').hide(); }; }) 파라미터에 event라고 작명했고 그로인해 event...

/*코딩애플 유료강의를 듣고 기록하는 포스팅*/ 정규식 (test 함수) 정규식이란 문자를 검사할 때 쓰는 식이다. 정규식을 검사하면 이렇게 true가 나오는데 true/false식으로 나오니 if문에서 조건식처럼 쓸 수도 있다는 것도 알 수 있다. 또한 보통 정규식은 외우지 않고 찾아서 쓴다고 한다. 간단한 정규식 문법 // /[]/: (ex. /[A-z]/ => 대문자 A부터 소문자 z까지) /＼S/: 특수문자 포함 모든 문자 (ex. a#b@c => /＼S+#＼S+@＼S/) 주의할 점: .(점) 찾으려는 거면 ＼.으로 찾아야 함 제이쿼리로 Carousel (이미지 슬라이드) 이미지 슬라이드를 하기 위해서는 html과 css를 먼저 잘 설계해두어야 한다. (사실 모든 UI가 그렇겠지만😅) 이는 이미지..

/*코딩애플 유료강의를 듣고 기록하는 포스팅*/ 변수 var, let, const var age = 20; 위의 코드에서 age는 변수의 이름이 되고 20은 그 변수 이름에 저장된 값이라고 보면 된다. 변수를 공부하면서 알아야할 3가지가 있다. 선언: var age; 할당: age = 20; 범위: 전역변수와 지역변수 지역변수는 해당 함수 바깥에서는 사용하지 못하지만 전역변수는 어떤 함수 안에서 사용 가능하다. 최신 자바스크립트 문법(ES6)에 의해 var뿐만이 아니라 let과 const라는 변수도 생겼다. var: 재선언 가능/ 재할당 가능/ 범위: function let: 재선언이 불가능/ 재할당은 가능/ 범위:{} const: 재선언이 불가능/ 재할당도 불가능/ 범위: {} 변수가 개이득인 이유는 ..

/*코딩애플 유료강의를 듣고 기록하는 포스팅*/ Bootstrap 사용하기 부트스트랩이란 프론트엔드 component를 모아놓은 라이브러리이다. 메뉴, 대문, 모달, 폼 등의 디자인들을 미리 예쁘게 만들어 놓은 것으로 복붙으로 html을 빠르게 개발할 수 있다. 부트스트랩 사이트에서 내가 원하는 걸 찾아서 쓰면 된다. 더 필요한 부분은 스스로 css로 수정해서 개발하면 된다. 부트스트랩 사이트에 들어가 get start를 누른 뒤 오른쪽 위의 버전 선택 후 Starter template 부분을 복붙하면 된다. 나는 v4.6을 사용했다. 대문 같은 경우는 검색창에 Jumbotron을 입력하면 된다. 검색하고 나면 예제와 코드가 나오니 예제를 보며 맘에 드는 걸 가져오면 된다. 부트스트랩은 문법도 따로 있는..

/*코딩애플 유료강의를 듣고 기록하는 포스팅*/ addEventListener 지난 포스팅에서는 onclick을 이용해 자바스크립트의 함수를 html로 불러와 실행할 수 있다는 것을 알 수 있었다. 하지만 onclick을 쓰는 것 자체가 코드가 길어져 복잡해 보이기 때문에 html을 더 깔끔하게 보이기 위해 or html을 수정하지 못하는 경우를 대비해 우리는 자바스크립트에서 addEventListener 라는 함수를 쓸 수 있다. document.getElementById('close').addEventListener('click', function(){ document.getElementById('bigBox').style.display = 'none'; }) 결과: close를 클릭하면 bigBox..