Eveningstar

웹사이트 속도가 궁금할때 테스트 할수있는 사이트 몇 곳로딩이 너무 느리면 한번씩 체킹해보쟈. 체크해볼 부분 1. 로딩 이미지 크기2. css,js 압축여부 등등 1. Google PageSpeed Insights - 웹주소를 입력하고 분석을 누르면 모바일/피씨버전으로 분석결과를 알려준다. -> 해결방법 보기를 클릭하면 해당 내역에 대해 구글이 최적화 조언을 해준다. 이미지 압축의 경우 jpg와 png 압축은 아래 팬더 사이트에서 압축해보자.(jpg는 그라데이션부분이 압축하면 손상되는 경우가 있다. 확인 후 압축이미지를 실제로 사용할 것) go to tinypng 2. pingdom - 테스트 지역에 한국이 없지만 다른나라 체크해서 ㄱㄱ,, 퍼포먼스별 점수로 페이지 속도를 체크해줌(등급주는게 성적표받는것 ..

* 웹 크롬에서 이미지 작업을 했을때 이미지가 흐릿하게 보이면서 글자가 선명하게 보이지 않는 현상이 발생했다.(도덕책...왜..) 왼쪽 ie11 / 오른쪽 크롬(버전 62이상) A주임님이 전달해준 css3 image-rendering 값으로 해결함. 이 프로퍼티는 이미지 scale과 관련하여 이미지 렌더링 방식에 대해 컨트롤할수있게 해줍니다. 1. MDS에서의 image-rendering에 대하여 image-rendering CSS 프로퍼티는 브라우저의 이미지 스케일링 방식에 대한 힌트를 제공합니다. 이 프로퍼티는 엘리먼트 자신에게 적용시킵니다. 스케일링(크기변경)이 안 된 이미지에게는 적용되지 않습니다.예를들어, 100x100 픽셀의 이미지가 있는데 페이지에서 요구하는 이미지는 200x200픽셀 (혹은..

word-break&word-wrap [word-break] - word-break는 문자열의 줄바꿈을 설정해줍니다.- 줄바꿈은 공백(띄어쓰기) 혹은 하이픈(hyphen) 사용시 줄바꿈이 시행되지만 CJK(중국,일본,한국) 언어에서는 '음절'에 따라 줄바꿈이 시행됩니다. 속성 값 1. normal(기본값) 2. break-all : 무조건 줄바꿈(단어가 깨짐) / non-CJK일때는 임의대로 줄바꿈 가능, CJK에서는 normal과 원리동일. 3. keep-all : 단어를 유지하면서 바꿔줌. ** But 특수문자와 언어에따라 사용여부를 결정해야한다. 아래 테스트를 살펴보자 (1) 특수문자 없이 그대로 CJK와 non-CJK(영문)을 비교해보았다. https://jsfiddle.net/jywoo/h92r..

세로형 아코디언 검색해보니 html과 css 만으로 세로형 아코디언 구현이 가능하다.그런데 input check를 사용해서 만드는 것이여서, 태그의 쓰임새에 맞는걸까 고민하다 그냥 jquery가 사용된 세로형을 찾아보기로 했다. http://www.designchemical.com/blog/index.php/jquery/jquery-simple-horizontal-accordion/->고정형 너비에서만 사용가능한 것으로 판단됨. 아 이거 모바일에서도 필요한대ㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜ폭망 css와 html만 사용해서 만든 세로형 아코디언 http://freefrontend.com/css-accordions/