간단한 페이지 틀 하나 만드는데도 초보인 나에게는 시간이 엄청 걸리는지라 오랜만에 이렇게 글을 쓰게 된다. 😥
이전글 - [Web Programming] - CSS 속성 정리편 + 추가 기타 속성과 키워드
이전글에서 포스팅했던 CSS 속성 외에도 웹 페이지를 만들다 보면 새로운 친구들을 만나게 되어 응용하면서 정리했었다.
로그인 & 회원가입 페이지에 이어서 게시글이 나타나는 '메인 페이지'를 만들면서 새로 만난 속성들을 정리하는 시간을 가져보고자 한다 !
우선 이번 메인페이지에서는 CSS와 조금 더 동적인 부분을 구현해보고자 JQuery를 사용해봤다.
그리고 요즘 반응형 웹이라는걸 많이 사용해서 ( 내 블로그 또한 그렇고 ! ) 깊게 공부한건 아니지만 구글을 통해 흉내만 내봤다...👶
좌측 초록색 부분은 내가 만들고자 하는 게시판에 지도가 필요하기에 구글 지도를 띄우고자 남겨놨다.
gif을 보면 알 수 있듯 폭이 줄어들면 지도는 서서히 사라지게 해놨고, 내용이 일정 높이를 넘어가면 뒤에 말 줄임 표시가 되도록 했다.
그리고 위의 메뉴바에서 아이콘에 마우스를 올리면 크기가 서서히 변하는 자그마한 애니메이션을 구현 해놨다.
( 아직 삐약이 단계라 소소하게 해봤다. 🐥 )
.
.
이제 코드를 보면서 같이 공부해보자 !
첫번째로 간단하지만 뼈대인 html부터 살펴보겠다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 | <!DOCTYPE html> <html> <head> <title>Main Page Form</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="mainPage_CSS.css"> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script type="text/javascript" src="mainPage_JS.js"></script> </head> <body> <div id="toolbar" role="banner"> <!-- float: right ( 윗줄 부터 가장 오른쪽으로 위치함 )--> <img src="setting.png" class="menu"> <img src="friend_list.png" class="menu"> <img src="home.png" class="menu"> <span id="userId"> user id </span> <img src="icon.jpg" id="userIcon"/> </div> <div id="map"> MAP </div> <div id="list"> <table> <tr> <td id="user"> <div> <img src="icon.jpg" id="member_icon"> <div> user id </div> </div> </td> <td colspan="2" id="text"> <div class="ellipsis"> 사용자가 작성한 내용이 표시될 부분입니다. <br> 테스트용 텍스트입니다. <br> 안녕하세요 :) <br> 1테스트용 텍스트입니다. <br> 2테스트용 텍스트입니다. 3테스트용 텍스트입니다. </div> </td> </tr> <tr> <td> yyyy-mm-dd </td> <td class="bottom"> 댓글 </td> <td class="bottom"> <img src="heart.png"> </td> <td class="bottom"> 좋아요 </td> </tr> </table> </div> </body> </html> | cs |
우선 5번째 줄에 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 부분은
내 노트북에서는 웹페이지가 정상적으로 실행 됐었는데 피씨방에 가서 켜보니 한글이 깨지는 현상이 있었다.
따라서 직접 설정을 해줘서 어떤 컴퓨터의 환경에서도 정상 실행 되게끔 했다.
나머지 헤드 부분은 css, js, jquery를 사용하기 위한 설정이고, 바디 부분도 특별히 어려운것이 없으므로 넘어가겠다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 | body{ margin: 0px; background: rgb(244, 240, 234); } #toolbar{ width: 100%; height: 40px; background-color: rgb(101, 190, 141); margin: none; } #userIcon { width: 35px; height: 35px; border-radius: 50px; border-color: rgb(244, 240, 234); padding-top: 3px; float: right; } #userId{ padding-right: 10px; border-right: 1px solid rgba(244, 240, 234, 0.5); } .menu { width: 24px; height: 24px; float: right; padding-top: 8px; margin-right: 7px; } #toolbar > span { color: rgb(244, 240, 234); display: inline-block; margin-top: 7px; margin-right: 7px; margin-left: 7px; float: right; } #map { position: relative; overflow: hidden; width: 40%; height: 520px; background-color: rgb(101, 190, 141); margin: 1%; float: left; } #list { background-color: #FFFFFF; margin-top: 1%; margin-right: 1%; width: 57%; height: 150px; float: left; overflow: hidden; } table{ text-align: center; padding-top: 20px; width: 100%; } #user { width: 100px; } #text{ text-align: left; margin-left: 2.5%; margin-right: 2.5%; width: 95%; height: auto; text-overflow: ellipsis; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; } #member_icon{ width: 60px; height: 60px; } .bottom{ float: right; } .bottom > img { width: 24px; height: 24px; margin-left: 3px; margin-right: 7px; } @media ( max-width: 600px ) { #list { width: 98%; margin: 1%; } } | cs |
그리고 세로줄도 검색 했었던 부분이라 설명하고 넘어가겠다.
구글에는 방법이 참으로 여러개 있었는데, ( 정답은 없으니까 :D ) 이미지로 주는 방법, hr태그에 높이 넓이 지정하는 방법등이
있었지만 나는 테두리의 오른쪽에만 선을 나타내는 방법을 사용했다.
( 24번째 줄 ) border-right 사용
( 아래: 73 - 77 번째 줄 )
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | $(document).ready( function() { $('.menu').hover( function() { $(this).stop().animate({ width: 28, height: 28, paddingTop: 5 }, 500); }, function(){ $(this).stop().animate({ width: 24, height: 24, paddingTop: 8 }, 500); }); }); // 창크기 변화 감지 $( window ).resize(function() { if( $(window).width() < 600 ) { $('#map').fadeOut(); } else { $('#map').fadeIn(); } }); | cs |
아래 창크기 변화 감지라고 주석을 달아 놓은 부분이 반응형 웹에 해당하는 부분이다.
가장 상단의 gif를 보면 알겠지만 맵 부분이 서서히 사라지고 서서히 나타나는 것을 볼 수 있다.
$( window ).resize(function(){}); 이 함수로 웹 페이지의 화면 크기가 바뀌는 것을 감지 할 수 있다.
위에는 ( 1 ~ 16번째 줄 ) 메뉴바에 해당하는 이미지 버튼들의 애니메이션 부분이다.
여기서 중요한 점! ⭐ $(this).stop().animate ⭐
만약 $(this).animate 로 사용하셨다면..! 애니메이션이 계속해서 반복 될 것이다..
( http://programmingsummaries.tistory.com/316 이 사이트에 있는 예제와 같은 문제점을 가지고 계셨을 것! )
stop()메소드는 말그대로 애니메이션을 완전히 정지시키는 친구다.
https://api.jquery.com/stop/ API를 보시면 실제로
stop( [ clearQueue ], [,jumpToEnd] ) 라고 적혀있다.
API 사이트에 자세히 설명 되어있으니 넘어 가겠다 :)
'웹 프로그래밍' 카테고리의 다른 글
| jQuery div태그 동적 로딩 위한 스크롤 마지막 체크하기 (3) | 2018.06.05 |
|---|---|
| JQuery를 공부하기 전 자바스크립트 DOM에 관해 알아보자 ! (3) | 2018.06.04 |
| No operations allowed after connection closed 오류 해결 (3) | 2018.05.23 |
| [ JSP ] redirect + forward + include 파헤치기 (2) | 2018.05.22 |
| Java Script 3편 + 자바스크립트 문서 객체 조작 (0) | 2018.05.16 |