웹개발3 파밍RPG 보스 레이드 시간표 페이지 관련 요새 즐기고 있는 게임인데 자꾸 레이드 타임을 놓치는데서 빡쳐서 메모장으로 시간기록을 하다가 이럴바엔 아예 알리미를 만드는게 낫지 않나... 하면서 페이지를 하나 만들어 보았다. 넣은 기능은 아래와 같다. 1. 메모장 기능 가장 핵심적인 기능. 저절로 체크하는 봇을 만들 순 없었기 때문에 사람이 기입하는 형태로 하였으나 최대한 기입하기 쉽도록 입력칸, 그리고 잡힌 시간을 기록하면 저절로 다음 타임으로 업데이트 하도록 지정 코드가 좀 지저분한데 업데이트 버튼 클릭시 버튼쪽에 달아둔 데이터 활용해서 다음 보스레이드 시간을 계산하도록 지정 중간에 스위치 등이 하드코딩이 되어있는 이유는 딱 여기까지만 구현할거라서... 귀찮아서 저렇게 해놨다. 2.화면 자동 refresh, 알리미 기능 먼저 화면 자동 refre.. 2021. 2. 8. [CSS] 말줄임 기능, text-overflow: ellipsis 이전 처음 입사했을 때 "홈페이지에 게시물제목이 길어서 화면이 깨진다, 제목이 너무 길면 말줄임표시가 뜨도록 바꿔라"라고 하신 적이 있었다. 아무것도 모르던 나는 이를 스크립트로 해결했다... 예를들어 제목 길이가 20글자 이상일 때 substring으로 잘라서 그 뒤에 "..."을 붙이는 식으로. 그런데.. CSS를 보다보니 -_- 뻘짓이었다. 말줄임표시는 CSS에서 간단하게 5줄만 써주면 구현할 수 있다. .text-ellipsis-example { width : 200px; /*원하는 길이*/ display : block; overflow : hidden; text-overflow : ellipsis; white-space : nowrap; } 코드테스트 p.s. 2~3줄짜리 말줄임표시도 CSS만으.. 2019. 10. 3. [CSS] 이미지 hover시 자연스럽게 변하도록 하는 기능 코드테스트 (만약 그림파일이 바뀌는걸 원할시 위 예제에서 img와 img-hover CSS의 background를 background-img:url("이미지주소") 로 바꾸어 쓰시면 됩니다) 작동 원리는 image-block으로 그림 크기를 잡아주고 그 안에 있는 img, img-hover를 position:absolute로 설정하여 겹쳐서 놓는다 (이 때 img-hover는 투명도(opacity)가 0이므로 안보임). 그 뒤에 hover시에 img-hover의 opacity를 1로 설정하면 끝. 예를 들어 빨간색 이미지(img) 위에 마우스를 댈 시 파란색 이미지(img-hover)가 뜨길 원할 경우 아래 그림처럼 동작한다. [ 마우스 갖다대기 전 ] [ 마우스 갖다댄 후 ] 2019. 10. 3. 이전 1 다음
