CSS) list-style 다양한 종류 (list-style-type) list-style-type 표준으로 제공되는 스타일을 우선적으로 알아 볼 예정입니다. none HTML 삽입 미리보기할 수 없는 소스 list-style-type: none none는 아무 기호가 없습니다. disc HTML 삽입 미리보기할 수 없는 소스 list-style-type: disc disc는 기본값으로 많은 목록에 쓰입니다. circle HTML 삽입 미리보기할 수 없는 소스 list-style-type: circle; circle은 가운데가 비어있는 원 모양 입니다. square HTML 삽입 미리보기할 수 없는 소스 list-style-type: square; square은 정사각형 모양입니다. decimal HTML 삽입 미리보기할 수 없는 소스 list-style-type: deci..
썸네일 이미지
CSS content 깨지는 현상(주의점) CSS content는 좋은 기능이다. :after 이나 :before 등에서 사용가능하며 HTML또는 JS없이도 글을 작성가능한 기능이다. 다만 이걸로 글을 쓰기에는 SEO에는 부적절하다. 그런데, 이 content는 영어+숫자가 아닌 일반기호, 한글등은 가끔 깨진다. ">" 같이 일반적으로 사용하는 기호도 새로고침 여러번 하다보면 가끔씩 깨진다. 이런 버그가 있어서 CSS를 작성시 유니코드문자로 작성할 수 있으며, 이렇게 작성해야 안깨진다. 그냥써도 거의 대부분(99% 이상)에서 안깨지지만 아주 가끔(1% 미만) 깨질수있다. 문자로 작성한 글은 div#main>div.input:after{ content: '또는 클릭해서 파일을 선택하실 수 있습니다.'; } 아래와 같이 유니코드로 변환해주는게 좋다...
HTML) Link, Script 태그 integrity 옵션 integrity 라는 옵션도 있다. 태그나 특정 버전의 파일이 변경되거나 변조된 경우 막을 수 있다. 이를 이용해 악의적인 스크립트 변조를 막을수도 있다. 지원하는 해시는 sha256 sha384 sha512이며 이 옵션은 IE는 적용되지 않습니다. 요즘 많은 웹사이트에서 CDN을 사용하나, 만약 CDN보안이 뚫리거나 CDN내용을 변조한다면(게시자의 코드수정 포함), CDN을 사용하는 모든 웹사이트에 아래 예시와 같은 공격을 할 수 있을겁니다. (예) CDN의 JS내용을 변조하여 접속한 사이트의 정보를 탈취(XSS방지가 대부분되어있으므로 최신 브라우저에서는 안됨) 또는 악성 스크립트 실행(크립토재킹, 악성사이트로 리다이렉트, 피싱사이트로 리다이렉트 등) CDN이 뚫릴일은 희박하지만 보안은 가능성이 0%..
Pure CSS Side Toggle Menu CSS만으로도 Side 메뉴(클릭 및 닫기 가능한)를 만들 수 있을것 같아서 만들어봤는데 성공했다. IE9+ 로 IE9 이상의 모든 브라우저는 지원가능하다. 원리부터 말해보자면 label과 checkbox를 활용하였다. CSS로 아래와 같이 표현가능하다. input[id="ch"]:checked + label{ /* CSS if checked */ } input[id="ch"] + label{ /* CSS if not checked */ } label 안에 기본적으로 보여줄 메뉴 버튼과 sidemenu를 넣었다. menu menu1 menu2 menu3 menu4 #menu_toggle_c 는 display:none;를 하면 된다. 테스트시 어떻게 작동하나 보여주기 위해 적용은 안해놨다. 최종으로 닫기 ..
IE ')'가 필요합니다. 해결하기 IE에서만 종종 ')'가 필요합니다. 오류가 뜬다. 웹 페이지를 건드리다 보면 IE만 안되는 경우를 많이 볼수있는데 이런것 때문에 개발자들이 IE를 싫어한다. 표준을 안지키는 웹브라우저! 위의 코드에서 왜 오류가 떳는지 감이 왔을것이다. parameter의 기본 값 설정시 IE는 ')'가 필요합니다. 오류와 함께 해석을 중단해버린다. 아래와 같은 방법으로 해결가능하다. function function_hi098123(args) {// IE 정상 실행 args = args || '기본 값 형태는 알아서.. true, false, 0, 1, string'; console.log(args);//console에 찍어보자 } function_hi098123(); function_hi098123('hi098123'..
썸네일 이미지
JS) 자바스크립트에서 스타일 바꾸기 자바스크립트에서 스타일을 바꾸는 행위는 속도에 영향을 줄 수 있으므로 권장하지 않습니다. CSS로 가능한경우 무조건 CSS를 이용해주세요 특히 계속 변화시키는 경우 예시 : resize 이벤트에서 특정 width , height를 계속 수정 (만약, CSS설정으로 동일하게 가능한데, JS로 처리시 느립니다. 과정이 더 복잡하기 때문인데요. 이로인해 사이트 렉을 유발할 수 있습니다.) DOM의 객체를 선택하는 방법은 여러 가지입니다. document.getElementById(아이디) document.getElementsByClassName(클래스) document.getElementsByTagName(태그 이름 : 'h1', 'div' 등) document.getElementsByName(이름 : nam..
썸네일 이미지
JS) 자바스크립트에서 " ' ` 따옴표, 억음 부호의 차이 자바스크립트 작성 시 String 값을 표현할 때 따옴표를 쓴다. 1. " (큰 따옴표)로 표현 var str="hi098123"; 2. ' (작은 따옴표)로 표현 var str='hi098123'; 3. ` (억음 부호 : backtick)로 표현 : 보통 잘 안 쓰인다. 키보드 숫자 1 옆에 있다. var str=`hi098123`; 이 세개에 차이가 있을까? " ' 는 사실 차이가 없다. C언어 기반(C, C++, C#)과 자바 등에서는 " (큰 따옴표)만 사용하나 JavaScript에서는 차이 없이 쓸 수 있다. \n으로 표현 시 세 개 문자 모두 줄 바꿈을 표현한다. 다만 ` (억음 부호 : backtick)는 차이가 있다. ES6이후부터 사용 가능하여 IE에서는 사용이 불가하다. (그래서 아직..
썸네일 이미지
CSS) 투명도 조절하고 싶을때 (rgba, opacity) CSS에서 투명도를 조절하고 싶을때가 있을 수 있다. 방법은 두가지가 있는데 글이 짧으니 끝까지 읽는것을 권장드립니다. 먼저 rgba() .className{ background-color:rgba(0, 0, 0, 0.8);/*까만색(0,0,0) 80% 불투명도*/ } .className2{ background-color:rgba(0, 0, 0, 0.2);/*까만색(0,0,0) 20% 불투명도*/ } R 레드 [0~255] G 그린 [0~255] B 블루 [0~255] A(alpha) [0~1] A값을 조절하여 투명도를 조절할 수 있습니다. HEX 방식인 #RRGGBBAA, #RGBA 도 있으나, IE나 구형 브라우저 지원을 안하니 구형 모바일 기기를 포함하여 사이트를 제공하려면 rgba로 쓰는편이 좋습..