[JS 오류] Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')

1. 오류 발생 1. Uncaught TypeError: Cannot read properties of null (reading 'addEventListener') > 콘솔에서 undefined 출력 document.querySelector('#searchBtn2').addEventListener('click', function () { alert('버튼 클릭'); }); 2. 해결방법 1. window.onload 사용 window.onload = function () { document.querySelector('#searchBtn').addEventListener('click', function () { alert('버튼 클릭'); }); }; 2. index.html 파일에서 태그 제일 하단에 위..

• format_list_bulleted TIL :: Today I Learned
• · 2023. 10. 19.
• textsms

SQL 정리 :: JOIN | Subquery | WITH절 | SUBSTRING | CASE문

1. 기초 1. 데이터베이스의 테이블 확인 : show tables 2. 조회 : SELECT * FROM orders WHERE payment_method ='kakaopay' * 실행 : [ctrl+enter] 3. 조건 : SELECT * FROM users u WHERE email like 's%com' ( 이메일이 s로 시작해서 com으로 끝나는) 2. 이외 유용한 문법 1. limit : 5개만 보겠음 ::select * from orders limit 5 2. distinct : 특정 컬럼 중복제거 :: select distinct(payment_met1건문에 ''로 해줘야함 2. You have an error in your SQL syntax; :: 조건문 주변 확인하기 3. 범주의 통계..

• format_list_bulleted Database
• · 2023. 10. 11.
• textsms

[웹페이지 #01] 3. 메인페이지 상단 공지 & 하단 푸터 (HTML, CSS)

1. 상단 공지 * HTML 코드 [ TMI 공지 ] 추석 전에는 7조였는데,, 쉬고 오니 2조가 되었습니다. 👉 안녕하세요 7ㅏ즈아 2조입니다. 😃 * CSS 코드 .notice-word { /*상단 공지*/ color: #f9f3cc; font-weight: 700; font-family: 'Noto Sans KR', sans-serif !important; font-size: 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 30px; background-color: #6b85a0db; } 2. 하단 푸터 HTML & CSS * HTML 코드 리액트 ..

• format_list_bulleted CSS
• · 2023. 10. 7.
• textsms

[웹페이지 #01] 2. <div>태그 여러 개로 소개글 그리기 (HTML, CSS)

1. CSS 코드 /*첫번째 구간*/ .top-layout { display: flex; justify-content: center; /*가운데오게*/ } .top { width: 900px; display: flex; justify-content: center; /*가운데오게*/ padding-bottom: 40px; } .face-img { height: 300px; width: 260px; margin: 30px auto; } .top-word { text-align: left; width: 800px; height: 330px; padding-top: 30px; padding-left: 20px; border-radius: 4px; flex-direction: column; } /*두번째 구간*/..

• format_list_bulleted CSS
• · 2023. 10. 6.
• textsms

[웹페이지 #01] 1.반응형 헤더 (HTML, CSS)

nav태그에 대해 인원1블로그주소 인원2블로그주소 인원3블로그주소 인원4블로그주소 현재 기온 : 태그 * 같은 페이지 / 다른 페이지 안에 다른 부분으로 이어주는 네비게이션 링크로 구성된 섹션 * 태그를 태그 안에 사용하는 것이 일반적 .navbar a { text-decoration: none; /*태그 밑줄긋기 효과 없애기*/ color : white; } .navbar { display: flex;/*아이템들 가로로 나란히 배치*/ justify-content: space-between;/*같은 중심축 기준: 아이템 사이에 공백 넣기*/ align-items: center; /*수직축 중간 배치*/ background-color: #8EACCD; /*배경 색상*/ padding: 8px 12px; ..

• format_list_bulleted CSS
• · 2023. 10. 6.
• textsms

Git , Github 개념 / Git 명령어 리스트 / 필수 리눅스 명령어 정리

1. Git이란? 하나의 폴더 내에서 코드의 변경점을 기록 2. Github란? 온라인 저장소에 백업 / 코드 공유로 협업 가능 3. Git 명령어 리스트 1. git init 2. git add / git add . (저장할 파일 지정) 3. git commit -m "기록" (실제로 저장) 4. git status 5. git log (커밋 로그 확인 / 빠져나올때는 q 입력) 6. git push 7. git clone (git clone .) 8. git pull 4. 필수 리눅스 명령어 정리 1. pwd (print working directory) : 현재 작업 폴더 보여줘 2. ls (list) : 현재 위치의 모든 파일 및 폴더 리스트 보여줘 3. ls -a : 숨겨진 폴더도 보여줘 (-:..

• format_list_bulleted Git
• · 2023. 10. 5.
• textsms