주섬주섬 코딩, 소소하지만 꾸준히 쌓아가는 개발 기록...

CSS3 란 (Cascading Style Sheets) 차세대 HTML5 제안과 함께 CSS3라는 이름의 새로운 스타일이 나왔다. 차세대 웹 개발을 위한 새로운 표준이다. 최신버전의 CSS 이며 기존 CSS2.1에서 부족한 부분을 보완하고 개선한 버전이다. [ 예시 ] css3 장점 - 이미지를 사용하지 않아도 되기 때문에 웹 페이지의 데이터량을 절약할 수 있다. 다중 컬럼 레이아웃(Multiple column layout) 컬럼 갯수 정의하여 다수의 컬럼(세로단)에 텍스트를 배치할 수 있다. column-count 컬럼의 갯수를 직접 지정. 컬럼의 너비는 컬럼 갯수 기반으로 자동으로 결정(table) column-width 각 컬럼의 너비를 지정함으로써 컬럼의 갯수는 자동으로 결정되도록한다. colu..

CSS를 이용해 객체 가운데 위치하기! 객체를 가운데에 두는 방법에는 여러 개가 있다. calc를 기억해두려는 목적으로 글을 쓰기 시작했는데, 내가 작업하면서 써봤던 방법을 작성해두려고 한다. (flex-box는 논외) 조건은 부모 객체의 가운데에 위치시키기다. HTML CSS.wrapper{ position:relative; width:400px; height:400px; background-color:#cacaca;}.popup{ position:absolute; top:50%; left:50%; margin-top:-75px; margin-left:-75px; width:150px; height:150px; background-color:pink;} 이런 식으로 영역의 50%를 top, left 내..

CSS3 Selector :nth-child(n+n)를 알아보자 작업 중에 nth-child(n + 1) 이런 태그를 봤다.셀렉터는 자주 쓰던 것만 써서 봤다가도 까먹고는 하는데, 이번엔 까먹지 말아야지. :nth-child(1n+1);배수로 선택하기 예시를 봐보자 HTMLbox1box2box3box4box5box6box7 box8box9box10box11box12box13box14 CSSp{ margin:0; padding:0; }.box{ width:100px; height:100px; float:left; border:1px solid #ccc; border-left:0; box-sizing:border; color:#ccc;}.box:first-child{ border-left:1px solid ..

크롬에서만 확인했고 타 브라우저 안될 수 있습니다. (ie 하위는 당연히 안됩니다.) 비율을 맞춘 이미지가 준비물로 필요합니다. 제가 사용한 이미지는 무료 icon 사이트에서 가져왔고 찾아보면 많습니다. (출처 http://www.freepik.com) 저는 step을 3등분해서 보여줄거라 다운로드 받은 이미지를 포토샵으로 비율을 맞춰줬습니다. 사용한 이미지 예시↓ CSS .hands{ // 이건 애니메이션 보여지는 크기 width:125px; height: 175px; // 연결된 이미지 bg로 깔고 이미지 크기 정함. background:url('/images/hands2.jpg')no-repeat; background-size:384px; // 0.5초동안 step 3으로 나누어서 무한 실행 ani..