소금인형 - SW개발자?

태그가 완전히 로드될때, javascript 실행하기 하는 이벤트 요소(Attribute)입니다. HTML Audio/Video DOM loadeddata Event 해당 프레임에서 비디오/오디오가 로딩이 완료되면 실행되 었는지 확인 해주는 이벤트입니다. onloadeddata 이벤트를 이용해서, 자동 플레이도 만들 수 있습니다. (하단 '자동 플레이 예제'를 참조하세요) Syntax In HTML: In JavaScript: Using addEventListener(): 예제 자동 플레이 예제 Your browser does not support HTML5 video. 자동 플레이 경우, muted="muted" 속성이 있어야 자동 재생이 됩니다. 음소거(muted)로 되어 있지 않은 비디오는 자동 재..

display Property (속성) display 속성은 요소를 어떻게 보여줄지를 결정하는 속성입니다. 4가지 속성 값을 많이 사용합니다. HTML element 요소(태그)마다 기본값이 다릅니다. none : 보이지 않음 block : 블록박스 inline : 인라인 박스 inline-block : block과 inline의 중간 형태 그 외도 다양한 속성 값들이 있습니다. contents flex : 요소들을 블록 박스 단위로 쌓아서 정렬한다. (한쪽방향으로만 정렬) grid : 요소들을 블록박스 단위로 격자 모양으로 정렬한다. (좌우, 상하 2차원 정렬) inlin-block inline-flex inline-grid inlin-table run-in table : 요소를 처럼 처리합니다. ta..

Unordered List 이나, Ordered List 의 하위에 속한 List 에 기호나, 숫자를 표시 되지 않게 하는 CSS 스타일 list-style:none 속성 "list-style: none" CSS를 추가하면, unordered list () or ordered list ()의 bullet or number제거됨 unordered (bulleted) list 예제 최상단의 에 "list-style:none" CSS를 추가해 주면서, Coffee, Tea, Milk에 표시가 제거됩니다. Coffee Tea Black tea Green tea China Africa Milk HTML 결과물 >> 여러번 반복되면, 인라인 style코드를 CSS class로 선언해서 사용해도 편하겠죠. ... C..

프로그램을 개발하다보면, 사용자의 입력을 받는 곳에 커서를 처음 위치해준다는 것은 작은 배려이지만, 많은 부분 사용자에게 마우스 커서를 한번 찍지 않아도 되는 이득을 줄 수 있습니다. 의 autofocus 속성을 알기 전에는 javascript를 이용해서 커서를 이동시켰답니다. [ 옛날 javascript 소스를 이용한 Input박스에 커서 이동하기 ] ... 결론적으로 해당 방법은 믿을만 하지만, 별로 필요 없는 코딩 낭비(?) 였습니다. 해결 방법은 autofocue 속성을 이용하는게 편리하고 유용합니다. [ 쉬운 해결법 ] 페이지가 로딩되는 순간 해당 Input 박스로 커서가 이동됩니다. Browser Support Chrome IE firefox safari opera autofocus 5.0 1..

HTML를 통해서 웹의 UI화면과 내용을 넣다보면, 특수 문자를 입력하는 방법에 다양한 방법들이 있답니다. HTML 파일의 File type 포멧을 UTF-8을 이용해서 해당 문자로 입력하는 방법도 있고, 개인적으로 많이 사용하는 코드는 HTML ENTITY코드를 사용하는 방법입니다. 보통 Empty Space(공백)을 입력할때, 와 같은 HTML Entity를 사용하는데. 저는 형식으로 HTML CODE를 값을 자주 사용합니다. 화폐 단위 표시나, 1/4과 같은 문자 표시나 자주 사용되는 항목들의 코드값을 정리해둔 사이트가 있어서 남겨둡니다. ¼ 쿼터의 표시의 경우, ¼를 사용하면 이쁘게 표시가 됩니다. ⅆ ⅉ (dj문자값 ⅆ ⅉ) ♻ (리사이클♻) 다양한 문자 코드를 이용해서, 디자인 없이도 간단한 ..

일반적으로 HTTP 통신의 접근은 권한 인증을 하지 않고, 시용하는 방법을 많이 사용하고 있습니다. 그러나, RFC 7235 (규약 내용)에 보면, HTTP TTP 인증은 서버는 클라이언트(웹브라우저 등)의 요청간에 401(Unauthorized) 응답으로, 최소한 한 번의 인증 시도(WWW-Authenticate)를 통해서, 응답 헤더(HTTP header)에 무인증(Unauthorized) 권한 부여 정보를 제공합니다. 클라이언트에서 서버로 HTTP 권한 인증 처리 과정에서, 서버에서는 Username과 Password를 요구할수 있게 처리가 가능하며, 이걸 Basic 인증라하며, 이 인증 정보가 맞는 사용자에게 정보를 보여주게 할 수 있습니다. 여기서, 해당 정보를 wget과 같은 유틸리티로 웹 페..

