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

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 트리에서는 중복 값 허용
• 힙을 저장하는 표준 자료 구조는 배열