부트스트랩이나 CSS로 레이아웃을 잡는게 주류가 되면서 요즘은 잘 사용하지 않지만메뉴나 레이아웃을 이미지를 사용해 잡은 경우 CSS로 특정 위치의 요소에 크기값을 일일이 주는 것이 생각보다 번거롭습니다.특히 쇼핑몰의 상품 진열이 복잡한 경우 비어있는 배너 이미지 영역을 처리할 때 그렇습니다.이런 경우 아얘 1px x 1px 투명 gif이미지를 만들어 크기를 잡아 배치를 하면 빈 영역에 대한 배치가 쉽게 끝나기도 하고, 나중에 이미지 대체를 하면 되기..
우리나라는 아직도 인터넷 익스플로러 9에 대한 호환성 처리를 해야 하는 경우가 생기는 불행한 환경입니다. 물론 실무에서는 어쩌다 입니다만, 그것이 실제로 일어납니다.아래 코드는 실제 금융권 사이트의 IE 호환성 지원을 위한 코드입니다.<!--[if IE 7 ]> <body class="ie7 le_ie9 le_ie8"> <![endif]--><!--[if IE 8 ]> ..
HTML+CSS 기초 강의 - 33. HTML5 에서 추가된 폼 요소
아직 많이 사용되고 있지는 않지만, 폼의 편의성 개선을 위해 2개의 폼 태그가 추가되었습니다. 실상은 있는지도 모르는... 그런 폼 태그입니다만, <datalist>는 편리한 기능이기 때문에 꼭 알아두길 추천합니다. <datalist> 입력 필드와 드롭다운목록을 하나로 합친 요소입니다. 기본 상태는 입력필드이고 입력도 가능하지만, 필드가 포커스되면 드롭다운목록이 활성화되어 목록에서 항목을 선택할 수 있게 되..
HTML+CSS 기초 강의 - 32. CSS 속성 기초 4 - 배경 속성
배경 속성 요소의 배경에 색상이나 이미지를 배치해 요소를 꾸밀 수 있습니다.배경으로 이미지를 배치하면 말그대로 배경이기 때문에 HTML 요소 안의 컨텐츠들은 이 배경 이미지 위에 표시됩니다.배경 이미지로 반투명 png 이미지도 사용할 수 있기 때문에, 중첩된 요소들에 여러개의 배경 이미지를 잘 사용하면 다양한 이미지 중첩 효과를 만들 수도 있습니다.배경 속성값 지정하는 방법은 2가지로 나누어집니다.하나는 backgr..
HTML+CSS 기초 강의 - 31. CSS 속성 기초 3 - 요소의 크기와 영역 속성
요소의 너비와 높이 그리고 영역의 범위 패딩, 마진, 테두리 값을 주게 되면 HTML 요소가 차지하는 영역의 크기와 내부영역의 위치가 가변으로 변하게 됩니다. HTML 요소에 너비와 높이 값이 지정되어 있지만 이 값은 패딩, 마진, 테두리 값이 모두 0인 상태의 요소가 차지하는 영역의 크기를 말합니다. 아래처럼 <div> 태그에 마진, 패딩, 테두리 0 으로 크기를 정한 처음의 박스 영역에서 패딩, 테두리, ..
HTML+CSS 기초 강의 - 30. CSS 속성 기초 2 - 여백과 테두리 속성
여백 속성 모든 HTML 요소는 HTML 문서 안에 차지하는 영역이 있고 영역의 끝 부분에 다른 요소와 맞닿는 경계가 있습니다. 그 경계와 HTML 요소 안의 컨텐츠 사이에 여백을 주거나, 경계로부터 다른 요소, 또는 부모 요소와의 사이에 여백을 줄 수 있습니다. 요소의 내부와 외부에 여백을 주는 2가지 방법중 내부 여백을 패딩(Padding)이라고 하고 테두리에서 다른 HTML 요소, 또는 부모 요소와의 사이에 ..