첫 Mini Project 시작 - 팀 별로 팀 및 자기 소개 홈페이지 만들기
오늘은 첫 Mini Project를 시작했다. 팀 별로 팀 소개가 있는 페이지에서 특정한 이벤트 (링크 클릭, 사진 클릭 등)를 통해 자신의 소개 페이지로 이동할 수 있는 홈페이지를 만드는 프로젝트였다.
처음에는 어떤 기능을 넣으면 좋을지, 어떻게 구성하면 좋을지, 어떤 테마를 활용하면 좋을지 등 너무 많은 생각이 지나가다 보니 막막했다. 하지만, 팀원들과 게더보드 내의 화이트 보드에 차근차근 정리를 하다 보니, 나름대로 차차 정리가 되는 것 같았다. 좋았던 점은 너무 욕심부리지 않고 최소한의 기능만을 생각한 후, 모든 기능을 구현한 후에 추가 기능을 차차 넣어가자는 의견이 우리 팀의 공통된 의견이었다는 것이었다.
우선은 테마를 생각해보았다. 팀원들 모두 깔끔한 이미지를 원했다. 요즘은 화려하고, 사진이 많은 홈페이지들이 각광받고 있기는 하다마는 우리 팀원들은 자기 소개 홈페이지인 만큼 많은 양의 정보를 담아야하므로 테마는 가급적 깔끔했으면 좋겠다는 의견이 좀 더 우세였다. 그래서 처음 의견으로 나왔던 것은 '구글' 이었다. 물론, '구글'이 흰 바탕이고 깔끔한 이미지이기는 하지만 사실 나는 너무 초라해보이지는 않을까 라는 생각도 들었다. 그래서 차라리 검은색 바탕이 강렬한 이미지를 남길 수 있지 않을까 라는 생각이 들었고 그때 떠오른 테마가 '넷플릭스' 였다. 그리고 같이 떠오른 생각이 '넷플릭스'의 프로필 선택창 화면이었다.
바로 이 화면인데, 이 화면이 딱 팀 소개 메인 화면이 되면 좋겠다는 생각이 들었다. 각자의 사진을 프로필 사진에 넣고, 프로필 사진을 누르면 각자의 홈페이지로 이동할 수 있는 방식의 페이지를 구성하면 좋겠다고 생각했다. 그렇게 의견을 내게 되었고 팀원들 모두 동의를 해주었다! (기뻤당 ^____^//)
이후, 개인 화면은 대강 틀만 짰는데 틀은 다음과 같았다.
이렇게 틀을 짜놓고 우선 각자 코딩에 돌입하기로 했다. 우선, 나는 내가 기획한 메인 페이지가 되었다는 것이 기뻐 메인 페이지 코드 작성을 하기 시작했다 (ㅠ.ㅠ 그래서 개인 페이지를 얼마 못 짜긴 했다.... 그래도 할 수 있을 것이다!!) 넷플릭스에 접속하여 프로필 선택 화면에서 우클릭 후 검사를 한 후, 모든 코드를 삭삭 긁어와 다 읽으려니 눈알이 빠질 뻔 했다! 무슨 코드가 그리 길던지... 이해하지는 못하지만 대충 읽어보니 쿠키같은 것도 검사하는 코드도 있고 그런 것 같았다. 왜냐하면 주석처리해도 내 눈에 보이는 것에는 아무 문제도 없었으니까..!
아무튼 그렇게 필요 없어(?) 보이는 코드를 지우고 지우고 넷플릭스 로고를 지우고, 파비콘을 우리 조 아이콘으로 변경하고 폰트를 변경하고, 아이콘 이미지 url을 비워두고 등등 하다보니 너무 길어 렉이 걸리던 코드가 75줄 가량으로 줄어버렸다. 프로필 변경, 추가 버튼도 없애다 보니 더 줄은 것도 있는 것 같다.
나름 만족스러운 것 같다. EXAMPLE 이라고 써있는 사진 안에 프로필 사진만 잘 넣으면 정말 맘에 들 것 같다!
다음은 개인 페이지 화면이다. 사실은 개인 페이지 화면이 더 고민이 많이 되었다. 넷플릭스 테마로 하였으니 개인 페이지도 넷플릭스 테마로 이어나갈까 했지만 넷플릭스에서 또 긁어오자니 넷플릭스는 시청할 콘텐츠를 고르는 화면은 너무 복잡한 코드로 짜여 있었다. 정말 한 줄도 이해할 수 없었던 것 같다... 그래서 긁어오는 것은 포기하고 진짜 말 그대로 테마만 따오기로 했다. 배경을 까맣게 설정하고, 위에 아이콘들만을 넷플릭스에서 따왔다. 그 결과는 다음과 같다.
개인 페이지도 나름 만족(?)스러운 것 같다...!
2022.04.20 오늘의 리틀 TIL
1. 하이퍼링크 넣기
<a href="https://naeilbaeumdan-songheew.tistory.com/" target="_blank">바로가기</a><a>~</a> 태그를 이용하면 하이퍼링크를 걸 수 있다. 다음과 같이 코드를 짜면 '바로가기'를 누르면 해당 url로 가되, target="_blank"이므로 새 탭에서 열리는 것이다. target="_blank"명령어를 삭제하면 현재 탭에서 해당 url이 열리게 된다.
2. 파비콘 넣기
파비콘이란 탭에 보면 옆에 작게 아이콘이 있는 것을 확인할 수 있는데 이를 파비콘이라 한다.
<link rel="icon" href="https://blog.kakaocdn.net/dn/brBCoz/btrzYir31Vp/SyK2YsGeApVae2t9vsZ7A0/img.png">본래는 .ico 파일을 사용해야한다고 하지만 .png 파일을 걸어도 잘 뜨는 걸 보니 괜찮은 것 같다..?
3. HTML에 공백 넣기
HTML에는 공백을 한 칸씩 밖에 넣을 수 없다. 공백을 2칸 넣고 싶을 때는
 공백을 4칸 넣고 싶을 때는
 줄바꿈을 하고 싶을 때는
를 사용한다.
4. 홈페이지에 total 기능 추가하기
<SCRIPT LANGUAGE=JAVASCRIPT TYPE="TEXT/JAVASCRIPT">
expireDate = new Date
expireDate.setMonth(expireDate.getMonth()+6)
hitCt = eval(cookieVal("pageHit"))
hitCt++
document.cookie = "pageHit="+hitCt+";expires=" + expireDate.toGMTString()
function cookieVal(cookieName) {
thisCookie = document.cookie.split("; ")
for (i=0; i<thisCookie.length; i++) {
if (cookieName == thisCookie[i].split("=")[0]) {
return thisCookie[i].split("=")[1]
}
}
return 0
}
</SCRIPT>해당 부분을 <head>~</head>사이에 추가해준다면 이제부터 hitCt라는 변수는 해당 홈페이지에 몇 번째로 방문한 사람인지를 나타내는 숫자가 된다.
<SCRIPT LANGUAGE=JAVASCRIPT TYPE="TEXT/JAVASCRIPT">
document.write("Total <font color=red>"+hitCt+" </font>")
</SCRIPT>나는 이렇게 사용했고, 그 결과는 다음과 같다.
