빅범 감성 공간

CSS display none과 block 속성 이해하기 css 속성 중 많이 쓰는 display none, display block 에 대해 알아보자. 이 css 속성은 javascript, jquery 로 toggle 형식을 만들때 많이 쓰고 있으며, display에는 4가지 속성이 존재한다. 1. display - block 2. display - inline 3. display - none 4. display - inline-block 위 속성에 대한 기능에 대해서 정리하자면, 1. block - 적용된 태그는 블록 요소를 가지며, 가로값이 100%로 줄바꿈이 일어납니다. span태그같이 inline태그에 사용해도 같은 기능을 가집니다. 2. inline -적용된 태그는 인라인요소를 가지며, 줄바..

아마 퍼블리싱을 하는 분이라면 웹사이트/모바일 제작할때 제이쿼리나 CSS 보려고 F12를 통한 개발자 도구함을 통해 소스 보기 해보신적이 있을 것이다. 저는 에이젼시 이전 멀티샵 쇼핑몰에서 근무할때 아주 일상이었다. 그때는 이렇다할 스킬과 웹표준에 대한 개념이 잡히기 전이라, 기획 쪽에서 경쟁사 사이트에서 괜찮은 제이쿼리나 효과들이 있다면 바로 적용하길 바랬기 때문ㅎㅎ 덕분에 능력치에 버거운 경우도 많았지만 그런 연습기간이 있었기에 약간의 요령도 생겼던 것 같습니다.ㅎㅎ 이번에 단순한 태그 및 자바스크립트는 이런 소스보기를 방지하기 위한 태그입니다. 물론 100% 막지는 못하지만 어느 정도의 간섭을 줄 수 있는 효과가 있다.~ 하단 자바스크립트 소스를 간단하게 연동하여 사용 가능 var ns = (doc..

프로그램 소스 html, css, script 등을 변경해서 서버에 반영을 했는데 특정 사람들에 한하여 반영된 소스가 안 보일 경우가 있습니다. 보통 같은 파일명의 파일에 내부 소스를 변경하거나 추가했을 시 적용되지 않을 것처럼 헝클어지거나, 어긋나 보이는 현상이기도 하지요. 가서 확인을 해보면 임시 인터넷 폴더에 해당 파일(캐싱)이 존재해서 인데요. 개발자 입장에서 쉽게 해결하는 방법 1. Ctrl + F5를 입력하라고 한다. - 입력할 경우 캐싱된 파일들을 날리고 새로 받습니다. 2. 인터넷 설정에서 임시인터넷 파일 설정을 웹 페이지를 열 때마다로 변경한다. 이 두 가지는 정말 개발자 입장에서 처리한 것 이라서 사용자가 난 그리 못하겠다고 하면 답이 없습니다. 최초 유효방문자도 사이트가 하자가 있게 ..

설정값 태그 적용한 예시 Your browser does not support the video tag. 빨간색 표시해놓은 부분이 비디오태그에 설정값 및 컨트롤바에 대한 제어를 해준다. 태그를 빼고 넣음으로써 테스트해보면 쉽게 이해가 되니 테스트를 해보자. controlslist="nodownload" 다운로드 버튼 제거 autoplay 이 속성을 지정하면, 비디오가 로드되자마자 자동으로 재생을 시작 함. 지원브라우저: IE 9+, Chrome, FF, Safari, Opera 사용법: html5에서 xhtml에서 controls 이 속성을 지정하면, 오디에 재생에 관한 조절 장치를 보여 줌 (playback/pause/resume/volume 등) 지원브라우저: IE 9+, Chrome, FF, Saf..

비디오 기본 태그 해당 브라우저에는 지원되지 않습니다. * video 내부에 넣은 문구는 영상이 뜨지 않을시 출력되기 때문에 위 태그와 같이 그대로 사용해도 무관하다. 또한 빨간표시된 부분은 본인 영상에 맞도록 수정하여 적용하자. Video 선택적 속성 Attribute Value Description autoplay autoplay 비디오가 준비되는 즉시 재생되도록 지정 controls controls 비디오 컨트롤을 표시하도록 지정한다(예: 재생/일시 중지 버튼 등) height pixels 비디오 플레이어의 높이 설정 loop loop 비디오가 완료될 때마다 다시 시작하도록 지정 muted muted 비디오의 오디오 출력을 음소거하도록 지정 poster URL 비디오를 다운로드하는 동안 또는 사용자..

text 관련 css 스타일 (줄바꿈 및 글자 자르기, 점선표기 등) white-space:normal; normal이 기본값, 여러칸의 공백이나 줄바꿈을 공백 1칸으로 인식한다. 지정된 넓이의 끝에서 자동으로줄바꿈한다. - 코드에서의 원래 텍스트 여수 밤바다 이 조명에 담긴 아름다운 얘기가 있어 네게 들려주고파 white-space:pre; 띄어쓰기는 실제 입력한 칸 수대로, 줄바꿈도 엔터를 친 대로 나온다. 넘어가는 부분에서 강제 줄바꿈은 되지 않는다. white-space:nowrap; 여러칸의 공백이나 줄바꿈을 공백 1칸으로 인식한다. 넓이를 지정하였어도 자동으로 줄바꿈 되지 않게 강제로 개행을 막아준다. word-break 텍스트가 들어가는 블럭요소의 넓이에 맞춰 줄바꿈 하는 CSS (강제 줄바..

특수문자 잘못써서 깨지는 경우가 있으니 혹시 깨진다면 특수문자를 있는 그대로 입력해서 그럴지도 모릅니다. 출처: 네이버 웹표준스터디 카페 HTML / XHTML 상의 특수기호가 그대로 표시되도록 기술하거나 키보드로 직접 입력할 수 없는 문자를 기술하기 위한 방법을 문자 참조 (character referendes) 라고 합니다. 문자 참조에는 1)문자 실제 참조 (character entity references) 2) 수치 문자 참조 (numerical character references)의 두가지 방식이 있다. 예를들어 "

예전에 css스타일이나 html 코딩을 정리할 때 이용한 건 널리에서 제공하던 N-WAX를 이용했는데 어느 순간부터 서비스 지원이 원활치 안아서 정리하는 사이트를 찾던 중 발견한 사이트라고 할 수 있다. 해당 웹사이트는 Pretty Diff 라는 해외 사이트이다. 위에서 언급한 바와 같이 Pretty Diff는 css, html, jQuery, javascript 등 태그를 가져왔을 때 정리가 지저분하게 되어있는 것을 한순간에 정리해주는 사이트이다. 하단의 링크를 눌러 사이 에로 접속 ▼ Pretty Diff - The difference tool ↑ ↑ ↔ prettydiff.com 메인 페이지 접속하게 되면 좌우 에디터 편집창이 있으며, 하단에는 다양한 설정에 따른 체크박스가 있다. 크롬으로 자동번역..