본문 바로가기

프론트엔드

(9)
[AnyChart] AnyChart Trial Version (체험판 문구) 지우는 방법(JQeury) AnyChart를 이용하여 차트를 구현했는데 하단에 있는 AnyChart Trial Version이라고 써져있는 체험판 문구를 지우고 싶었다. chart.getCredits().setEnabled(false);을 넣으라는 글을 깃허브에서 보긴 했으나 full version을 구매한 후 가능한 얘기인 것 같았다. 그래서 나는 아주 간단한 방법으로 체험판 문구를 삭제했다. F12를 눌러 체험판 문구가 있는 곳의 코드를 확인해보니, 클래스 명이 "anychart-credits"으로 되어있었다. 클래스명도 알았겠다, 나는 JQuery의 remove()를 활용하여 체험판 문구를 삭제했다. remove()는 선택한 요소를 제거하는 메소드다. // initiate drawing the chart chart.draw(..
[오류일지]14. CSS- 반응형을 고려하여 높이 지정 말고 overflow:auto;! 화면 크기를 줄였더니 다음과 같이 변했다. 내가 무슨 잘못을 해서 이렇게 된 걸까? 정답은 내가 div의 높이를 지정해버렸기 때문에 발생한 일이다! 이럴 때에는 반응형을 고려하여 높이를 고정하지 않고 overflow:auto;로 지정해야한다!
[오류일지]13. footer 와이어프레임 오류 나는 위와 같이 footer 와이어프레임을 그렸으나, 위는 틀린 와이어프레임이다. 그러면 어떻게 그려야 맞은 걸까? 이것이 올바른 예시이다.
[오류일지]12. z-index는 형제끼리의 싸움이다! 위는 내가 저지른 오류다. #lnb에 z-index:1000을 줘봤자 소용이 없다. 왜냐하면 z-index는 형제끼리 즉 같은 급에서의 싸움이기 때문이다. 이 상황에서는 header에 z-index를 줘야한다. 그래야 동급인 #subBack과 싸울 수 있다.
[오류일지]10. 반응형 홈페이지의 .cen의 너비 및 반응형 사이트에서의 슬릭 이용법 화면의 크기를 줄였더니 헤더와 메인비주얼 크기가 갑자기 난리났다. 원인이 뭘까? 정답은 내가 .cen의 너비를 max-width가 아닌 그냥 width로 줬기 때문이다! 반응형 홈페이지를 만들 때에는 .cen의 너비는 max-width여야한다!!!! 그런데도 비슷한 문제가 생긴다? body에게 overflow-x:hidden;을 주자. 이렇게 하면 PC버전에서는 문제가 생기지 않는다. 그러나.. 모바일 버전에서 또 비슷한 문제가 발생했다. 원인은 슬릭에서 사용한 arrow 때문에 발생한 문제다. 이걸 어떻게 해결해야 할까? 정답. JS에서 responsive를 다음과 같이 추가해주자! breakpoint: ~px이 될때, settings:{ 다음과 같이 세팅해라 } 그런데..!!! 화면을 줄였다가 다시 ..
[오류일지]9. CSS - 자식한테 float를 주면 부모에겐 overflow:auto;를 주자! 상황: .noticeDate에게 float:right;를 줬는데 왼쪽과 같이 나왔다. 어떻게 된 일일까? 1. .noticeTite과 .noticeDate의 부모 a의 display가 inline이다.!그러므로 a의 display를 block으로 바꿔야한다! 2. a에게 display:block을 줬는데 행간이 붙어서 나왔다. 어떻게 된 일일까? 정답: a에게 overflow:auto;를 안 줘서 그렇다! 부모인 a에게 overflow:auto;를 주면, 자식들이 float이고 부모의 높이가 정해져 있지 않아도, 부모가 알아서 잘 늘어난다.
[오류일지]8. #mainVisual에 overflow:hidden;을 넣자! 맨 오른쪽을 보면 분명히 width:100%여야 할 곳이 짤린 것을 볼 수 있다. 이렇게 된 이유는 내가 #mainVisual에 overflow:hidden;을 안 넣어서 이렇게 되었다! 이렇게 overflow: hidden;을 넣게 되면 이미지가 넘친 부분은 짤리므로, 아래와 같이 원하는 대로 돌아온다.
[오류일지]7. JQuery - Tab 기능 다음과 같이 SNS 버튼을 눌렀을 때 관련 내용을 나오게 하고 싶다. 그러면 어떻게 하는 게 좋을까? 1. html SNS [지호소프트의 역사:지호한글부터 지호 오피스 NEO까지] 1989년 지호한글의 첫 탄생부터 26년간의 변화를 살펴볼까요?(아니 싫은데) Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore porro exercitationem aspernatur tempora laborum sapiente error eius maxime eveniet molestias? Doloremque commodi doloribus ut ipsam reprehenderit ab eum! Commodi, illo. Lorem ipsum dolor s..
사이트에서 로고 이미지 훔치는(?) 법 로고 이미지를 저장하고 싶은데 오른쪽 버튼을 눌러도 이미지 저장이 안 뜰 때가 있다. 이때 사용하는 방법이 있다. 1. Ctrl+Shift+C를 눌러 DevTools를 연다. 2. 로고를 클릭한다. 3.로고를 클릭하면 DevTools에 해당하는 정보가 뜬다. Styles에 background의 url 주소에 마우스를 가져다 대고 Open in new tab을 누른다. 4. 오른쪽 버튼을 누르고 '다른이름저장'을 누른다.