/* 홀수 */ li:nth-child(odd) { ... } /* 짝수 */ li:nth-child(even) { ... } /* 3의 배수 */ li:nth-child(3n){ ... } /* 8번째 이후부터 모두 */ li:nth-child(n+8) { ... } /* 1번째부터 5번째 까지 */ li:nth-child(-n+5) { ... } /* 10번째부터 15번째 까지 */ li:nth-child(n+10):nth-child(-n+15) { ... } 기본적인 부분은 알고 있었으나 마지막 두개는 신박했다. 역시 css를 잘 알 수록, 작업이 쉬워진다. 추가적으로 무조건 알아둬야할 css 선택자. https://code.tutsplus.com/tutorials/the-30-css-selecto..

이번에 신규 페이지를 제작하며 갤러리를 만들어야 했는데, 다양한 라이브러리를 찾아보다가 기존에 자주 사용하던 swiper를 이용하여 갤러리를 구성할 수 있다는 걸 깨달았다. 먼저 예시를 보자면 다음과 같다. ( 예제 화면이 작게 보인다면 아래쪽 0.5x 클릭하여 확인하기 ) See the Pen swiper 3개 연동하기, thumbnail swiper and layer popup by Gia (@gia-world) on CodePen. 구성은 3개의 슬라이더로 되어있다. 메인 사진 슬라이더, 썸네일 슬라이더, 레이어 팝업 슬라이더. 메인 슬라이더를 넘기면 썸네일도 함께 넘어가고, 썸네일 슬라이더를 넘기면 메인도 같이 돌아간다. 또한 메인 사진을 클릭하여 팝업을 띄울 경우에도 메인 슬라이더와 연동이 되어..

보통 요소들을 수평정렬할 때 세가지 방법을 사용한다. 1. flex 제일 쉽고 간편하다. 하지만 일부 브라우저에서 제한적으로만 사용가능하다. 곧 IE가 사라진다면 최적의 방법. 2. float 예전에 많이 구현하던 방법으로, 요소 자체를 띄워버린다. float을 사용하면 clearfix 등으로 한번 보완을 해줘야하는 단점이 있고, 부작용이 꽤 있어 요즘은 선호하지 않는 방식. 3. inline-block 네비게이션을 만들 때 자주 쓰는 사용된다. 요소를 inline화시켜 수평정렬한다. 오늘은 인라인블럭으로 레이아웃 잡을 때의 주의점에 대해 포스팅해보려고 한다. 많은 분들이 사용하는 방법이지만, 주의해야할 점을 인지하지 못하는 경우가 많다. 예제를 보며 확인해보자. (아래의 코드펜은 바로 수정이 가능하니 ..

포토샵 drop shadow를 css로 표현하기 ( feat. xd로 css 코드 보기 ) 퍼블리셔가 시안을 받을 때는 여러가지 툴이 있겠지만, 대부분은 psd로 받는다. 물론, 디자이너가 xd를 쓴다면 더할 나위 없다. XD 위의 사진처럼 개발을 선택하고 링크 만들기를 누르면 웹으로 연동되는 링크가 생성되는데, 거기서 디자이너가 만든 모든 요소들을 css로 확인할 수 있게 된다. 바로 이렇게! 지금은 예시로 간단한 작업물을 가져와서 확인했지만, 네 모서리에 border-radius를 각각 다르게 준 박스라던가 다양한 그림자효과를 이용했다면 css 작업이 훨씬 수월해진다. 특히 그라데이션을 넣은 경우에도 그 수치가 바로 계산되어 나오기 때문에 xd로 시안 받을 때는 공수가 훨씬 줄어든다. 포토샵 포토샵으..

미디어쿼리 css 사용 방식 혼자 포트폴리오 작업할 때 쓰던 쿼리 방식은 다음과 같았다. @mixin responsive($media) { @media screen and (max-width:$media) { @content; } } .inner { width: 1200px; margin: 0 auto; @include responsive(1200px) { width: 100%; } } 이런 식으로 따로 반응형 작업에 대해서 빼지 않고 각 element 밑에 추가하는 방식이었다. 물론 breakpoint 도 정의해두었지만 필요할때는 정해진 분기 이외에 따로 값을 지정하기도 했다. 이 방법은 내가 그냥 만들면서 편리한 방법이었다. 구조가 복잡해질수록 클래스명을 중복해서 작성할 필요가 없었으니까. // _r..

IR( image replacement ) 대체 텍스트 for 웹접근성. img 태그 내의 alt 속성과 같다. 하지만 백그라운드이미지로 넣는 경우에는 대체텍스트가 필요. text-indent:-9999px 등 여러가지 방법이 있으나 최신 방법은 아래와 같다. (H5BP-html5 boilerplate, 부트스트랩에서 사용중) .sr-only { position: absolute; /* position: absolute/fixed 에서만 clip 속성 작동 */ margin: -1px; /* 부트스트랩에선 안씀 */ width: 1px; height: 1px; padding: 0; border: 0; white-space: nowrap; overflow: hidden; /* overflow: visibl..