css에는 마진 상쇄(margin collapsing) 혹은 마진 겹침(margin overlap)라는 현상이 있습니다. 탑과 바텀에 마진이 있는 경우 큰 쪽 한 개만 적용되는 현상을 말합니다. 아래위 마진이 겹쳐 있습니다. 1. 현상 확인 아래 코드를 실행해봅시다. See the Pen CSS3 Margin collapsing (margin overlap ) - Issue Check by DangGun (@danggun) on CodePen. 탑 마진(margin-top)을 20px주고 바텀마진을(margin-bottom) 20px를 줬습니다. 그런데 결과물은 20px 입니다, 이것을 마진 상쇄(margin collapsing), 마진 겹침(margin overlap) 현상이라고 합니다. 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; } 이..

웹디자인의 이슈 중 하나가 반응형 디자인입니다. 반응형 디자인이라는 건 해상도가 변해도 다른 작업 없이 레이아웃이 구성되도록 하는 것을 말합니다. (유동 디자인, 능동형 디자인 등으로 부릅니다.) 해상도에 따라 다른 화면이 아닌 일정한 화면을 보여주는 방식으로 크로스 브라우징을 해결하려고 하는 생각은 이전부터 있었습니다. 그런데 이 방법의 가장 큰 문제는 한가지 스타일만 가지고는 이 문제를 해결할 수 없다는 점입니다. 그래서 생겨난 것이 '@media'인데.... 미리 정의한 타입들만 가지고는 한계가 있다는 문제점이 있습니다. (참고 : sixmen - Media Query ) 그래서 CSS3에서는 미디어 쿼리라는 것이 생겼습니다. 1. 문제의 시작 특정 범위의 해상도에서는 한가지 스타일만 가지고 있어도..

CSS작업을 하다 보면 예상과 다르게 뒤에 나오는 스타일이 무시가 되거나 특정 스타일을 빼고 스타일을 넣어야 하는 경우가 종종 있습니다. 이럴 때는 'not()'선택자를 이용하여 지정한 스타일을 무시할 수 있습니다. (참고 : W3C - CSS/Selectors/pseudo-classes/:not) 1. 샘플 만들기 일단 테이블을 하나 만들어 봅시다. AAAaaaaa bbbbBBBB CCccc DDDDdddd .TableTest { } .TableTest tr td { padding:0 5px; background-color:Gray; } 이대로 테스트해봅시다. 2. 문제 일으키기 이제 스타일에 다음과 같은 코드를 추가합니다. /* 추가 */ .Test1 { padding-left:10px; backgr..

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

열심이 css 작업을 하다가 배경 이미지를 고정하기 위해 background-size를 사용했더니.... ㅡ,.ㅡ;;; background-size는 css3에서 나온 것이다보니 여기서 경고를 빵하고 내보내주는군요 ㅡ.-;;; 그래서 CSS3 마크업을 지정하기위해 '스타일시트' 도구상자를 열었는데.... ..... 아 이런.... CSS3 스키마가 설치가 되있지 않습니다 ㅜㅡ 비주얼 스트디오를 끄고 아래 파일을 설치 합니다. (참고 : Visual Studio - CSS 3 Intellisense Schema) (한글버전은 없나보네요.) 다운 받은 파일을 설치하고 비주얼 스튜디오를 다시 켭니다. 그러면 짜잔~ 스샷에는 짤렸지만 background-size에 밑줄이 없어 젔습니다. 참 쉽조잉?

IBM에서 제공하는 강좌를 보고 정리한 내용입니다. IBM - HTML5와 CSS3를 사용하여 최신 웹 사이트 구축하기 글순서 1.자주쓰는 태그 정리 [HTML5] 1-1. 문서에서 자주쓰이는 태그 정리 [HTML5] 1-2. 문서에서 자주쓰이는 스타일 정리(CSS) [HTML5] 2. 동영상 재생 [HTML5] 3. 기존 컨트롤들의 새기능과 새 스타일 적용 [HTML5] 4. 캔버스를 이용하여 이미지그리기 HTML코드는 이전글을 참고 하세요. 샘플코드를 실행하면 다음과 같이 표시 됩니다. 1.전체 선택자(Universal selector)문서의 전체를 나타네는 별(*)입니다. (참고 : W3C - 6.2. Universal selector) * { font-family: Lucida Sans, Aria..