본문 바로가기

css32

IE 6~8 에서 CSS Pseudo class 및 Attribute Selector 지원하기 CSS3에서 지원되는 의사 Pseudo class 및 Attribute Selector들은 CSS의 효용성을 더욱 높여 줍니다. 동적으로 갯수가 변하는 의 행이나 열, 의 아이템 등의 첫 번째와 마지막에만 스타일을 달리하는 경우는 많이 사용되는 예가 되겠습니다. 이런 상황에서 :first-child, :last-child 등이 지원 되지 않으면 프로그램에서 루프를 돌면서 출력을 하다가 처음과 끝은 판단해서 다른 스타일을 붙여주는 형식으로 처리하게 됩니다. 이러면 루프내의 조건문으로 인해 코드가 보기 깔끔하지 못하게 됩니다. 다행히도 CSS3 에서는 이러한 특정위치의 요소를 선택할 수 있는방법이 제공됩니다. 하지만 오래된 브라우저를 지원해야 한다면 polyfill을 적용해야 할 것입니다. selectivi.. 2018. 4. 9.
반응형 웹 - 뷰포트(viewport) 사용법 반응형 웹 (responsive web)이란 하나의 웹사이트로 데스크탑 PC, 스마트폰, 태블릿 PC 등 접속하는 디스플레이의 종류에 따라 화면의 크기가 자동으로 변하도록 만든 웹 페이지를 말합니다. 미디어 쿼리는 CSS3 부터 지원이 되는 CSS기술로 미디어 타입, 화면 크기 등을 기준으로 다른 스타일 시트를 적용할 수 있도록 해줍니다. 이를 이용해서 화면 크기가 변할때 스타일을 바뀌도록 해서 반응형 웹을 구현할 수 있습니다. 모바일 웹을 작성하게 되면 뷰포트(viewport)라는 것을 고려하게 됩니다. 뷰포트는 웹페이지가 사용자에게 보여지는 영역을 말합니다. 데스크탑 PC에서 브라우저의 크기를 줄이면 웹페이지의 내용이 다보여지지 않고 스크롤 해서 봐야 되는 경우가 있습니다. 이때도 브라우저에 보여지는.. 2018. 4. 9.