어느날 크롬만 CSS애니매이션이 느리게 동작하는 현상이 나왔습니다. 1. 해결방법 *{scroll-behavior: smooth;}를 제거하면됩니다. 제거가 힘들다면 css 아래와 같이 추가하면 됩니다. 1 2 3 :root { scroll-behavior: auto; } cs 2. 원인 부트스트랩과 에는 "*{scroll-behavior: smooth;}"가 들어 있습니다. 이상태에서 "Jquery UI"를 사용하면 애니메이션이 이상하게 동작하는 것을 볼수 있습니다. 원래는 "Jquery"의 에니매이션이 우선됐는데 크롬에서 언제부터인가 "smooth"가 먹혀서 이상한 동작을 하게되었습니다. 파이어폭스에서는 여전히 정상동작하는 것으로 보아 크롬 버그거나 정책이 바뀐거겠죠. 마무리 포스팅이 올라가는 시점에..

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

html을 작성하다보면 자주 사용 하는 것 중에 하나가 'float'속성입니다. 그런데 'float'속성의 특징은 다른 레이아웃에 영향을 주지 않는 것이죠. 0. 테스트용 코드 작성 테스트용 html을 다음과 같이 작성합니다. aaaaaaaaaaaaaaa bbbbbbbbbbbbbbb ccccccccccccccc 이 코드를 실행하면 다음과 같이 나옵니다. 1. 문제 이제 '.Child1'과 '.Child2'에 'float'을 추가해 봅시다. .Child1 { background-color:yellow; width:300px; height:300px; float:left; } .Child2 { background-color:red; width:200px; height:200px; float:left; } 이..

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