웹프로그래밍/CSS (16) 썸네일형 리스트형 background-size cover only Y ? .foo { background-size: auto 100%; } CSS3 for IE7, 8 {https://github.com/scottjehl/Respond/} css3-mediaquery 보다 훨씬 빠르고 잘된다. Respond.js A fast & lightweight polyfill for min/max-width CSS3 Media Queries (for IE 6-8, and more) Copyright 2011: Scott Jehl, scottjehl.com Licensed under the MIT license. The goal of this script is to provide a fast and lightweight (3kb minified / 1kb gzipped) script to enable responsive web designs in browsers that don't support CSS3 Media Queries - in particu.. Background-size for IE7,8 https://github.com/louisremi/background-size-polyfill for IE8 that is really simple to use: .selector { background-size: cover; behavior: url(/backgroundsize.min.htc); } CSS3 구조선택자 구조선택자는 CSS3에서 추가된 기능이므로 IE8 이하에서는 사용할 수 없다. 1. 일반 구조 선택자 선택자 형태 설명 :first-child 첫번째에 위치하는 자손을 선택 :last-child 마지막에 위치하는 자손을 선택 :nth-child(수열) 앞에서 수열 번째에 있는 자손을 선택 ex) nth-child(2n) , nth-child(2n+1) :nth-last-child(수열) 뒤에서 수열 번째에 있는 자손을 선택 first second third fourth fifth sixth seventh 2. 형태 구조 선택자 선택자 형태 설명 :first-of-type 자손 중에 첫번째로 등장하는 특정태그 :last-of-type 자손 중에 마지막으로 등장하는 특정태그 :nth-of-type(수열) 자.. CSS 동위선택자, 상태선택자 1. 동위선택자 선택자 형태 설명 선택자A + 선택자B 선택자A 바로 뒤에 위치하는 선택자B 선택 선택자A ~ 선택자B 선택자A뒤에 위치하는 선택자B 선택 header-1 header-2 header-3header-4 2. 상태선택자 : 입력양식의 상태를 선택할때 사용하는 선택자 선택자 형태 설명 :checked 체크상태의 input 태그 선택 :focus 초점이 맞추어진 input 태그 선택 :enabled 사용가능한 input 태그 선택 :disabled 사용 불가능한 input 태그 선택 CSS 속성선택자 1. 선택자[속성] , 선택자[속성=값] - 특정한 속성이 있는 태그 선택 img[alt] img 중에 alt 속성을 가진 것만 찾는다. input[type=password] input 중에 type이 password 인 것만 찾는다. div#header 아이디가 header 인 div 선택하는 같은 방법이다. div[id=header] div[id="header"] 2. 선택자[속성~=값] , 선택자[속성|=값] - 속성 안의 값이 특정 값을 단어로 포함하는 문서 객체를 선택(띄어쓰기 포함) img[alt~="test"] test 뒤에 띄어쓰기가 있는경우도 찾는다. test 앞에 띄어쓰기가 있는경우도 찾는다. img[alt|="test"] test 뒤에 - 있는 경우 찾는다. 3. 선택자[속성^=값] .. How to Enable CSS3 Border Radius in Internet Explorer 8 and below CSS3 gives us the ability to create rounded corners with the border-radius property. But as you might already know, this new feature is not recognized in Internet Explorer 8 (IE8) and its earlier versions. So when you apply CSS3 Border Radius to an element, it still appears as a box with pointed tips. You may find a lot of different advice on the Internet suggesting you ignore IE8. You wish you .. 텍스트 줄바꿈 처리 word-break, white-space 작업을 하다보면 텍스트가 정해진 width를 넘어가는 경우 어떻게 처리해야 하나 고민이 될 때가 있습니다. 그럴 때는 상황에 따라서 이 것들을 사용해서 해결해주면 좋을 듯 합니다. word-break word-break 는 말 그대로 단어를 자르는 겁니다. 기복적으로 줄이 넘어갈 때는 단어단위로 잘려서 넘어가게 되어 있습니다. 그래서 띄어 쓰기를 하지 않고 글을 쓴다면 한 단어로 인식하여서 width 를 넘어가도 줄바꿈이 되지 않습니다. 그럴 때 word-break 를 사용해주면 줄바꿈이 가능하게 됩니다. .selector {word-break:break-all;} 위와 같은 속성을 주게되면 위의 그림의 아래 부분과 같이 단어 중간에서도 줄바꿈이 가능하게 됩니다. 위의 그림이 잘 이해가 가지 않는다면 이.. 이전 1 2 다음