1. JavaScript
1.1 표기법
1.1.1 dash-case(kebab-case)
- HTML, CSS에서 주로 사용
- ex) hello-world
1.1.2 snake_case
- HTML, CSS에서 주로 사용
- ex) hello_world
1.1.3 camelCase
- JS에서 주로 사용
- helloWorld
1.1.4 PascalCase
- JS에서 사용
- 주로 camelCase를 사용하지만 PascalCase 사용하는 경우가 있음
- HelloWorld
1.2 변수, 예약어
1.2.1 var
- 예전에는 많이 사용했지만 현재는 거의 사용하지 않음
- 호이스팅 문제 발생
- 호이스팅이란? 선언을 최상단으로 끌어올리고 할당은 가져오지 않는것을 의미
ex) console.log(name);
var name = 'Hong'; // undefined
let name = 'Hong'; // 에러 발생
1.2.2 let
- 호이스팅 문제를 해결
- 재할당 가능
1.2.3 const
- 호이스팅 문제를 해결
- 재할당 불가능
1.2.4 예약어
- 특정 기능을 수행하도록 미리 예약되어 있는 단어
- ex) This, if, braek ...
1.3 함수
1.3.1 기명(이름이 있는) 함수
- 함수 선언식
function hello() { console.log('Hello'); }
1.3.2 익명(이름이 없는) 함수
- 함수 표현식
let world = function() { console.log('World!'); }
1.4 DOM API
- Document Object Model, Application Programming Interface
- JS로 HTML을 제어하는 명령들?
<script defer: 지연 스크립트,</html>을 만났을때 동작
1.4.1 querySelector
1.4.2 addEventListener(arg1, arg2)
1.5 메소드 체이닝
- 메소드가 체인처럼 연결되어있다는 의미
- ex) 'abcdef'.split('').reverse().join('');
1.6 기타
- ROOT에 favicon.ico 파일이 있으면 따로 지정하지 않아도 해당 페이지의 탭에 아이콘으로 사용
- 고화질의 아이콘을 사용하고 싶으면
<link rel="icon" href="">사용 - 오픈그래프는 공유할때 사용자에게 보여지는것
og:type: 페이지의 유형(website, video.movie)
og:site_name: 속한 사이트의 이름
og:title: 페이지의 이름
og:description: 페이지의 간단한 설명, 길면 악성페이지로 인식할 수 있음
og:image: 페이지의 대표 이미지 주소(URL)
og:url: 페이지 주소(URL)
ex)<meta property="og:type" content="website" /> - 트위터 카드도 존재(오픈그래프와 유사)
- SEO(검색 엔진 최적화, Search Engine Optimization) : 구글이나 네이버 등에 자신의 웹 사이트를 노출할 수 있도록 정보를 최적화하는 작업
- 글씨 폰트 : https://fonts.google.com/specimen/Nanum+Gothic?query=nanum
- 아이콘 : https://material.io/design/iconography/system-icons.html#design-principles
https://material.io/develop/web/getting-started
https://fonts.google.com/icons <header></header>: 기능은 없음, div로 대체 가능- 수직으로 가운데 배치 하려면 height값, top(시작점), bottom(끝점), margin 필요
<a href="#"></a>,<a href="javascript:void(0)"></a>이동할 페이지가 정해지지 않을때 사용 가능- position:fixed 를 사용하고 top, bottom, left, right 값을 주지 않으면 요소의 원래 위치를 그대로 사용
- position:relative, fixed를 사용하면 너비를 최소한으로 사용하려고 함
flex-grow: display: flex;에서 남는 행 여백을 분배해서 채우는 방법- 비율 계산 - 100% : 56.25% = 16 : 9
[출처] https://github.com/ParkYoungWoong/starbucks-vanilla-app
1.7 BEM(Block Element Modifier)
- HTML 클래스 속성의 작명법
요소__일부분: Underscore(Lodash) 기호로 요소의 일부분을 표시요소--상태: Hyphen(Dash) 기호로 요소의 상태를 표시
분명 이전 강의에서 들은 내용인데 생각이 안나는게 꽤 있다...😅
복습... 해야하는데.....ㅠ....
