노마드 코더 강의 들으면서 그림판 만들어보기
html, css로 페이지 모양을 다 만들고 JS로 기능추가
📌 CSS : display: flex;
items를 감싸고 있는 container에 display: flex; 를 주면 flexible box가 된다. 주로 수평배열에 이용하지만 수직 배열에도 용이
display: flex;
flex-direction: column;
align-items: center;body 내부 요소들을 세로로 배열, 가운데정렬하기 위해 body에 위와 같이 작성
📌 CSS : RGBA
색상 설정 시, RGBA를 사용하면 4개 값이 들어가는데,
순서대로 R, G, B, opacity
opacity : 0.0(완전 투명) ~ 1.0(완전 불투명) 사이의 값
📌 CSS : 버튼 눌렀을 때 축소됐다가 돌아오기
button:active{
transform: scale(축소될 정도);
}📌 JS : Document.getElementById()
Document.getElementById(): 주어진 문자열과 일치하는 id 속성을 가진 요소를 찾고, 이를 나타내는 Element 객체를 반환
(# 안붙임)Document.querySelector(): 모든 선택자 사용 가능. id가 없는 요소에 접근할 때 사용
📌 JS : 캔버스 안에서 마우스 움직임
mousemove 이벤트 출력해보면 콘솔에 clientX,Y, offsetX,Y 있음
clientX,Y: 윈도우 전체 기준 좌표offsetX,Y: 캔버스 기준 좌표
캔버스 안에서 마우스 움직임 얻을거니까 여기서 필요한 것은 offset
