HTML & CSS3 썸네일형 리스트형 CSS - Gradient CSS - Gradient 보통 웹 페이지의 텍스트는 검은색 아니면 배경에 따라 흰색 또는 단색계열로 많이 지정한다. 그라데이션 효과를 많이 사용하진 않지만 그렇다고 막 쓰기도 힘든것이 호환성?문제가 있다 브라우저 버전을 항상 최신으로 하는 것이 아니기 때문에 일부 하위버전에서는 적용이 안되는 큰 단점이 있다. 그라데이션은 css background 속성에 linear-gradient, radial-gradient 값으로 줄 수가 있다. 대충 포토샵을 사용해 봤으면 저 두개의 값이 어떤 효과를 주는지는 짐작이 갈거라고 생각이 든다. linear 는 세로,가로 형태로 그라데이션을 표현하고 radial은 원형 형태로 효과를 줄 수 있다. 1. 그라데이션은 위와 같은 형태로 효과를 줄 수 있다. 가로,세로 방.. 더보기 CSS3 - animate CSS3 - 햄버거 Icon(animate) 이번에 작업을 해보면서 animation요소에 대해서 공부를 좀 했는데 역시 자바스크립트는 겸손하게 사용해야되나보다... 다른 블로그분이 정말 잘 정리해주고 예제도 만들어주셔서 잘 활용해서 예전에 만든 ham방식으로 만들어 보았다. 더보기 css - background-position을 통한 움직임 ㅋㅋcss ㅂㄷㅂㄷ 너무 어려워... 스타벅스코리아:http://www.istarbucks.co.kr/index.do처음시작부분에 찻잔이나오고 그 다음 벚꽃이 떨어지는게 표현되어있다 분석해본결과 백그라운드-포지션 값이 계속 올라간다. 하지만 처음에 해봤지만 그림이 후루루루루루룩~ 지나간다... 슈밤 이게뭐지... 왜 안되지 하다가 역시 개발자는 의자에 엉덩이 비빈시간으로 승부한다. 링크:http://creatijin.dothome.co.kr/project/css/bg-position/sakura/sakura.html 링크:http://creatijin.dothome.co.kr/project/css/bg-position/bg/fosition.html 이미지들은 각 사이트에서 가지고와서 만들어보았다. 내가 .. 더보기 css - transition(icon) 이번에 만들어본건 금방 만들주 알았는데... 거의 하루종일 시간이 들어갔다... 모바일에서 많이보이는 햄버그 메뉴(3자 바)를 눌렀을때 X모양으로 변하는걸 많이 봤는데 svg가 아닌 그냥 css,animate로 움직이는것도 있길래 괜찬다 생각이 들어서 만들어보기로 했다. 처음에는 animate로 rotate를 주면될주 알고 했는데... rotate라는 속성은 없더라 그래서 구글링 시작... 찾아보니깐 transform으로 rotate하던지 아니면 jQuery패치? 를 해야 가능한거같더라...젠장 그래서 또 계속 검색하다가 새벽2시쯤... 하코사의 힘을 받아서 도움을 청했다. 햄버그에서 X로 만드는건 해결했는데 X를 햄버그로 다시 만드는데 또 문제 봉착... 각각 이벤트 사이에 딜레이를 줄라니깐 골이아프다.. 더보기 CSS - 크기 단위 오늘은 효과나 이런것 보다 크기 단위에 대해서 공부해보자보통은 픽셀을 많이 사용하는데 px말고도 여러가지 있다.가변 크기 단위 - 상대적인 크기를 지니는 단위emem은 요소에 지정한 글자 크기 단위, em단위를 쓰면 부모에게 지정한 글자 크기를 기준으로 배율을 조정[1em은 부모의 1배 2em은 부모의 2배]exex는 요소에 지정한 font-family에 의존한다.rem이 단위는 이해가 잘 안되서 여기저기 찾아본 결과 html에 지정된 크기를 기준으로? 상대적인 값을 가지게 된다고 한다.(사실 뭔소린지 잘 모르겠다~)IE8 이하는 인식을 못해서 사용에 주의해야 될꺼 같다고정 크기 단위 - 부모 또는 기타 요소들에 영향을 받지 않고 크기를 유지하는 단위in인치 (1in = 25.4mm)px1px = 모니터.. 더보기 CSS - Outline 요즘 CSS에 심취해있기 이것저것 찾아보다가 outline을 발견했다 ㅋㅋ 일딴 눈으로 보고 설명하는게 빠르기 때문에 결과는 위와 같다.dotted : 점선 테두리dashed : 짧은 선들의 연속solid : 실선으로 지정groove : 테두리가 안으로 파진것처럼 보임ridge : 테두리가 밖으로 튀어나온것처럼 보임inset : 테두리를 포함한 컨텐츠 영역이 안으로 들어간것처럼 보임outset : 테두리를 포함한 컨첸츠 영역이 밖으로 튀어나온것처럼 보임double : 선이 두줄로 보임auto : auto많이 쓸꺼같진 않지만 그래도 알고있으면 좋을꺼같다. 브라우저에서도 다 지원하고 익스는 8부터 지원하기 때문에 괜찬아 보인다. 더보기 CSS - box-sizing 요즘 자바스크립도 열심히하지만CSS도 관심이 생겨서 이것 저것 찾아보던중box-sizing 이라는걸 보게되었는데레이아웃 잡을때 매우 유용할꺼같다.box-sizing의 값은 총 4가지다.content-box : 콘텐트 영역을 기준으로 크기를 정함border-box : 테두리를 기준으로 크기를 정함initial : 기본값inherit : 부모 요소의 속성값을 상속위에는 좀 딱딱하게 설명했지만 쉽게 설명하면1번은 보통 우리가 설정을 안하고 했을때랑 똑같다2번이 중요한데 padding과 border의 크기를 width와 height 설정한 값에 포함한다?백번 설명보다 그냥 눈으로 보는게 빠르다.3,4번은 다른 요소에서도 볼 수 있는거기 때문에 설명은 생략하겠다. 1번 박스는 100px크기 안에 padding 과.. 더보기 CSS - transfrom:matrix 이번에는 CSS에 대해서 좀 알아볼까한다.리뉴얼된 페이지나 블로그게시물을 보면마우스를 올리면 사진이 확대되는 이벤트를 흔히 볼 수 있다.링크:http://notskorea.com/index.nots위에 사이트를 가보면 슬라이드 부터 배너까지 확대 이벤트로 되어있다.간단해보이면서도 움직임을 줘서 눈에 더 잘들어오는거 같다. 사진이 안나와서 red로 넣어보긴했는데 그냥 이런 이벤트구나 정도 보면될꺼 같다. 링크:http://newlex0124.cafe24.com/test/css/matrix.html matrix를 사용하고 이벤트는 완성했는데 확실히 이해는 잘 안간다.역시 찾아볼땐 구글링이지... matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translate.. 더보기 이전 1 2 3 다음