Web페이지에서도, Word의 페이지 나눔 처리가 가능합니다. 객체 태그에 style인라인 값으로 style="page-break-after: always;" 추가해주면, 다음 태그부터는 다음 페이지로 인쇄가 됩니다. (예제: CSS 인라인으로 추가) [ 웹페이지 화면 ] 상단 테이블 영역과 하단 테이블 영역이 화면에 보일 때는 붙어 보입니다. 그러나, 인쇄를 하면 다른 페이지로 인쇄가 됩니다. [ 프린트 인쇄 미리보기 ] page-break-after의 CSS를 이용해서, Word의 페이지 나눔 처리가 가능 해집니다. 또 다른 적용 방법은 인라인 방식이 아니라, CSS함수 선언하는 방식을 말한다. CSS @media print { footer { page-break-after: always; } } H..

CSS를 사용하다보면, 윈도우 객체의 Transparent color(투명컬러)와 같이 부모의 색상을 받고 싶을때가 있습니다. CSS에서 "color: inherit;" 을 이용하면, 해당 객체의 부모의 색상을 사용하기에 투명한 느낌처럼 사용이 가능합니다. /* Make second-level headers green */ h2 { color: green; } /* ...but leave those in the sidebar alone so they use their parent's color */ #sidebar h2 { color: inherit; } 참고: (1) https://stackoverflow.com/questions/6722467/how-to-remove-the-default-link-c..

html5의 input의 타입별로 유용하게 쓰일 때가 많습니다. type="tel"과 같은 경우, 휴대폰에서 숫자 기보드만 입력이 가능하게 변경이 되어서 너무 유용하게 쓰이죠. HTML5의 type내용들 type="button" value="button" type="checkbox" type="color" type="date" type="datetime-local" type="email" type="file" type="hidden" type="image" type="month" type="number" type="password" type="radio" type="range" type="reset" type="search" type="submit" type="tel" type="text" type="t..

구글의 폰트 서비스 Google Fonts https://fonts.google.com/ 한글 구글 폰트 Google Fonts (subset=korean) https://fonts.google.com/?subset=korean 다양한 폰트를 지원합니다. 쉽게 가능하며, 사용도 방법 예제도 너무 잘 나와있습니다. 나눔 명조 사용법 구글의 웹폰트 중에 나눔 명조(Nanum Myeongjo)가 있습니다. 미리보기 화면과, 폰트 다운로드와 다양한 정보들이 있습니다. Google Fonts의 나눔 명조 Nanum Myeongjo: https://fonts.google.com/specimen/Nanum+Myeongjo 나눔 명조는 네이버사로 유명한 NHN사의 무료 폰트 입니다. 화면 표시, 인쇄 용으로도 사용이 ..

출처: http://blog.usabilla.com/pagination-theres-life-webs-old-dog-yet/ Pagination: Why there’s life in the web’s old dog yeton February 11, 2014 / by Oliver McGoughAs web technologies continue to improve, so are the ways in which we experience the internet. In the 23 years of the web, many trends have come and gone. We’ve seen Page Counters come and go, Flash rise and fall, and we’re currently se..

개인적으로 영문 표기에, 웹에서 사용하기 좋은 폰트인것 같습니다.참고: https://typekit.com/fonts/proxima-nova body { background: white; color: #222222; padding: 0; margin: 0; font-family: "ProximaNova", "Helvetica Neue", "Helvetica", "Segoe UI", Arial, sans-serif; font-weight: normal; font-style: normal; line-height: 1; position: relative; cursor: default;}

html5의 태그에 mp4 파일이 재생이 안될 때가 있습니다. 여러 가지 이유 중에 간단한 원인으로 고생할 때가 있습니다. 원인 중 하나는 비디오의 코덱이 다르기 때문입니다. 태그의 공식적인 지원하는 비디오 코덱은 MP4 H.264이고, 오디오는 AAC or MP3입니다. 간혹 MPEG-4코덱의 mp4를 사용해서 할 때, 플레이되지 않는 경우가 있습니다. 확장자가 mp4 파일의 파일 속성으로 비디오 코덱 확인해 보는 것이 좋습니다. 참고 H.264와 MPEG-4가 차이점을 나온 포스트는 링크해 둡니다. (관련 포스트) MPEG-4와 H.264의 차이? 그리고 영상 압축 패권 이야기 (아래 참조) 일반적으로MP4하면, MPEG-4와 H.264를 같이 봤었는데, 여하튼 자세한 내용은 확인해주시길.. 태그의 ..

