Front-End/JavaScript
[JavaScript] 2. alert박스 만들기, 주석, 에러
발전하는 개발자
2022. 6. 5. 20:45
728x90
반응형
[alert 박스 만들기]
1. 알림 창 만들기
<div class="alert-box" id="alert">알림창임</div>
2. css파일 생성 : main.css 파일을 하나 만듦
3. html파일에 css파일을 링크로 연결, html 파일의 <head> 부분에 작성
<link rel="stylesheet" href="css파일명.css">
4. css로 알림창 꾸미기
.alert-box {
background-color: skyblue; /*배경색*/
padding: 20px; /*여백*/
color: white; /*글자색*/
border-radius: 5px; /*테두리 둥글게*/
display: none; /*숨기기*/
}
5. 버튼을 누르면 알림 창이 나타나게 하기
<button onclick="document.getElementById('alert').style.display='block';">버튼</button>
<!-- '버튼'이라는 button을 누르면 id가 alert인 요소를 찾아 나타내기 --!>display:none; 숨기기
display:block; 나타내기
6. 버튼을 누르면 알림 창이 닫히게 하기
<button onclick="document.getElementById('alert').style.display='block';">닫기</button>
<!-- '닫기'이라는 button을 누르면 id가 alert인 요소를 찾아 숨기기 --!>
[주석처리]
주석 : 코드를 설명, 실행되지 않음
주석 처리 :VS Code에서는 ctrl+/
주석 기호 : HTML: <!-- --!>, CSS: /* */, JavaScript: //
[자주 나는 Error]
1. JavaScript 코드는 HTML 하단에 써야 함.
상단에 적은 HTML을 조작하기 위해 쓰는 코드가 Javascript코드이므로.
2. 셀렉터 오타 주의
getElementById(*) *에 들어갈 단어가 상단의 찾아서 바꿔야 할 요소랑 동일하게 적었는지 확인하기
Uncaught TypeError: Cannot read properties of null 오류 발생의 원인이 됨
3. 오타
철자, 대소문자, 따옴표, 괄호 등등 정확하게 적었는지 확인
728x90
반응형