분류 전체보기4 유용한 Webstorm 단축키(shortcut) 모음 MAC 버전 수정/편집 ⌥⌘T 상황에 맞는 코드들로 감싸준다 예) if..else, try..catch, for, etc.... ⌃J 빠르게 문서 찾아보기 ⌘J 라이브 템플릿 넣기. 지정된 emmet 을 찾아서 넣는다고 생각하면 쉽다 ⌘/ 한줄 주석넣기 ⌘⇧/ 블럭 주석넣기 ⌥↑ 커서 위치한 부분의 선택 영역확대 ⌥↓ 위 단축키의 반대 개념 ⌥⌘L 코드를 보기좋게 정렬한다 ⌥⌘I 자동 들여쓰기 ⇥ 들여쓰기 ⇧⇥ 위 단축키의 반대 ⌘D 선택된 라인 혹은 블록의 복사 ⌘⌫ 커서가 위치한 한줄 삭제 ⌥⇧↑ 라인을 위로 이동 ⌥⇧↓ 라인을 아래로 이동 ⌃⇧J 라인 합치기 ⌘↩︎ 라인 자르기 ⇧↩︎ 새로운 라인 시작 ⌘⇧U 선택된 블록 혹은 단어를 대문자/소문자로 전환 ⌘⇧⌥[ 코드의 시작점까지 선택 ⌘⇧⌥] 코드의 끝점까지.. 2020. 3. 25. CSS 사용자 지정 속성(변수) 사용하기 웹페이지 디자인 작업을 할 때 대부분은 대표적인 색상 몇가지를 정해놓고 작업을 해야 결과물이 난잡해지지 않는다. 완성된 디자인 시안을 가지고 프론트 엔드 작업을 하게 되는데, 이때 css에서 색상 코드를 사용하게 된다. 많은 색상을 다루다 보면 샵과 6개의 숫자로 이루어진 색상코드가 헷갈릴 때가 있는데, css에서 var 변수를 사용하면 번거로움을 조금은 줄일 수 있다. 대략적인 사용방법은, 위의 CSS 로고의 경우 색상 코드는 #3099D9 이다. 이 색상을 자주 사용하고 싶다면 lightBlue 라는 식으로 일단 편한대로 지정해준다. 그리고 불러오고 싶은 곳에서 var 를 넣어주고 lightBlue를 다시 적어주면 되는 것이다. 색상 선언의 예 :root { --lightBlue: #3099D9; -.. 2020. 2. 14. 배열의 반복문 사용과 객체의 반복문 사용의 다른점 배열에서의 반복문 사용은 다음과 같다 // 변수 fruits 에 과일 배열에 들어갈 목록을 선언합니다. let fruits = ['apple', 'mango', 'grape', 'orange']; // for 반복문을 이용하여 배열의 목록을 하나씩 출력합니다. for (let i = 0; i < fruits.length; i++) { console.log(fruits[i]); } 하지만 객체에서의 반복문 사용은 인덱스를 사용하지 않고 변수에 저장하는 방식을 사용한다. // 객체를 만듭니다. let score = { 철수: 80, 영희: 77, 백호: 79, 태웅: 82 }; // names 라는 변수에 score 객체를 지정해줍니다. for (let names in score) { // names(속성).. 2020. 1. 12. HTML5 시맨틱 태그(Semantic Tags) Semantic Elements A.K.A Semantic Tags 흔히 시맨틱 태그라고 불리는 시맨틱 엘리먼츠는 사전적으로는 '의미를 포함하고 있는 요소'라는 뜻이다 시맨틱 태그를 사용해야 하는 이유 기존에는 div 나 span 에 id 와 class 를 부여하여 섹션을 나누고 다른 태그와 구분을 하는 방식을 많이 사용하였고, 지금도 오래된 웹페이지들은 div로 도배된 모습을 많이 볼 수 있다. 훗날 수정할 부분이 생겼을때 수많은 div안에서 원하는 class 를 찾는 것은 쉽지 않다. 협업을 위해서나 유지보수를 대비하기 위해서도 시맨틱 태그를 사용하여 HTML을 작성하는 습관을 들여야 한다. w3school.com 출처 HTML5의 새로운 시맨틱 태그 article aslide detail pigca.. 2020. 1. 10. 이전 1 다음