CSS로 Font에 border 처리 방법 h1 { color: yellow; text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; }Hello World (결과)Hello World 출처: http://stackoverflow.com/questions/2570972/css-font-border

이미지를 중앙에 정렬하려고 할때, 방법 1) 이미지 자체에 주기 style="padding: 0.5em; width:80%; max-width:1010px; display: block; margin-left:auto; margin-right:auto;" 방법 2) 로 감싸서 주기 또는, 에 감싸주기 참고: [html/css] 이미지를 넣는 img 태그(css로 이미지 중앙 정렬 방법)

영문에서 사용되는 font를 이쁘게 하기 위해서, Segoe UI를 많이들 사용하는데요. CSS을 다음과 같이 사용하시면, Segoe UI Lighter가 됩니다. font-family: Segoe UI; font-weight: lighter; 출처: "Segoe UI Light" font does not render in FireFox7 [ Segoe UI폰트를 사파리에서 사용하기 ] First of all there are difrent types of fonts for every browser. To make sure that it will work in every browser You need to put at least 3 types: eot, ttf, woff (and svg). The bes..

White-space 공백 줄바꿈문자 처리 방법 (띄어쓰기나 줄바꿈으로 이한 공백부분 등) white-space:normal; 출처: http://dolly77.tistory.com/5

프린트 할때, 특정 영역 출력되지 않게 하는 CSS 방법 아래의 class="no-print"한 영역은 출력이 되지 않는다. [ CSS 영역 ]@media print{ .no-print, .no-print * { display: none !important; } } [ HTML 영역 ] 참고: http://stackoverflow.com/questions/355313/how-do-i-hide-an-element-when-printing-a-web-page [ Chrome에서 Print 옵션에 Headers and footers 없애기 ] @page { margin: 0; }으로 주게 되면, 해당 옵션이 없어집니다.@media print { .no-print, .no-print * { display: no..

출처: [기타] get방식의 길이제한 post와 get방식의 차이점을 정리하던 중 get방식의 길이제한에 대하여 의문이 들어 이렇게 정리한다. GET방식 데이터 전송방법 get방식이 데이터를 전송하는 방법은 주소(url)뒤에 구분자를 이용하여 데이터를 보내는 방식이다. 그렇다면 url뒤에 한없이 데이터를 붙여서 서버에 보내는 것이 가능한 일일까? 실제로 많은 블로그를 찾아보면 get방식의 단점으로 데이터를 보내는데 길이의 제한이 있다는 것이 post와의 차이점으로 나타내고 있다. 그렇다면 여기서 get방식의 길이제한은 얼마나 있는 것일까? 내가 찾아본 자료에 따르면 지금은 현재 IE를 제외하고는 나머지 브라우저들은 GET방식으로 데이터를 보내는데 제한이 없다. IE ( Internet Explorer )..

인터넷 주소인(URL:Uniform Resource Locator)의 규칙은 다음과 같습니다. W3C 규약 : http://www.w3.org/TR/url/ 기본적으로 URL 규약 he table below demonstrates how the getter condition for search results in different results depending on the exact original syntax of the URL:Input URLsearch valueExplanationhttp://example.com/empty stringNo component in input URL.http://example.com/??There is a component, but it is empty. The q..

캔버스 투명도 주기

크롬에 회전을 했을 때, 나타나지 않는 경우가 있습니다. CSS3를 이용해서 적용해 보면 다음과 같이 처리하면, 보이게 됩니다. 본문예제친구의 이야기를 다 들었을 때 나에게는, 친구의 의도와 상관 없이, 거대한 암흑의 이미지가 떠올라 있었다. 다른 친구들은 그 친구의 이야기를 거의 듣지 않은 듯싶었다. 왜냐하면 토요일 오후였기 때문이다. 그러나 나에게는 친구의 이야기가 화창한 토요일 오후와 대비되어 더욱 강렬하게 다가왔었다. 무엇보다도 친구의 들뜨고 밝은 표정이 깊은 인상을 남겼다. CSS3 SCROLLhttp://techstream.org/Web-Design/CSS3-Scroll-Bar Demohttp://demo.techstream.org/CSS3-Scroll-Bar/index3.html jQuery..

