본문 바로가기

2019/10

[CSS] CSS로 반응형 웹 만드는 방법 오늘 소개할 CSS는 미디어 쿼리 (@media)이다. 미디어 쿼리란? (@media) 화면 출력 장치 중 일부를 참조하거나, 가로 사이즈를 기준으로 기존에 작성했던 HTML 코드로도 다른 화면을 구현할 수 있게 만들어줌. CSS 작성하는 방법 @media only all and (조건) {실행} @media - 미디어 쿼리가 시작됨을 알린다. only - 미디어 쿼리를 지원하지 않는 브라우저에 대하여 특정 스타일을 적용할 수 있음. 생략하면 기본값으로 only가 들어가기 때문에 주로 생략한다. not으로 부정할수도 있다. all - 미디어 쿼리를 실행시킬 미디어 타입을 정해준다. (screen, tv, print, speech, all) 생략하면 기본값으로 all이 들어간다. 주로 screen을 사용한.. 더보기
[JS] 화살표 함수 Arrow Function 이 함수는 아쉽게도 모든 웹개발자들에게 사랑받는 킹터넷 갓스플로러에서는 사용이 불가하다. 정말정말아쉽다. 기본문법 일단 기본적으로 일반 함수와의 용법의 차이를 살펴보면 이렇다. function testFunc(arg = 'aaaa'){ console.log(arg); } let testFunc = function(arg = 'aaaa'){ console.log(arg); } let testFunc = (arg = 'aaaa') => { console.log(arg); } 이렇게 텍스트로 살펴만 보면 형식의 차이일뿐 별다른 차이는 보이지 않는다. 이런식으로 기존 함수형태와 같이 기본값을 정해 줄 수도 있다. 물론 전개식도 사용이 가능하다. let testFunc = arg => console.log(arg.. 더보기
[JS] ES6 구조분해할당 배열, 객체의 값을 각각의 변수에 담을 수 있다. ES6이라 킹터넷 갓스플로러는 안됨. 사실 익스는 ES5코드도 실행하는데 장애가 있다. let a, b; [a, b] = [10, 20]; console.log(a, b); // 10, 20 이렇게 변수를 교환할 수 있다. let a, b, arr; [a, b, ...arr] = [0, 1, 2, 3, 4, 5]; console.log(a, b, arr); // 0, 1, [2, 3, 4, 5 이렇게 전개식을 사용할수도있다. let a, b; {a, b} = {b: 123, a: 456} console.log(a, b); // 456, 123 Object도 ㅆㄱㄴ Object는 Key값에 의해 매칭된다. let a, b, obj; {a, b, ...obj.. 더보기

티스토리툴바