웹관련/HTML-CSS23 [CSS] 선택자에 대해 알고 가자!! CSS를 작성하면서 제일 중요한게 CSS 선택자입니다. 가상 선택자도 있고 브라우저마다 지원하는게 달라서 매번 헷갈리는 경우도 있지요~ 그래서 한번 정리를 쭉 해보았습니다. 선택자 = ele 로 표기를 했습니다. *S5 = Safari5 / F3.6 = Mozilla FireFox 3.6.x / O11 = Opera 11 / IE = 인터넷익스플로러 패턴 설명 S5 C8 F3.6 O11 IE9 IE8 IE7 IE6 #id id로 지정된 요소 선택 O O O O O O O O .Class class로 지정된 요소 선택 O O O O O O O O * 모든 요소 선택 O O O O O O O O Element Element 요소를 선택 O O O O O O O O ele:link 방문하지 않은 ele 선택 .. 2019. 10. 23. [CSS] placeholder 글자 색상변경하기 input 창이나 textarea에 도움말을 적어놓기 위하여 placeholder 속성을 많이 사용합니다. 근데 이 placeholder 또한 CSS로 색상을 입힐수가 있습니다. 다만 크롬계열과 익스플로러 둘다 적용시키기 위해 각각의 브라우져에 맞게 CSS를 입력해줘야 합니다. HTML 부분 CSS 부분 input::placeholder {color:#ccc;} input::-webkit-input-placeholder {color:#ccc;} input:-ms-input-placeholder {color:#ccc;} textarea::placeholder {color:#ccc;} textarea::-webkit-input-placeholder {color:#ccc;} textarea:-ms-input-.. 2019. 3. 20. [CSS] inputBox Type=file 디자인하기 Input Box 디자인 하기나름 많이 사용합니다... 특히 이미지업로드 할때 미리보기 할때 많이 사용합니다. 이미지 업로드 file 의 경우 브라우져마다 보여지는 디자인이 다르고,이쁘지도 않다.. 그래서 디자인을 하는경우가 많습니다. 여기서 FileReader 를 사용하는데 IE10 이상에선 모두 지원하니 참고하시기 바랍니다. See the Pen Input type file by DeokHwan (@deokhwan) on CodePen. CSS의 세계는 깊게 들어갈수록 점점더 디자인이 이뻐지는것 같아요 ^^ 2019. 3. 4. [CSS] transition 으로 네모박스 그리기 요즘엔 브라우져를 그나마 최신 브라우져를 많이 사용하기 때문에 Transition 속성을 많이 사용하게 됩니다. 마우스 오버되었을때 박스 테두리를 선으로 그려주는 CSS입니다.정확히 뭐라고 말을 해야될지 모르겠네요... 아래 소스코드를 한번 보면 이해가 쉬울것입니다. See the Pen CSS Transition 으로 네모박스 그리기 by DeokHwan (@deokhwan) on CodePen. 많이 사용하는 방법중에 하나라서 기록을 해둡니다.^^ 2019. 1. 25. [CSS] img 태그 onerror 관련 보통 IMG 태그를 써서 사용하지만 가끔 img 태그가 로딩이 되지않아서 X엑박 이라고 하는걸 노출하는경우가 있습니다. 하지만 이미지를 읽어오는걸 실패했을때 X엑스박스를 노출하지 않고 미리 지정한 이미지를 보여주는것도 가능합니다. 여기서 this.onerror=null 을 넣은이유는 onError에서 지정한 이미지도 로딩이 되지 않는다면 다시 error 이벤트가 발생하게 되고, 무한 루프에 빠지게 되요. 이를 막기위해 최초 error 이벤트가 발생하여 한번만 처리를 하고 이후에 발생되는 error 이벤트에 대해선 처리를 하지 않기 위해 작성을 한부분이니 참고하세요. 2018. 12. 12. [HTML5] audio태그를 사용방법 우연히 홈페이지 작업을 하다가... mp3를 재생을 해줘야하는 일이 생겼습니다....저같은경우 잘 사용하지 않는 웹에서 오디오틀기 ㅎㅎㅎaudio 태그를 이용하여 간단하게 작업해줍니다. HTML 부분 JS부분 function aud_play_pause(){ var myAudio = document.getElementById("myAudio"); if (myAudio.paused){ myAudio.play(); $('.aud_PlayBtn').find('img').attr('src',$('.aud_PlayBtn').find('img').attr('src').replace("_on","_off")); } else { myAudio.pause(); $('.aud_PlayBtn').find('img').attr.. 2018. 10. 22. [CSS] 브라우져에 보이는 스크롤바 없애기 - 스크롤은 됨 브라우져상에 웹페이지가 길어지면 우측으로 스크롤바가 자동으로 생성이됩니다.타 브라우져는 테스트를 해보지 않아서... 확인이 필요하구요 대표적인 크롬과 익스플로어에선 CSS만으로 간단하게우측에 보이는 스크롤을 제거 할수 있습니다. 뭐든... 알면 쉬우나 모르면 한참 뒤적거리게 되니 참고하세요~ body{-ms-overflow-style:none; } body::-webkit-scrollbar { display:none; } 이렇게만 body에 CSS를 주게 되면 우측에 스크롤바가 사라집니다.물론 상하로 스크롤이 되면서 말입니다. 디자인상 스크롤을 없애게 되는경우 유용하게 사용하세요~ 2018. 10. 17. [HTML5] VIDIO 태그 사용방법 HTML5 에 있는 VIDEO 태그를 사용할때 주로 사용하는 방법입니다. 비디오 태그를 사용할경우, 반드시 영상을 아래와 같이 3가지파일로인코딩을 해놓고 작업을 해야합니다. webm, mp4, ogg 추가로 video 를 지원하지 않을경우를 대비하여 플래시로 flv 파일의 영상을 확보하면 크로스브라우징요소를 대비할수도 있습니다. 2017. 10. 31. [CSS] 아이폰에서만 숫자부분이 파란색으로 보일때.. 분명 CSS를 정상적으로 다 적용을 했는데... 아이폰만 적용한 글짜색이 적용이 안될때 간혹 있을겁니다. 예를 들어 검은색 배경에 글짜색을 흰색으로 바꿨는데... PC에서 볼때는 정상인데아이폰에서만 보면 글짜색이 내가 적용한 CSS가 아닌 기본색인 파란색으로 보일때가 있습니다특히 전화번호같은걸 적어놓으면 파란색으로 보이는 경우가 있죠.... 이것은 아이폰특징으로.... 전화번호를 자동으로 링크로 인식을 하여 링크 기본색상인파란색으로 인식을 하는부분입니다. 예를 들면 아래와 같습니다. 010-1111-1111 이렇게 주면 PC에서는 정상적으로 글씨가 하얀색으로 바뀝니다...하지만 아이폰에서 본다면 글짜색상이 파란색으로 보입니다.... 이건 아이폰에서 010-1111-1111 이걸 전화번호로 인식을 하여 자.. 2017. 8. 22. 이전 1 2 3 다음
