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

3D 정육면체를 만든다.

만드는 과정.

다른 각도에서 본 모습.

사용한 속성

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

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

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

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

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

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

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

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

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

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

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

<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 버튼을 만들 수 있다. 이 방법은 라디오 버튼에도 적용이 가능하다.

<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>