0:00 저번시간 숙제
1:05 오늘 배울 내용
2:50 Alert 박스 만들기 step 1
5:30 Alert 박스 만들기 step 2
오늘의 숙제 :
Alert 박스 내에 닫기 버튼과 기능을 만들어보십시오
닫기 버튼을 누르면 Alert 박스가 뿅 사라져야합니다.
▲ 오늘은 이런 Alert UI를 만들어보면서 html 변경이나 더 해봅시다.
기본적인 UI 만드는 법칙
웹페이지에선 탭, 모달창, 서브메뉴, 툴팁 등 수백개의 동적인 UI를 만들 수 있습니다.
이런거 하나하나 다 가르치면 100강도 모자라기 때문에
UI 만드는 법을 알려드릴테니 이거 외워가시면 저런 UI는 알아서 다 만들 수 있습니다.
1. HTML CSS 로 미리 UI 디자인을 해놓고 필요하면 평소엔 숨김
2. 버튼을 누르거나할 경우 UI를 보여달라고 자바스크립트 코드짬
이게 다임
step 1. Alert UI 디자인부터 하기
작업폴더에 main.css 이런거 하나 만들고
index.html <head> 태그 안에 <link href="main.css" rel="stylesheet"> 이렇게 첨부하면 css 이용가능합니다.
html 파일에는
<div class="alert-box">알림창임</div>
css 파일에는
.alert-box {
background-color: skyblue;
padding: 20px;
color: white;
border-radius: 5px;
display: none;
} 추가하면 디자인 완성입니다.
UI를 평소에 숨기고 싶으면 display : none 주면 됩니다.
다시 보여주고 싶으면 display : block 넣으면 보입니다.
싫으면 visibility : hidden 이것도 있습니다.
step 2. 버튼 누르면 Alert UI 보여주기
거의 모든 html 태그 내에 onclick 이라는 속성을 넣을 수 있는데
이걸 넣게되면 해당 html 을 클릭시 onclick 안의 자바스크립트를 실행해줍니다.
그럼 버튼을 눌렀을 때 자바스크립트를 실행하고 싶으면
<button onclick="자바스크립트~~"> 버튼 </button>이렇게 코드짜면 되는 것임
<button onclick="Alert 박스 보여주셈~~"> 버튼 </button>onclick 속성 안에 이렇게 코드짜면 버튼누르면 Alert 박스가 보이지않을까요?
근데 "Alert 박스 보여주셈~" 이렇게 사람처럼 말하면 컴퓨터는 절대 못알아듣는다고 했습니다.
컴퓨터 바보 멍청이임
정확히 어떤걸 어떻게 수정해야 박스가 보일까요?
그냥 알려드리면 display : block 이렇게 수정하면 Alert 박스가 보입니다.
5분 드릴테니 빨리 자바스크립트 짜보십시오
html을 변경할 땐 항상 document 부터 시작하는 그거 쓰면 된다고 했습니다
그럼 "Alert 박스의 display : block 으로 바꿔라" 라고 코드를 작성하려면 어떻게 해야할까요.
고민해서 안나오는건 구글찾아보면 되는 것임
<button onclick="document.getElementById('어쩌구').style.display = 'block';"> 버튼 </button>이러면 display가 block으로 바뀝니다.
어쩌구 자리에 Alert 박스의 id를 집어넣으면 되겠군요.
id가 없다고요? 하나 만드십시오
그렇다면 집에가서 상단 숙제를 해옵시다.
-
Add a note