본문 바로가기

CodeIt_Sprint87

(2)인터렉티브_자바스크립트_특정 태그에 핸들러 적용하기(요소노드.onclick프로퍼티), Window객체,document객체(Dom모델), console.log() VS console.dir(), DOM 트리 구조 ● 이론1 : 버튼태그를 querySelector() || getElement...()로 변수 저장한 후, 버튼을 누를 시, 어떠한 동작 구현 코드 작성 => 노드.onclick 프로퍼티 + 핸들링 , 핸들러 작성○ 개념1 : // 버튼을 누를 시, 동작 구현 해보기순서1_ getElement() || querySelector() 로 요소노드로 변수에 저장 순서2_  요소노드의 프로퍼티인 onclick 순서3_  핸들러로 구현할 코드 작성○ 연습 문제 1 :- index.html Click! - "Click!"버튼을 누를 시, console창에 "시발련아" 문자열 출력하도록 js작성하기 하기답 ://순서1_ 버튼태그 요소노드 변수로 저장const btn = querySelector('#n.. 2024. 11. 28.
(1)인터렉티브_자바스크립트_Java Script_맛보기, 요소노드를 변수,유사배열로 저장,호출하기 ● Default 상태 :- index.html 0 - + - style1.css 0 - + - 출력장면● 요구사항 :"-" / "+" 버튼을 누를 시, 위에 출력된 숫자값 1값씩 증감, 감소되도록 한다.color 버튼을 누를 시, 위에 출력된 숫자의 텍스트가 버튼 색깔로 변경되도록 한다.● 답 :- index1.js//1) 위의 동작에 관련된 태그들을 변수로 저장//출력된 숫자const myNum = document.ge.. 2024. 11. 28.
(18)React_초급_DiceGame_React_Project_2_인라인 작성부분 - 이전 JSX 작성 과정 링크  : https://kojammin.tistory.com/201- CSS 예시자료 받을 수 있는 링크 : https://kojammin.tistory.com/199 ▣저번 과정까지 기본 구조, 작동 부분을 구현했으니, 이제 CSS 스타일 작업으로 꾸미기를 하는 과정◎ 6_ 전체 배경화면, 폰트의 Style 적용 => index.html의 style 시트에 직접 적용- index.html  ● 출력 장면 :◎ 7_ Header 부분 => "F12"를 눌러 부분이라는 것을 알 수 있다.● 순서1_ [src]폴더에 [Style]폴더를 따로 생성, Header부분 담당의 [Header.css] 생성, 컴포넌트에 import로 적용 하기○ [src]폴더에 [Style] 폴더 .. 2024. 11. 26.
(17)React_초급_DiceGame_React_Project_1_JSX작성부분 https://kojammin.tistory.com/199 (15)React_초급_React_Design_최종 실습문제 2문제(이건 여러번 복습)◎ 연습문제1 : 앞의 레슨들에서는 리액트의 개념을 배우면서 기능을 하나씩 완성해 보았습니다. 이제 남은 것은 이미지를 배치하고 CSS로 디자인을 마무리하는 거겠죠? 완성에 필요한 이미지 파kojammin.tistory.com위의 문제의 Dicegame 프로젝트를 만들어본 과정입니다.◎ 1_ index.js 작성 과정 //직접적으로 출력되는 js파일●  [index.html]코드를 봤을 때, 태그 내 자식인 div#root 안에서 제작될 것이다.-index.html ●  그래서, index.js는 아래와 같이 작성 시작import를 통해 ReactDom을 불러.. 2024. 11. 26.

티스토리툴바