demun(대문블로그)

퍼블리셔/css2012. 10. 30. 09:00

반응형으로 반응하는 웹디자인에서 img 는 어떻게 처리하는지를 알아봅니다. 이전에는 반응형 웹디자인의 조건 글꼴크기와 width 에 대해서 알아보았습니다. 여기서는 img 에 대해서 알아보는데요. 이건 비교적 간단합니다. img 에 대해서 아래처럼 처리하면 됩니다. img { max-width: 100%; } img 뿐만 아니라 비디오나 리치 미디어와 같은 가로 너비가 고정된 엘리먼트에도 동일하게 사용합니다. 그럼 아래처럼 표기하면 됩니다. img, embed, object, video { max-width: 100%; } 이처럼 비교적 간단합니다.문제는 max-width를 지원하지 않는 IE.6 입니다.IE.6에서 max-width 를 지원하게 만드는 방법은 몇가지가 있습니다만 expression필터를..

퍼블리셔/css2012. 10. 27. 09:00

반응형 웹디자인의 첫번째 조건인 글꼴 크기를 정하는 방법에 대해서 알아봤습니다. 이제 글꼴 크기를 정했으니 레이아웃에 반영되는 너비 width 를 지정하는 방법에 대해서 알아보겠습니다. 예를들어 아래와 같은 px 로 지정한 css 설정이 있다고 가정합니다. header content sidebar footer 기본만 정했으니 참고하시고 여기서도 타킷 ÷ 컨텍스트 = 결과 공식을 사용해서 width를 반응형으로 수정해보겠습니다. #wrapper { width: 96%; /* 가장큰것이 100%라고 가정하고 96%로 지정합니다. */ margin: 0 auto; } #header { width: 97.9166667%; /* 940 ÷ 960 */ margin: 10px; } #content { width: ..

퍼블리셔/css2012. 10. 26. 09:00

반응형 웹디자인을 적용하려면 제일 먼저 글꼴 크기를 정해줘야 한다. 예전에 방탄웹에서는 키워드를 사용하는 방법을 말했다. 이유는 키워드는 어떤 브라우져에서 봐도 동일하나는 결론이였죠. 하지만 이제는 환경이 좀 변했습니다. 바로 반응형이죠. 브라우져의 크기, 보는 기기의 크기에 따라 웹페이지가 변해야 한다는 점입니다. 그 조건에 가장먼저 적용해야 하는 것이 바로 글꼴의 크기 입니다. 글꼴의 크기에 따라서 컨텐츠의 크기도 달라지고, 여백도 달라집니다. 즉 모든 것이 달라지기 때문에 레이아웃이 변합니다. 기존의 px 로 되어 있는 크기를 em 으로 변환해야 합니다. 그런 어떤식으로 변환해야 올바른 것일까?? 특별히 다른 값을 명시하지 않는 한 모든 최신 브라우져는 디폴트 폰트 크기로 16px 를 사용합니다. ..

퍼블리셔/css2012. 10. 4. 08:30

어도비에서 css 속성들을 테스트 해볼수 있는 사이트를 오픈했는데 이제야 찾네요.....사실 추지호님이 알려주신 겁니다. ㅎㅎㅎㅎ 여하튼 여러가지 필터들을 미리보면서 테스트할 수 있는 곳입니다. http://html.adobe.com/webstandards/csscustomfilters/cssfilterlab/ 아래 그림을 보시면 Add Filter을 클릭하면 아래로 여러가지 필터들을 볼 수 있습니다. 필터를 클릭하면 왼쪽으로 속성을 조정할 수 있는 곳이 나오고 조정하면 우측에서 미리보기를 할 수 있습니다. 마찬가지로 맨 아래에는 코드를 미리볼 수 있습니다. 테스트 용으로 여러가지 사용해보시기 바랍니다.

퍼블리셔/css2012. 10. 3. 08:30

애니메이션 ( Animations) 이 CSS3 속성에 있습니다. 아직 완변한 문서와 기술들이 표준화 되지 않아서 많이 사용은 안하지만 영어권에서는 곧잘 사용합니다. 재미있게도 opera.dev 에서 둘이 테스트를 해봤습니다. 애니메이션 효과를 줬을때 CSS3 가 나은지? Jquery 가 나은지를.... 결과부터 말한다면 CSS3 의 한쪽 승입니다. 속도와 코드분량으로 봐서는 당연 CSS3의 승입니다. 하지만 우리에게는 익스플로러라는 큰 벽이 있습니다. ie8을 공식 지원하지 않겠다라는 기분 좋은 소식도 있지만...... 여하튼 CSS3는 익스플로러가 현재 지원하지 않습니다. 그래서 익스를 포함한 브라우져에 애니메이션 효과를 적용하려면 Jquery 를 사용해야만 합니다. 얼마만큼의 성능차이가 있는지? 스..

