- 분류 전체보기 (344)
Just Do IT!
스파르타코딩클럽 내일배움캠프 3일차 본문
프로젝트 하는 중..
금요일까지 프로젝트를 완성해야 하는데,
이게 바로 타임어택이라는 걸까?
막상 시작할 때는 힘내보자! 하고 같이 힘내면서 시작했는데, 구현할 것들 정리하고 직접 구현하니까
수정할 부분 투성이이다...ㅋㅋㅋㅋ
그래도 매일 조금씩 진전되는 것 같으니 그걸 위안을 삼자.
오늘도 어제처럼
프로젝트 하면서 공부했던 것 위주로 TIL 작성해본다.
모달창
모달창이란,
버튼이나 이미지를 눌렀을 때 새로운 창이 아닌 팝업 형식으로 나오는 창이다.
오늘 조원분들과 회의 중,
메인 페이지에서 사진을 누르면 우리 팀에 대한 정보가 나오는 형태로 바꾸자는 이야기를 했고
그 의견이 받아들여져서 오후 시간 내내 메인 페이지 만드는 걸로 시간을 전부 보냈다.
처음에는 사진을 누르면 사진이 배경이 되고 글이 나오는 형태로 하려고 했는데,
그 때는 구글링 해도 그런 형식으로 나오지 않고 생소한 '모달창'이라는 게 연관 검색어에 떠서 찾아보니
내가 원했던 그림과는 조금 다르지만 팝업 형식으로 나오는 게 깔끔할 것 같아서 모달창을 선택했다.
완성된 모습은 이렇게!
모달창을 만들기 위한 HTML 코드 ↓
<div class="modal">
<div class="modal_content">
<h4>우리 팀만의 특징과 추구하는 궁극적인 목표</h4>
<ul style="list-style: none;">
<li>✔ 협업을 학습한다.</li>
<li>✔ 커피를 같이 마시고 싶은 개발자가 된다.</li>
<li>✔ 취뽀하기!</li>
</ul>
<h4>우리 팀의 약속</h4>
<ul style="list-style: none;">
<li>✔ 스크럼 생존신고 철저히 하기!</li>
[생존신고: 9:00 , 14:00 , 19:00]
<li>✔ 출결 관련은 하루 전에 공지</li>
</ul>
</div>
</div>모달창을 만들기 위한 CSS 코드 ↓
<style>
.modal {
position: absolute;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
top:0;
left: 0;
display: none;
}
.modal_content {
width: 600px;
height: 400px;
background: #fff;
border-radius: 10px;
position: relative;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -200px;
text-align: center;
box-sizing: border-box;
padding: 74px 0;
line-height: 23px;
cursor: pointer;
font-family: 'GangwonEdu_OTFBoldA';
}
</style>모달창을 만들기 위한 JS 코드 ↓
$(function () {
$("img").click(function () {
$(".modal").fadeIn();
});
$(".modal_content").click(function () {
$(".modal").fadeOut();
});
});
이렇게 모달창에 필요한 뼈대를 작성하고 (HTML), 꾸미고 (CSS), 작동하도록 만들면(JS)
위에 올린 메인 페이지처럼 잘 작동한다!
처음에는 modal_content 의 CSS를 작성하지 않아서 제대로 출력되지 않고 까만 화면만 나오고 글씨가 보이지 않았는데
나중에야 그 사실을 알고 CSS를 작성하고 나니 제대로 작동된다.
팝업 창이라는 걸 알고 있지 실제로 구현해본 적은 없었는데,
이렇게 구현하고 나니 쉽다(?)고 느껴지기도 하고 뿌듯하기도 하다.
프로젝트를 하면서 실습하면서 공부한다는 게 이런 건가 싶다.
이외 조원분이 알려주신 다른 방법들도 적어둔다.
Javascript | hide /show
웹에서 특정 요소를 보이거나 숨기는 기능이 필요할 때 사용할 수 있다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hide, show</title>
<script type="text/javascript">
function getShow(){
alert("display : 보여주기");
document.getElementById("Img_Area").style.display = "";
}
function getHide(){
alert("display : none");
document.getElementById("content").style.display = "none";
}
</script>
</head>
<body>
<div id ="content">
<img id="imgId" src="..">
</div>
<input type ="button" onclick="getShow()" value="show">
<input type ="button" onclick="getHide()" value="hide">
</body>
</html>예를 들어서 작성해보았는데,
메인 페이지에 적용해보질 않아서 아직은 딱 감이 잡히지는 않는다.
div를 숨기는 기능이 필요할 때 사용한다고 하니까
메인 페이지에 적용해보면,
단체 사진 div를 숨기기 위해 적용하면 될 것 같다. 사진을 숨기고, 글을 표현하기 이정도...?
예제만 적고 실제로 적용해봐야 하지만, 프로젝트가 급하기 때문에 그냥 알려주신 걸 구글링해서 알게 되는 정도로만 기록한다.
나중에 혹여 쓸 일이 있을 때,
구글링하지 않고 내 글을 보고 알길 바라며....(이래도 구글링할 나를 잘 알지만ㅎ)
웹개발종합반 복습
백엔드 부분이 영 모르겠어서 실습한 코드들과 영상을 복습 중이다.
이제 html 부분은 얼추 완성되었으니 db 연결하고 실제로 방명록이 잘 돌아가는지 알아야 하는데
뭔가 알듯 말듯 미묘하다.
그래서 오전에 복습하고 메인 페이지 만들고 구글링하면서 알아보는 중이다.
이제 남은게 백엔드 파트인데,
우리 조 페이지가 잘 돌아갔으면 좋겠다.
벌써 오늘이 수요일이고 내일이 목요일이니까,
내일은 성공해야 할텐데...
웹개발종합반 듣고 비슷하게 실습하면 될 거라고 생각했는데,
어제 글에도 적었듯이 실제로 하는 건 역시나 좀 다르다.
기획부터 구현까지 온전히 우리 힘으로 해내야 하는데 이래서 구현하는 데 시간이 오래 걸리나 싶다.
그러고 보면 시중에 나와있는 어플들이나 웹페이지는 이보다 구조가 훨씬 복잡한데 어떤 식으로 만들었나 더 궁금해지기도 하고 대단하게 보이기도 하고.
직접 겪고 알게 되니까 더 그렇게 생각되는것 같다.
여튼!
저녁에 비어파티도 하고 (물론 난 경품도 못타고 그냥 어어?만 백만번 하다 끝났다 ㅋㅋㅋ)
조금 더 공부하고 나니 어느덧 하루가 끝나간다.
매일매일 무언가 배우고 실습해본다고 생각하니 마치 계단을 걸어 올라가는 것만 같다.
아무래도 계단이 약간 롯데월드 타워정도 되는 높이인것 같지만ㅋㅋㅋ 그래도 올라가고 있으니까.
내일도 열심히 팀프로젝트 참여해야지.
오늘도 우리 조 모두 수고많으셨습니다~!!
'스파르타코딩클럽 내일배움캠프 > TIL' 카테고리의 다른 글
| 스파르타코딩클럽 내일배움캠프 6일차 (1) | 2022.11.07 |
|---|---|
| 스파르타코딩클럽 내일배움캠프 5일차 (0) | 2022.11.04 |
| 스파르타코딩클럽 내일배움캠프 4일차 (0) | 2022.11.03 |
| 스파르타코딩클럽 내일배움캠프 2일차 (1) | 2022.11.01 |
| 스파르타코딩클럽 내일배움캠프 1일차 (1) | 2022.10.31 |
