querySelector('a')
- a 태그 중에서 가장 위에 있는 하나만 가져옴
querySelectorAll('a')
- 모든 a 태그를 다 가져옴
Shift + Enter
- 콘솔에서 아직 다 코딩을 못 끝낸 채 엔터를 치고 싶을 때
prompt
- alert이 경고창이라면, prompt는 질의응답 창
<div></div>
- 줄 바꿈 기능이 있다
text-decoration: none;
- 장식을 없애다
text-decoration: underline;
- 밑줄 긋기
text-underline-position: under;
- 밑줄을 조금 더 밑으로 떨어뜨려서 긋기
border
- 테두리
border-width: 5px;
- 테두리 두께
border-color: red;
- 테두리 색깔
border-style: solid;
- 테두리를 하나의 직선으로
block level element
- 한 줄을 통째로 다 쓰는 애들(화면 전체)
-ex)<h1>,<div>,<p>,<ol>,<ul>,<li>등등 - 화면 크기 전체의 가로 폭을 차지
- width, height, margin, padding 프로퍼티 지정 가능
- block 안에 inline 요소 포함 가능
inline element
- 자신의 태그 콘텐츠 안에서만 있는 애들
-ex)<a>,<span>,<strong>,<img>,<br>,<input>,<textarea>등등 - 줄을 바꾸지 않고 같은 줄(중간)에 들어갈 수 있다
- width, height, margin-top, nmargin-bottom 프로퍼티 지정 불가
inline-block level element
- inline 레벨 요소와 한 줄에 같이 가능
- width, height, margin 프로퍼티 지정 가능
- content의 너비만큼 가로 폭 차지
display: inline;
- block level element를 inline element로 바꾸는 방법
display: block;
- inline element를 block level element로 바꾸는 방법
display: none;
- 화면에서 사라지게 하는 방법
padding
- 콘텐츠와 테두리 사이
margin
- 테두리와 테두리 사이
display: grid;
- 그리드로 표현하겠다
grid-template-columns: 150px 1fr;
- fr은 150px을 뺀 나머지를 다 쓰겠다는 의미, 화면이 작고 커짐에 따라 크기 변함
텍스트가 많아져도 자동으로 커지고 작아짐
검색 can i use.com
- 현재 얼마나 그 기술을 채택하고 있는지 보여준다
- 써도 되는 것인지 아닌지 확인하는 곳
-초록색이면 써도 가능, red는 적용 안 됨, 풀색은 어느 곳에만 지원 가능
-오른쪽 상단 75%는 어느 정도 사람들이 그것을 쓸 수 있는지
HTML의 주석 <!--콘텐츠-->
반응형 디자인
- 화면의 크기에 따라서 웹 페이지 각 요소들이 반응해서 동작하게 된다
- 화면의 크기에 따라서 웹 페이지의 디자인이 달라지는 거
- 콘솔 켜고 화면 줄였다 늘였다 하면 오른쪽 상단에 몇 px인지 확인 가능
media query
@media(min-width:800px) { <div> { border : 10px solid green; display : none; </div>->화면의 크기가 800px보다 커질 경우 해당
<div>태그가 사라진다
- min (최소값) max (최대값)
media query
screen width > 800px
화면의 크기가 최소한 800px 초과이다 =
화면의 크기가 800px보다 클 때 =
@media(min-width:800px)
screen width < 800px
화면의 크기가 최소한 800px 미만이다 =
화면의 크기가 800px보다 작을 때 =
@media(max-width:800px)
input type="password" / "id"
-button이나 text만 있는 게 아니라
this/바인딩/디폴트 바인딩/strict mode/토글
.reverse(); => 거꾸로 나열
-원래 1234면 4321로
Math. ~~ - 수학적 계산
- math라는 객체에는 수학과 관련된 변수와 함수들을 잘 정리정돈 해 놓음
1. Math.PI 파이 계산
console.log(Math.PI);
- 3.14
~~ 나옴
2. Math.random();
console.log(Math.random());
- 아무 숫자가 나옴 누를 때마다
3. Math.floor 소수점을 내려서 정수로
console.log(Math.floor(3.4));
- 3
console.log(Math.floor(4.9));
- 4
preventDefault();
- react에서 html 코드의 기본 동작을 없애주는(막아주는) 메소드
heap
- 완전 이진 트리 일종인 우선 순위 큐를 위해 만들어진 자료 구조
-완전 이진 트리 : 노드를 삽입할 때 왼쪽부터 차례로 삽입하는 트리 - 여러 개의 값 중에서 최대, 최소의 값을 빠르게 찾기 위해 만들어진 자료 구조
- 부모 노드의 키 값이 자식 노드의 키 값보다 항상 큰 이진 트리 --> 최대 힙
- 부모 노드의 키 값이 자식 노드의 키 값보다 항상 작은 이진 트리 --> 최소 힙
- heap 트리에서는 중복 값 허용
- 힙을 저장하는 표준 자료 구조는 배열
