본문 바로가기
> 코딩애플 (부분공개)/JavaScript 입문과 웹 UI개발

동적 UI 만드는 스텝 (Alert 박스 만들기)

by 자몽주스 2023. 11. 25.
728x90

오늘의 숙제 :

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 이라는 속성을 넣을 수 있는데

onclick 에는 자바스크립트를 작성할 수 있음.

이걸 넣게되면 해당 html 을 클릭시 onclick 안의 자바스크립트를 실행해줍니다. 

( 버튼 눌렀을 때 실행 )

 

그럼 버튼을 눌렀을 때 자바스크립트를 실행하고 싶으면

<button onclick="자바스크립트~~"> 버튼 </button>

이렇게 코드짜면 되는 것임 

 

 

<button onclick="Alert 박스 보여주셈~~"> 버튼 </button>

onclick 속성 안에 이렇게 코드짜면 버튼누르면 Alert 박스가 보이지않을까요?

 

근데 "Alert 박스 보여주셈~" 이렇게 사람처럼 말하면 컴퓨터는 절대 못알아듣는다고 했습니다.

컴퓨터 바보 멍청이임

정확히 어떤걸 어떻게 수정해야 박스가 보일까요? 

hint) html 변경임 (JS 는 html 조작)

 

그냥 알려드리면 display : block 이렇게 수정하면 Alert 박스가 보입니다.  


5분 드릴테니 빨리 자바스크립트 짜보십시오 

 

(혼자 짜보기)

 

html을 변경할 땐 항상 document 부터 시작하는 그거 쓰면 된다고 했습니다   

그럼 "Alert 박스의 display : block 으로 바꿔라" 라고 코드를 작성하려면 어떻게 해야할까요.

고민해서 안나오는건 구글찾아보면 되는 것임 

 

<button onclick="document.getElementById('어쩌구').style.display = 'block';"> 버튼 </button>

이러면 display가 block으로 바뀝니다.

어쩌구 자리에 Alert 박스의 id를 집어넣으면 되겠군요. 

id가 없다고요? 하나 만드십시오 

 

[collapse]

 

그렇다면 집에가서 상단 숙제를 해옵시다.

728x90