생활코딩에서 강의 끝마다 해주신 얘기가 있다.
일단 자신의 프로젝트를 시작해보라고 배웠던 것들로 하다보면은 잘 되다가 어느순간 막히는 부분이 있을거라고
그럼 그때가 새로운 공부를 시작할때라고...
그리고 지금 그 순간이 온거 같다.
Alert box를 디자인하고 싶은데 이걸 할려면 jQuery를 써야 한단다..
안그러면 방법이 없단다..
아직 javascript 하나만으로 좀 벅찬데 벌써 jQuery를 쓸려고 하니 좀 부담스럽다...
근데 어쩔수가 없다 alert box만 현재 느낌으로 디자인할 순 없잖아....
일단 뭔가 잘 설명되어 있는것 같은 사이트를 하나 찾았다.
www.geeksforgeeks.org/how-to-change-the-style-of-alert-box-using-css/
How to change the style of alert box using CSS ? - GeeksforGeeks
A Computer Science portal for geeks. It contains well written, well thought and well explained computer science and programming articles, quizzes and practice/competitive programming/company interview Questions.
www.geeksforgeeks.org
이걸 보면서 하나하나 바꿔나가봐야지
일단 이해를 위해 대충 정리해보자면
1. Double Button alert dialog box desing
더블 버튼을 만들어주는 박스 디자인으로, 하나는 [확인] 버튼이 될거고, 하나는 다른 내용이 들어가는 버튼인데 나는 확인버튼만 있으면 되서 이건 그냥 pass
2. Single-button dialog box
그냥 확인 버튼만 있는 박스. 일단 alert box에 class를 지정하고 그 class를 css에서 디자인 한다.
class는 container가 된다. 버튼은 css 버튼 tag를 사용한다.
그리고 그 내용까지 디자인을 해줄 수 있다. 배경 색 컬러는 하나만
근데 이 사이트에서는 코드를 써주기만 했고 왜 그런지 설명은 안해줬다
뭐... 알아서 보면서 이해해야지
<!DOCTYPE html>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script>
function geeks(msg, gfg) {
var confirmBox = $("#container");
/* Trace message to display */
confirmBox.find(".message").text(msg);
/* Calling function */
confirmBox.find(".yes").unbind().click(function()
{
confirmBox.hide();
});
confirmBox.find(".yes").click(gfg);
confirmBox.show();
}
</script>
<style>
/* Body alignment */
body {
text-align: center;
}
/* Color for h1 tag */
h1 {
color: green;
}
/* Designing dialog box */
#container {
display: none;
background-color: purple;
color: white;
position: absolute;
width: 350px;
border-radius: 5px;
left: 50%;
margin-left: -160px;
padding: 16px 8px 8px;
box-sizing: border-box;
}
/* Designing dialog box's okay buttun */
#container button {
background-color: yellow;
display: inline-block;
border-radius: 5px;
border: 2px solid gray;
padding: 5px;
text-align: center;
width: 60px;
}
/* Dialog box message decorating */
#container .message {
text-align: left;
padding: 10px 30px;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<b>Designing the alert box</b>
<br><br>
<div id="container">
<div class="message">
Thanks for Subscription<br>A Computer
Science Portal for Geeks</div>
<button class="yes">okay</button>
</div>
<input type="button" value="Subscribe" onclick="geeks();" />
</body>
</html>
코드는 이렇다. 이제 이걸.. 내 엑스형 프로젝트 컨셉과 맞아 떨어지도록 다시 디자인해야겠다
아니...
일단은 내가 원하는 대로 대충 디자인했는데 그 다음이 또 어렵다
위의 코드에서는 메세지 내용이 그냥 텍스트라서 <div> class로 그냥 묶는게 가능한데,
나의 메세지 내용의 경우... 계속 바뀌는 함수를 사용해야한단 말이다
계속 같은 자리에서 맴도는 기분인데 이거
저 코드는 찾아보니까 jQuery로 쓰여있어서......... 꺄학... 싯팔......
뭘 어떻게 고쳐야할지 또 감이 안온다.
그냥 다른거 쓸까...
'programming > 엑스형 프로젝트' 카테고리의 다른 글
| 고민해결 (0) | 2021.01.14 |
|---|---|
| 명대사 + 사진 그리드 만들기 (0) | 2020.12.17 |
| alert 메세지 창에 함수 실행하기 (0) | 2020.12.15 |
| 랜덤 명대사 추출 (0) | 2020.12.14 |
| 두 번째 수정 (0) | 2020.11.23 |