글자 색상을 표시하는 -webkit-text-fill-color (Band Prefixed 문구가 포함된 CSS태그) initial:초기값 -webkit-text-fill-color: initial; Sytax : -webkit-text-fill-color: ; http://css-infos.net/property/-webkit-text-fill-color

글에 포인트를 줄때 사용하는 CSS로 border-left-width와 border-color와 background를 이용한 글씨 테코레이션입니다. HTML내용 Note that the initial containing block's size is affected by the presence of scrollbars on the viewport.

글 꼴의 종류와 크기를 결정했다면, 볼드/이텔릭과 같은 글꼴의 장식 및 자간, 줄간 들여쓰기와 같은 문단 편집기능에 대하여 살펴봅니다. 몇몇 기능은 브라우저에 따라, 적용/미적용 여부가 다르며, 적용되더라도 화면의 보여지는 모습이 다릅니다. 충분한 테스트 후 활용하도록 합니다. [ 글꼴의 굵기 지정 ]font-weight: normal (default value);글꼴 그룹의 어떤 굵기의 글꼴을 사용할 것인지를 설정합니다. 초기값은 normal(400)이며, 굵은 글꼴은 bold(700) 키워드를 사용합니다. 설정값은 하위 요소로 상속됩니다. 다음은 Verdana 글꼴의 굵기 속성입니다.* normal, bold, 100~900font-weight: normalfont-weight: boldfont-we..

배경 이미지 고정되게 처리하기body { background-image: url(bg.gif); background-attachment: fixed;background-repeat: no-repeat} 배경의 그림을 스크롤링의 설정 background-attachement 속성의 fixed 값을 통해서 처리한다. CSS background-attachment Propertyhttp://www.w3schools.com/cssref/pr_background-attachment.asp Definition and UsageThe background-attachment property sets whether a background image is fixed or scrolls with the rest of the..

CSS Values and Units Module Level 3http://www.w3.org/TR/2013/CR-css3-values-20130730/#viewport-relative-lengths 2.5. Property value examplesBelow are some examples of properties with their corresponding value definition fieldsPropertyValue definition fieldExample value‘orphans’‘3’‘text-align’left | right | center | justify‘center’‘padding-top’ | ‘5%’‘outline-color’ | invert‘#fefefe’‘text-decorat..

inherit 속성값 inherit은 영어단어 그대로 상속받는겁니다. 상위 객체의 값을 그대로 물려받아 적용하는 겁니다. 가령 HTML:홈으로 메뉴를 클릭하세요. 게시판으로 가기 CSS:a { color: blue; } div { color: orange; } div a { color: inherit; } 이렇게 한다면 [홈으로]링크는 당연히 파랑색으로 나올겁니다. 그리고 [메뉴를 클릭하세요.]라는 p태그는 주황색으로 나오겠죠. [게시판으로 가기]링크는 상위 객체인 div의 color을 물려받아서(inherit) 주황색으로 나오게됩니다. inherit은 그렇게 유용하게 느껴지진 않습니다-_- 다만, div의 색상을 따라가게되니까 코드중 한부분만 수정하면 inherit에 의해 값을 물려받게 됩니다. 물론,..

이미지 높이 중앙 정렬align="absmiddle"를 CSS로 변경 방법 style="vertical-align:middle" 핵심 내용img { vertical-align: middle } Ever got stuck with the annoying problem of aligning an image next to some text? We all did. There were times when align="absmiddle" would solve this immediately, but how would you accomplish this with CSS? Ever got stuck with the annoying problem of aligning an image next to some text? We..

CSS3에서 사용되는 애니메이션 CSS 애니메이션을 만드려면 animation 속성과 이 속성의 하위 속성을 지정합니다. 애니메이션의 총 시간과 반복 여부등을 지정할 수 있습니다. 이 속성은 애니메이션의 중간상태를 기술하지 않는다는걸 명심하세요. 애니메이션의 중간 상태는 아래에서 다룰 @keyframes 규칙을 이용하여 기술합니다. animation 속성의 하위 속성은 다음과 같습니다. animation-delay 엘리먼트가 로드되고 나서 언제 애니메이션이 시작될지 지정합니다. animation-direction 애니메이션이 종료되고 다시 처음부터 시작할지 역방향으로 진행할지 지정합니다. animation-duration 한 싸이클의 애니메이션이 얼마에 걸쳐 일어날지 지정합니다. animation-ite..