Menu
Coddy logo textTech

아이콘 - I

Coddy의 슬라이더 | 프론트엔드 프로젝트 코스 레슨 — 23개 중 13번째.

challenge icon

챌린지

쉬움

.wrapper i (아이콘) 선택자를 대상으로 다음을 설정하세요:

 

1. positionabsolute로 설정합니다.

2. top50%로 설정합니다.

3. heightwidth를 50 픽셀로 설정합니다.

4. 원하는 배경색을 설정합니다.

5. 테두리 반경(border radius)을 50%로 설정합니다.

6. 원하는 대로 박스 그림자(box shadow)를 설정합니다.

7. transform을 translateY(-50%)로 설정합니다.

8. cursorpointer로 설정합니다.

9. 원하는 글꼴 크기(font size)를 설정합니다 (아이콘의 크기가 변경됩니다).

10. 텍스트를 중앙으로 정렬합니다 (가로 중앙 정렬).

11. line-height50px로 설정합니다 (세로 중앙 정렬).

12. transition을 transform 0.1s linear로 설정합니다.

직접 해보기

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
    <body>
        <!-- Write HTML code here -->
        <script src="script.js"></script>
    </body>
</html>

슬라이더 | 프론트엔드 프로젝트의 모든 레슨