소금인형 - SW개발자?

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..

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..

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..

배경 이미지 고정되게 처리하기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..

기본 형식의 clss내용 바꾸기는 className으로 처리한다. javascript를 통해서, css의 class의 내용을 변경하는 방법입니다.document.getElementById('tab1').className = "ewu tabBtn tabOn"; javascript를 통해서, style.disply처리document.getElementById('table1').style.display = "block";document.getElementById('table2').style.display = "none"; CSS 클래스 addClass 처리하기출처: [자바스크립트] jquery 없이 DOM의 CSS 클래스 addClass, toggleClass, removeClass 구현하기 addClass ..

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

each() 집합 elements를 수정each(iterator)$('img').each(function(n){this.alt='ID가 '+this.id+'인 image['+n+']이다';});또 다른 예제var allAlts = new Array();$('img').each(function(){allAlts.push(this.alt);}); 단일 properties값 받기var altValue = s('#myImage')[0]; Attribute값 get, set attr(name) : name attribute의 value 가져오기attr(name, value) : name attribute에 value값 set하기attr(attributes)매개변수: attributes (Object) 확장 집합의..

그레디언트 Linear_gradient내용 출처의 HTML압축파일 출처: https://developer.mozilla.org/ko/docs/CSS/linear-gradient

밴더별 CSS 확장 접두사 브라우저 회사별 특성에 맞는 CSS 접두사가 존재한다. W3C : http://www.w3.org/TR/CSS21/syndata.html#vendor-keywords Vendor-specific Properties: http://reference.sitepoint.com/css/vendorspecific Table 1. Vendor Extension Prefixes Prefix Organisation -ms- Microsoft mso- Microsoft Office -moz- Mozilla Foundation (Gecko-based browsers) -o- Opera Software -atsc- Advanced Television Standards Committee -wap- ..

img 태그와 글자의 위치를 맞추려면, 예전에는 img의 align속성의 값을 이용해서 align="absmiddle" 정렬을 했다. 요즘은 img태그에 align이 비표준이기에, 해당 처리를 CSS의 vertical-align속성을 이용해서 이미지 정렬를 주고 있다. 홈페이지 나모 웹에디터 Image Margin bottom. Test 2: div태그안에 Img중간 정렬 http://www.web-sheeps.com/rec/69-Image-vertical-align-with-CSS,-avoid-abs

윈도우 Vista부터 기본으로 들어가 있는 '맑은 고딕'을 CSS에서 적용하려면, 다음과 같이 사용하시면 됩니다. '맑은 고딕' 또는 영문으로 'Malgun Gothic' 이렇게 표시 인라인 스타일 방법 요소를 이용한 방법 body { font-family: "Malgun Gothic", "굴림", "Gulim", "Arial"; } 다음은 제가 사용하고 있는 블로그에서 사용하는 Font CSS 내용입니다. (여기서는 'Malgun Gothic', '맑은 고딕' 처럼 한글/영어로 2번 사용) font-family: AppleSDGothicNeo-Regular, 'Malgun Gothic', '맑은 고딕', dotum, '돋움', sans-serif; -webkit-font-smoothing: antial..

vendor prefix는 회사별(vendor)로 각 브라우저에서 새로운 기능을 추가하고 시범적으로 운영하기 위함입니다. 이 vendor prefix(벤더 프리픽스)는 핵이 아닙니다. 이는 나중에 공식속성이 나오면 지원하지 않을 가능성이 많기 때문에, 밴더 프리픽스를 먼저 선언하고 뒤에 공식 속성을 선언하는 것이 좋습니다. 출처: http://demun.tistory.com/1986

폭에 따른 View가 다르게 보여주는 방식를 쉽게 처리하는 방법은 바로 CSS Media Query를 이용하는 것이다. Max Width값 @media screen and (max-width: 600px) { .class { background: #ccc; } } link 방식 Min Width값 @media screen and (min-width: 900px) { .class { background: #666; } } Multiple Media Queries @media screen and (min-width: 600px) and (max-width: 900px) { .class { background: #333; } } Device Width @media screen and (max-device-wi..