테이블을 만들고 원래의 'td'크기보다 큰 내용이 들어간 셀이 있으면 나머지 'td'들의 높이 100%가 이전 높이를 가지는 현상이 있습니다. 보통 'height'를 '100%'로 지정하면 자신의 부모 크기를 따른다고 생각하기 때문에 그냥 보면 이상합니다. 이것을 의도한 대로 '높이 100%'가 되도록 해보겠습니다. 1. 원인 어떻게 보면 당연하기도 한 것이 다른 'td'에 의해 해당 줄의 크기가 늘어난 것이기 때문에 자신의 높이는 여전히 이전 크기와 같습니다. 아래 샘플의 첫 번째 'td'를 보시면 연한 색이 최초 'td'높이를 가지고 있는 것을 볼 수 있습니다. See the Pen fill td height by DangGun (@danggun) on CodePen. 2. 해결방법 정상적인 해결방법..

html5로 작성된 코드를 보다가 table 코드에서 ""를 보았습니다. 1.테이블(table)에 추가된 th th가 무엇인가 해서 찾아보니 테이블에서 헤더 역활을 하는 td의 경우 th로 작성하고 합니다. (참고 : W3C HTML5 - th element) 일반적으로 테이블은 데이터를 나열하는 용도로 사용합니다. 그렇기 때문에 헤더는 거의 매번 필요하죠. 하지만 이전까지는 헤더를 구분하기위해서 따로 스타일을 적용해야 했습니다. 스타일 시트에서 th를 작성하면 따로 스타일을 적용할 필요가 없습니다. 2.이전 방식과 비교 이전에는 헤더로 사용할 td나 tr에 직접 스타일을 지정했습니다. 이렇게 하면 table와 tr에 스타일을 지정해주어야 한다는 단점이 잇습니다. 하지만 th를 이용하면 이렇게 테이블 테..

HTML 작업을 하다 보면 'input'을 자주 쓰게 됩니다. 문제는 이 녀석들이 다 같은 태그이면서 타입에 따라서 완전히 다른 모양을 한다는 점입니다. 그렇기 때문에 각각 스타일을 지정해야 합니다. 하지만 컨트롤이 한두 개도 아니고 언제 작업을 하며 매번 컨트롤 추가할 때마다 스타일을 지정해주는 것도 일이죠. 이때 필요한 것이 타입별로 CSS를 지정하는 것입니다. 1. 샘플 코드 만들기 테스트용 html 코드를 만들어 봅시다. 2. 타입 지정하기 CSS에서 타입을 지정하기 위해서는 태그 이름[속성이름="속성값"] 입니다. 예제를 보세요. 이렇게 지정하면 자동으로 본문에 있는 'input' 태그의 속성이 'text'인 태그에 스타일이 적용됩니다. 3. 응용하기 이 방법으로 다른 속성도 지정할 수 있습니다..

CSS를 이용한 롤오버 버튼 만들기 1. [CSS3] CSS를 이용하여 div로 롤오버 버튼 만들기2. [CSS3] a태그와 CSS를 이용하여 롤오버 버튼 만들기 div를 이용한 롤오버버튼은 롤오버 영역위에 원하는 컨트롤이나 레이아웃 배치가 가능하기 때문에 범용성은 좋지만 단순이 링크만 필요할때 쓰기에는 너무 무겁습니다. 단순이 링크용으로만 사용할 것이라면 a태그를 이용하는 편이 났죠. 1. CSS 작성 a태그자체가 원래부터 마우스 동작에 반응을 합니다. 그러니 우리는 이 동작에 우리가 원하는 스타일을 적용하면 되는 것이죠. a태그의 기본스타일과 hover스타일을 우리가 원하는 스타일로 바꿔 봅시다. a태그 사이에 이미지나 글자 같은 것들이 없다면 a태그 자체가 표시되지 않기 때문에 크기를 지정하여야 합..

