Skip to content

feat: modal창_본문 #59

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
yujin5047 wants to merge 7 commits into
base: develop
Choose a base branch
from
Open

feat: modal창_본문 #59

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
c026b8d
feat: modal창_본문
yujin5047 May 22, 2024
4696e8b
Merge branch 'develop' of https://github.com/untoc-camp/comboong-note…
yujin5047 Jun 2, 2024
86050d8
feat: modal창_수정
yujin5047 Jun 2, 2024
758d1a4
모달창
yujin5047 Jun 27, 2024
a8ed7d7
feat: modal창_본문
yujin5047 Jun 27, 2024
36d5dc4
feat: 모달창
yujin5047 Jun 28, 2024
11ee39b
feat: 모달창
yujin5047 Jun 28, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added assets/img/Initial_settings_img.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/img/bell_img.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/img/iconImg-1.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/img/setting_img.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/img/warning_img.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
49 changes: 49 additions & 0 deletions assets/modal/modal.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
@font-face {
font-family: 'SCDream';
font-weight: 400;
src: url('/assets/fonts/SCDream4.otf');
}
body {
font-family: SCDream;
width: 400px;
background-color: white;
}
h2 {
text-align: top;
vertical-align: top;
}
img {
width: 57px;
}
Copy link
Copy Markdown
Contributor

@jimini1026 jimini1026 May 25, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

h2, img 같은 태그는 공용적으로 사용되는 태그이므로 해당 부분에 클래스나 아이디를 붙여서 css 속성을 부여해주세요!

.commentbox {
height: 200px;
background-color: #F5F5F5;
vertical-align: middle;
}
li {
vertical-align: middle;
list-style-type: none;
}
li img{
width: 40px;
}
/* .error-text{
vertical-align: middle;
text-align: center;
display: inline-block;
} */
.error-imform {
width: 385px;
height: 40px;
vertical-align: middle;
text-align: center;
display: inline-block;
margin-top: 15px;
margin-left: auto;
margin-right: auto;
background-color: #105395;
padding-top: 20px;
color: white;
border-radius: 0px 30px;
}

15 changes: 14 additions & 1 deletion assets/modal/modal.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,22 @@
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Comboong Note</title>
<link rel="stylesheet" href="modal.css" />
</head>
<body>
모달
<h2><img src="../img/iconImg-1.png">&nbsp;&nbsp;&nbsp;Comboong Note</h2>
<div class="commentbox">
<ul>
<li><img src="../img/setting_img.png">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;초기 설정값을 확인해 주세요</li>
<li><img src="../img/bell_img.png">&nbsp;&nbsp;&nbsp;처음 설치 시 알람이 뜰 수 있음을 유의해 주세요</li> <!--css에서 옆으로 밀면 될것같은데..-->
Copy link
Copy Markdown
Contributor

@jimini1026 jimini1026 May 23, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

주석에 적은 것 처럼 &nbsp 여러개로 하는 것 보단 css로 처리하는게 더 유지 보수나 개발 면에서도 편리해서 조금 더 공부해보면서 시도해보면 좋을 거 같아요!

1학년인데 이정도면 엄청 잘하고 있는겁니닷

Copy link
Copy Markdown
Contributor

@jimini1026 jimini1026 May 23, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Flex, grid에 대해서 공부해보면 좋을거 같슴다

Copy link
Copy Markdown
Contributor

@jimini1026 jimini1026 May 25, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

&nbsp를 사용하는 대신 아래 링크 참고해서 css를 이용하면 좋을거 같애요

https://developer.mozilla.org/ko/docs/Web/CSS/white-space

<li><img src="../img/warning_img.png">&nbsp;&nbsp;&nbsp;본 프로그램으로 생기는 불이익은 책임지기 힘듭니다</li>
Copy link
Copy Markdown
Contributor

@jimini1026 jimini1026 May 23, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

img는 닫힌 태그가 없는 태그여서 <img ~ /> 이렇게 표시해주면 더 좋아요!

</ul>
</div>
<div class="error-imform">
<div class="">
Copy link
Copy Markdown
Contributor

@jimini1026 jimini1026 May 23, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

class 명이 없는 상태로 커밋이 되었어요..!

오류 제보: 2004imjimin@pusan.ac.kr
</div>
</div>
<script src="./modal.js"></script>
</body>
</html>