퍼블리셔/css2012. 10. 2. 14:23

제목이 거창하죠 ...ㅎㅎㅎㅎ css3 속성을 보면 아직 표준이 정해지지 않아서 각 브라우져마다의 접두사를 사용해서 코딩을 합니다. 원래 w3c에서 정해준 속성을 사용한다면 대략 아래와 같습니다. .box { background: linear-gradient(top, #e3e3e3 10%, white); } @-webkit-keyframes "slide" { 0% { left: 0; box-shadow: 10px 10px 10px black; } 100% { left: 50px; box-shadow: 5px 5px 5px black; } } 하지만 브라우져에서 지원을 하지 않죠. 나중에 지원할지는 몰라도 .... 그래서 각 브라우져의 접두사를 넣은 속성을 먼저 적어주고, 나중에 위의 속성을 적습니다. 그..

퍼블리셔/css2012. 8. 3. 06:00

이미지에 마우스를 올리면 캡션이 나타나는 애니메이션을 알아보겠습니다. 이런 기능은 예전에는 자바스크립트로만 가능했지만 이제 CSS3로도 그 기능을 할 수 있습니다. 어떤 기능인지 결과를 동영상으로 확인하겠습니다. 여기서는 -webkit 을 사용했습니다. 크로스 브라우징 코드를 만들어주는 사이트를 참고하세요. http://demun.tistory.com/2172 마크업은 아래와 같습니다. > 글 제목 첫번째 단락으로 이미지에 대한 설명글이 있으며, 여기는 첫번째 p 단락입니다. 제시카알바의 사진으로 눈의 피로도 없애보세요. 두번째 단락으로 위와 같은 이미지에 대한 설명글이 있는 곳으로, 여기는 두번째 p 단락입니다. 직접 코딩하면서 어떻게 변하는지를 볼 수 있게 동영상으로 담았습니다. 저도 버벅대서 챙피하..

퍼블리셔/css2012. 8. 2. 06:00

이미지를 가지고 transition 을 하는 방법이 있어 소개합니다. 마우스를 갖다대었을때 이미지가 변경이 되는 트랜지션을 알려드립니다. 먼저 앞에 보이는 이미지나 숫자가 있고(front), 뒤에 보이는 배경이(back) 있습니다. 처음에는 앞에 보이는 이미지가 보이고 마우스를 갖다 대었을때 뒤에 보이는 이미지가 보이는 형식입니다. 블로그에서 직접 시현하면서 보여드릴려고 클래스가 좀 복잡합니다. 이해해주시고 어떻에 적용되어지는지에 관심을 맞쳐서 보시기 바랍니다. 결과물이 어떤지 먼저 동영상을 보시고 글을 읽어주세요. 여기서는 -webkit 을 사용했습니다. 크로스 브라우징 코드를 만들어주는 사이트를 참고하세요. http://demun.tistory.com/2172 먼저 소스는 아래와 같습니다. 1 그럼 ..

퍼블리셔/css2012. 7. 21. 13:33

CSS 3 로 제작된 드롭다운 메뉴입니다. 뭐 워낙 좋은 드롭다운메뉴는 많이 있습니다. 그런데 하나같이 이미지가 있어야 하거나, 스크립트가 추가되거나 합니다. 또 부드럽게 하위메뉴가 펼쳐지면 좋은데 그냥 보이고, 감추는 형식입니다. CSS 3 에는 에니메이션이나 트렌스폼같은것이 있습니다. 적절하게 잘만 응용하면 좋은 드롭다운 메뉴가 나오는데요.... 저도 해보았지만 그닥 만만하지가 않군요. 적어도 ie8 버젼까지는 사용할만 해야 할것 같아서요... 이 메인메뉴의 포커스는 아래와 같습니다. 이미지가 없습니다. 자바스크립트가 없습니다. 하위로 펼쳐지는 드롭다운 메뉴입니다. 하위로 부드럽게 펼쳐집니다. 호환성은 ie8 까지는 잘 보입니다. ie7 이하로는 물론 보이기는 하나 약간 엉클어집니다. 뭐 구지 그것까..

퍼블리셔/css2012. 6. 27. 06:00

css transition 이란? 마우스를 클릭하거나 포커싱, 활성화 상태에 변화를 주는것으로, css 값의 변화가 부드러운 애니메이션입니다. 일단 간단하게 속성을 살펴보겠습니다. transition-property : 트랜지션할 속성. transition-duration : 트랜지션 지속 시간. transitin-timing-function: 지정한 시간동안이 트랜지션 속도 (타이밍 함수값) 타이밍 함수값에는 기본값인 ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier 등이 있습니다. 먼저 예를통해서 어떻게 변화되는지 보겠습니다. 마크업. CSS3 - Transition 간단하게 위와 같이 있다고 하고 css 로 설정을 해보겠습니다. 기본적으로 a ..