본문 바로가기

웹(IT) 정보/css14

CSS3 Transition 트랜지션 변형의 시작 css3 트랜지션속성이 있기전에는 웹페이지 안에서의 동적인 부분은 adobe flash가 담당하고 있었습니다. 하지만 구글크롬이나 애플사에서 플래쉬를 지향하기 시작했습니다. 이유인 즉슨 보안관련문제도 있으면서 웹표준에 어긋나고 모바일에 최적화 되지 못하기 때문입니다. 사실 플래쉬는 동적인 요소에 불과했지 각종 메뉴나 사이트에 사용하는건 적합하지 못했던건 사실입니다. 그래서 동적인 요소를 단지 이 트랜지션이나 애니메이션 CSS만으로 커버가 됐다는 사실입니다. 시대의 흐름인 만큼 더욱 간소화되고 더욱 쉽고 정교해졌습니다. 우선은 트랜지션에관해 먼저 포스팅해보겠습니다. 트랜지션은 지정한 속성에서 또다른 지정값(시간) 동안 부드럽게 변경이 가능합니다. 왜 예를 들어 버튼값이 기본 블랙이고 마우스 오버했을시에 그.. 2017. 8. 8.

CSS position 요소의 위치정의 CSS position 요소의 위치정의각 요소들과 객체들을 코딩하다보면 position을 적절히 잘 사용해야 할 때가 많습니다.일단 어떠한 속성들이 있는지 먼저 보겠습니다.positionstatic - 기본값으로 순서그대로 표현이 됩니다.absolute - 정적인 요소가 아닌 상대적으로 배치가 됩니다. 마치 레이어처럼 혼자 떠다니는 요소가 됩니다.relative - 상대적으로 배치되면서 CSS의 영향을 받습니다.fixed - 브라우저에 영향을 받으며 크기에 상관없이 위치가 고정이됩니다.inherit - 부모요소에서 영향을 받습니다. 부모요소 그대로 css의 영향을 받습니다. 포지션css의 중요 핵심 포인트는 3가지 정도입니다. absolute, relative, fixed입니다.absolute는 디자인에.. 2017. 8. 7.

CSS3 nth-child 요소 개별적용 정렬된 요소의 css에서 개별 정의가 가능한 nth-child 입니다. 특정 순서에 따른 정의가 가능하며 여러가지 방법을 통하여 각 요소마다 개별적으로 정의가 가능합니다. 1. nth-child(숫자)로 순서 정의를 내립니다. html nth-child(1) nth-child(2) nth-child(3) nth-child(4) nth-child(5) css li:nth-child(1) {background:#FFF} li:nth-child(2) {background:#F00} li:nth-child(3) {background:#00F} li:nth-child(4) {background:#FF0} li:nth-child(5) {background:#0F0} nth-child(1) nth-child(2) n.. 2017. 8. 7.

CSS3 Colors(RGBA) 컬러와투명도 CSS3 Colors 컬러와투명도 (color and opacity) CSS3는 색상 영문이름(white), 16진수(#FF0000), RGB색상(255,255,255)을 지원합니다. CSS3를 지원하지 않는 브라우저는 당연히 사용하지 못합니다. 크롬 4.0버전이상 익스플로어 9.0이하는 아무리 해당 CSS를 입력한다고 한들 CSS자체를 인식하지 못하기때문에 아쉽지만 브라우저 업데이트하는 방법밖에는 없습니다. 구형 익스8같은경우는 해킹요소나 지원하지 않는 속성들이 많아 사용하지 않는 추세입니다. 그래도 접속통계같은걸 보면 아직도 있긴합니다. 저는 보통 디자인을 할때 16진수로 외워서 사용하곤 합니다. 기본적인 컬러값들을 인식하고 나면 어느정도 값만 변경해주면 되기때문인데요. rgb도 그렇게 어렵지는 않습.. 2017. 8. 3.

CSS3 Button-스타일로 버튼만들기 인터넷 강국 대한민국은 정말 많은 웹사이트가 있습니다. 하지만 그만큼 전문성을 띠지 못하는 저품질 사이트도 굉장히 많죠. 웹표준에 어긋나는 부분 또 웹접근성에 어긋나는 부분을 지키지 않는 사이트들이 많습니다. 버튼같은 경우에는 사용자의 UI가 직관적으로 보여야 하기때문에 디자인된 이미지로 사용하여 링크로 거는 형태가 많았습니다. 한참 아이폰 4시절쯤에 IOS에서 사용한 반반 그라데이션컬러 버튼이 유행하기도 했지요. 지금 IOS에서도 버튼에는 단순하게 원컬러만 사용하고있습니다. 더욱 사용자들이 혼란을 일으키지 않고 심플하면서도 깔끔하기 때문입니다. 디자인도 트렌드가 있듯이 지금은 단순명료하게 깔끔하게 가는 디자인이 정답이라고 생각합니다. 이미지 버튼일경우 포토샵에서 디자인해야하고 컷팅해야하고 또 이미지를 .. 2017. 7. 30.

CSS3 Media Queries 미디어쿼리-반응형페이지만들기 요즘은 PC,태블릿,모바일등 각종기기를 통한 인터넷접속이 일상생활화가 되어가고 있는가운데 아직까지도 PC버전 모바일버전 따로 작업하는 사이트, 쇼핑몰들이 너무나도 많습니다. 물론필요에 의해서 따로 작업하는게 도움이 될 때도 있습니다만. 작업자에게는 너무나도 큰 고통과 두번의 작업을 거쳐야하는 불편함이 많습니다. 그래서 모든 기기에 빠르게 맞춰 대응할 수 있도록 만들어 진것이 미디어쿼리입니다. 물론 미디어쿼리도 반응형을 생각해서 디자인해야하고 CSS도 복잡해 질 수 있다는 단점이 있지만 PC따로 MOBILE따로 작업하는것보단 훨씬 빠르고 간편하다는 것입니다. 먼저 해상도에대해 간단하게 짚고넘어가보겠습니다. 크롬 요소검사쪽으로가면 위와같이 해상도 탭이 있는데요. 다음과 같은 종류를 나타냅니다. 4K-2560.. 2017. 7. 30.

이전 1 2 3 다음

티스토리툴바