Flex:
align-items: 수직 정렬
justify-content: space-around: 좌우 여백 똑같이 주겠다.
•
justify items: 좌우 정렬에 사용
◦
space-around와 between 차이:
▪
between: 사이에 개체 사이에 같은 여백 생김
▪
around: 개체 하나를 중심으로 양쪽에 같은 여백 생김
⇒ 둘의 차이 양쪽 끝의 여백!
•
align items: 상하 정렬에 사용
•
row: 요소들을 텍스트의 방향과 동일하게 정렬합니다.
•
row-reverse: 요소들을 텍스트의 반대 방향으로 정렬합니다.
•
column: 요소들을 위에서 아래로 정렬합니다.
•
column-reverse: 요소들을 아래에서 위로 정렬합니다.
flex-direction: row-reverse;
justify-content: flex-end;
/* row/column reverse: start, end 의 순서도 바뀜
CSS
복사
window- 대통령, document- 장관 급
자바스크립트: const:
•
document.querySelector: 리모콘 특정 기능 수행처럼 생각
최초 로드된 자바스크립트를 통해 미리 브라우저에 올라간 템플릿만 교체되는 것이다.
body> div
div
CSS
복사
인 경우: 위에 써져 있어도 부모의 자식인 div가 더 쎄다.
•
속성 + !important: 가장 쎄다
•
속성 우열: 위> 아래, 자식> 덮어쓰기
js- 인라인 입력임
<검색 시>
#: id
. : class
그냥: 태그
js에서 .addclass(css) 하는 이유: css 수정이 용이함(넣고 빼는 것이 용이)
이름이 없는 함수: 익명함수
⇒ function () {}
•
const a = function() {} = 익명 함수 function을 a에 넣는다.→ 이름 지어줌
반응형 웹 설계: css에서 width 지정x, auto로 주기
fixed: absoulte와 달리 스크롤바 따라다니면서 화면 채움
z-index: 더 큰 z-index 값을 가진 요소가 작은 값의 요소 위를 덮는다.
: popup. active: popup 클래스의 후손 중에 active를 가진 요소들을 탐색
: popup.active: 하나의 엘리먼트가 2개를 동시에 가진 녀석들을 탐색
: span→ nav→ article→div 순으로 알림 전달(자식이 보고)
프론트엔드: 1차원적으로 생각하고 짜기→ 코드의 수명이 짧기 때문에
