[CSS] 3D 정육면체 만들기

3D 정육면체를 만든다.

See the Pen VaJrpx by 소지훈 (@sogoonii) on CodePen.

만드는 과정.

See the Pen QNXyPm by 소지훈 (@sogoonii) on CodePen.

다른 각도에서 본 모습.

See the Pen QNRzeB by 소지훈 (@sogoonii) on CodePen.

사용한 속성

• perspective: 500px;
• perspective-origin: 50% 50%;
• transform-style: preserve-3d;
• transform: rotateY() translateZ();

[CSS] 키프레임과 애니메이션을 활용하여 로딩 만들기

키프레임을 만들고 animation-delay 속성을 이용해 시간차를 준다.
animation-delay 는 양수/음수 모두 사용할 수 있다.

See the Pen GZYZLv by 소지훈 (@sogoonii) on CodePen.

See the Pen mPzPNM by 소지훈 (@sogoonii) on CodePen.

transform: rotate를 이용해 회전을 시키는 방법이다.
회전을 시키는 것보다 도형을 그리는게 키포인트!

See the Pen LNgZPZ by 소지훈 (@sogoonii) on CodePen.

그라데이션 호(arc)를 이용한 로딩을 만든다.

See the Pen yORJBw by 소지훈 (@sogoonii) on CodePen.

그라데이션 호(arc)를 그리는 과정이다.

See the Pen dMgprL by 소지훈 (@sogoonii) on CodePen.

See the Pen wGYzZW by 소지훈 (@sogoonii) on CodePen.

See the Pen ZWqpZr by 소지훈 (@sogoonii) on CodePen.

See the Pen xVyEeQ by 소지훈 (@sogoonii) on CodePen.

하나의 원을 가리는 두개의 네모박스가 서로 다르게 움직여 새로운 효과를 만들어 낸다.

See the Pen yORaVV by 소지훈 (@sogoonii) on CodePen.

See the Pen RaeGyz by 소지훈 (@sogoonii) on CodePen.

transform: rotate를 이용해 각도를 돌리고,  translateX로 같은 수치만큼 이동시키면 아래와 같이 점을 배치할 수 있다. 여기선 rotate와  translateX의 순서가 중요하다. (rotate,  translateX 순으로 적용)

See the Pen dMgpNq by 소지훈 (@sogoonii) on CodePen.

cubic-bezier를 이용하면 좀 더 재미있는 효과를 만들 수 있다.

See the Pen reoaBV by 소지훈 (@sogoonii) on CodePen.

[CSS] 엘리먼트 개수를 알아낼 수 있는 선택자

CSS Selector 중 :nth-child와 :nth-last-child를 이용하면, 엘리먼트의 개수에 따라 스타일을 다르게 지정할 수 있다. 첫 번째 엘리먼트가 뒤에서부터 몇 번째 위치하는지 알면 전체 개수를 알 수 있으며,  :nth-child(1):nth-last-child(3)은 총 3개의 엘리먼트가 있다는 것을 나타낸다.

See the Pen vKarzZ by 소지훈 (@sogoonii) on CodePen.

<ul>
    <li>첫번째</li>
    <li>두번째</li>
</ul>

<ul>
    <li>첫번째</li>
    <li>두번째</li>
    <li>세번째</li>
</ul>

<ul>
    <li>첫번째</li>
    <li>두번째</li>
    <li>세번째</li>
    <li>네번째</li>
</ul>

<ul>
    <li>첫번째</li>
    <li>두번째</li>
    <li>세번째</li>
    <li>네번째</li>
    <li>다섯번째</li>
</ul>

<style>
ul {
    overflow: hidden;
    list-style: none;
    padding: 0;
}

li {
    float: left;
    padding: 10px;
    border: 1px solid #000;
    text-align: center;
    box-sizing: border-box;
}

li:nth-child(1):nth-last-child(2),
li:nth-child(1):nth-last-child(2) ~ li {
 width: 50%;
}

li:nth-child(1):nth-last-child(3),
li:nth-child(1):nth-last-child(3) ~ li {
    width: 33.333%;
}

li:nth-child(1):nth-last-child(4),
li:nth-child(1):nth-last-child(4) ~ li {
    width: 25%;
}

li:nth-child(1):nth-last-child(5),
li:nth-child(1):nth-last-child(5) ~ li {
    width: 20%;
}
</style>

[CSS] 체크박스를 활용한 ON/OFF 버튼 만들기

인접 형제 선택자('+')를 활용하여 체크박스 뒤에 오는 <label>에 스타일을 적용하는 방법이다. 체크박스의 checked 상태에 따라 스타일을 다르게 지정하면, 손쉽게 ON/OFF 버튼을 만들 수 있다. 이 방법은 라디오 버튼에도 적용이 가능하다.

See the Pen yJxqAK by 소지훈 (@sogoonii) on CodePen.

<style>
input[type="checkbox"] {
    position: absolute;
    visibility: hidden;
}

label {
    display: block;
    position: absolute;
    width: 60px;
    height: 34px;
    border-radius: 17px;
    background-color: #ddd;
    transition-duration: 0.2s;
}

label span {
    position: absolute;
    left: 3px;
    top: 3px;
    z-index: 1;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: #fff;
    transition-duration: 0.2s;
}

label:before,
label:after{
    position: absolute;
    top: 0;
    width: 34px;
    font-size: 11px;
    line-height: 34px;
    color: #fff;
    text-align: center;
}

label:before {
    left: 0;
    content: 'ON';
}

label:after {
    right: 0;
    content: 'OFF';
}

input:checked + label {
    background-color: #00c73c;
}

input:checked + label span {
    transform: translateX(26px);
}
</style>

<input type="checkbox" id="checkbox" checked>
<label for="checkbox"><span></span></label>

웹 접근성을 고려한 콘텐츠 숨기기 방법

display: none 과 visibility: hidden 둘 다 콘텐츠를 숨길 수 있지만, 스크린 리더로도 읽을 수 없기 때문에 접근성에 문제가 있다. 화면에는 보이지 않으며, 스크린 리더가 읽는 데에는 문제가 없는 clip 속성을 사용해 보자. clip 속성을 사용한다고 무조건 스크린 리더가 읽을 수 있는 것은 아니다. 스크린 리더는 width, height 사이즈가 0인 엘리먼트의 콘텐츠를 읽을 수 없으니, 엘리먼트의 사이즈는 최소 1px 이상으로 적용해야 한다.

예제) http://codepen.io/sogoonii/pen/JKaaRP


<style>
/* 접근성에 문제가 있음 */
.sr-only {
    display: none; /* 화면에 보이지 않고, 스크린 리더도 읽어주지 않음 */
}

.sr-only {
    visibility: hidden; /* 화면에 보이지 않고, 스크린 리더도 읽어주지 않음 */
}

/* 접근성에 문제 없음 */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    clip: rect(0 0 0 0);
    overflow: hidden;
}
</style>

<div class="sr-only">화면에 보이지 않지만, 스크린 리더로 읽을 수 있습니다.</div>

[CSS] 한 줄 말줄임과 두 줄 이상 말줄임 처리

한 줄 말줄임과 두 줄 이상 말줄임을 구현할 때 필요한 최소 룰셋이다. 두 줄 이상 말줄임을 PC에 적용할 땐 지원 브라우저를 꼭 확인하자. 지원 브라우저는 http://caniuse.com/#search=line-clamp에서 확인할 수 있다.


<style>
/* 한 줄 말줄임 */
.ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 두 줄 이상 말줄임 */
.ellipsis {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2; /* 라인 수 */
    -webkit-box-orient: vertical;
}
</style>