버튼 하면 보통은 인풋버튼(input button)을 생각합니다. 하지만 인풋버튼은 모양내기가 힘들다는 단점이-_-;;; 그래서 인풋이미지(input image)나 img를 사용하여 마진을 조종해서 사용하기도 합니다. 이 방법들이 나쁜방법은 아니지만 상황에 따라서 안맞는 경우가 좀있습니다. 그래서 좀더 범용적으로 사용이 가능한 div로 롤오버 버튼을 구현해 보겠습니다. 1. 레이아웃 구조 div로 롤오버 버튼을 구현하는 경우 적용되는 css나 용도에 따라 레이아웃이 달라 집니다. 이 글에서 사용할 버튼의 동작은 다음과 같습니다. 1)롤오버(이미지) 2)링크 이런 동작을 위해서는 아래와 같은 구조가 필요합니다. 버튼영역은 관리를 편하게 하려는 목적도 있기 때문에 필요에 따라서는 없어도 됩니다. 2. htm..

익스플로러 계열에서는 정상적인 CSS가 먹히지 않는 현상이 있습니다, 이런게 한두개가 아니긴 하지만 이 경우는 어떤 경우인지 알아봅시다. 1. 문제의 발견 아래코드로 html파일을 만들어 돌려봅시다. aaaaaaaa 귀찬으신 분들을 위한 파일 : 해당 파일을 다시 크롬에다 돌려보면 차이가 확실이 납니다. 'aaaaaaaa' 가 크롬에서는 고정되는데 익스플로러에서는 고정되지 않습니다. 이렇게 말이죠. 2. 해결방법 이렇게 되는 이유는 익스플로러의 경우 HTML코드가 정상적인 패턴을 가지고 있지 않으면 이전코드(익스플로러 7 이전버전들)로 작성된것으로 판단하여 호환모드가 강재로 적용되기 때문에 그렇다고 합니다. 이런 현상을 막기위해서는 문서형식을 지정하면됩니다. ( 참고 : 위키백과 - 문서 형식 선언 ) ..

1. 구현 방법 흔히 글에 목차가 필요하면 a태그를 이용하여 특정 줄로 바로 갈 수 있는 기능을 넣습니다. 이 기능은 a태그에서 목표 위치를 '#[id]'로 넣으면 본분에서 'id'로 되어 있는 요소를 찾아 스크롤이 동합니다. 2. 구현해 보기 HTML파일을 만들어 아래처럼 구현합니다. 1번으로 가기 ... 중략 ... 1 2 3 HTML5 이전에는...... HTML5에서는 'name'이 아니라 'id'를 추적합니다. 그전에는 'name'을 추적했다는 것이죠. 3. 테스트 테스트를 위해 이 포스팅에도 ID를 넣어 놨습니다 ㅎㅎㅎ 여기 클릭하면 아래로 감 여기 클릭하면 위로 감 마무리 간단한 건데 가끔 까먹어 ㅡ.-;;

팝업 차단기능으로인해 이제는 거의 필수가된 레이어 팝업입니다. html에서 레이어사용을 일단 자제하는것이 맞습니다만...필요하다면이야 ㅎㅎㅎ;; 인터넷 뒤저보면 많은 코드들이 있지만 깔끔하게 정리된게 없어서 제가 쓰기위해 정리 하였습니다. 자바 스크립트 function LeyerPopupView(sDivName, nTop, nLeft, nHeight, nWidth) { /* 레이어 팝업을 띄웁니다. 팝업의 크기는 내용물의 크기에 영향을 받습니다. 그렇기 때문에 내용물에 따라 정확하지 않은 크기가 적용될수 있습니다. 매개변수 sDivName : 레이어 팝업으로 쓸 div id nTop : 팝업의 세로 위치 nLeft : 팝업의 가로 위치 nHeight : 팝업의 세로 크기 nWidth : 팝업의 가로 크기..

엄밀이 말하면 실버라이트에서 html을 띄울수 없습니다. 실버라이트에서 IFrame과 같은 html을 별도로 사용하기위해선 Windowless모드를 사용하여야 합니다. (참고 : 공도님의 블로그 - Window 모드와 Windowless 모드 ) ,aspx파일에서 실버라이트를 불러올때 넣어주는 파라미터에 다음과 같이 추가 하면 됩니다. 이걸켜주면 시버라이트는 다른 HTML위로 올라가게 됩니다.(으잌?) ㅎㅎㅎ 반농담이고요. HTML이 위로 올라갑니다 ㅡ.-;;; 그러니 여전이 html문서와 유동적으로 구성할수는 없습니다 ㅜㅡ 이것까지는 좋은데 이렇게 하면 html코드가 .aspx에 들어가기 때문에 런타임에서 실버라이트가 컨트롤하는데 한계가 있습니다. 그래서 이것저것 자료를 뒤저보니..... divelem..