빨간 점 만들기

수업을 듣다 저 톱니바퀴 아이콘위에 빨간 점을 만들라는 숙제가 생겨서 빨간점을 만들어보았다.

 

 

 

1. point.css 만들어서 빨간 점 만들기

.point {
    background-color: tomato;
    width: 5px;
    height: 5px;
    border-radius: 2.5px;
    position: absolute;
    right: -6px;
    top: -7px;
}

2. style.css 에 방금 만든 point.css 추가하기

@import "components/point.css";

3. 톱니 바퀴 아이콘 오른쪽 위에 위치 시키기 위해 class="point" 입력

        <header class="screen-header">
            <h1 class="screen-header__title">Find</h1>
            <div class="screen-header__icons">
                <span><i class="fas fa-search fa-lg"></i></span>
                <span>
                    <i class="fas fa-cog fa-lg"></i>
                    <div class="point"></div>
                </span>
            </div>

4. position: relative로 위치 설정

.screen-header__icons span {
    margin-left: 25px;
    position: relative;
}

 

 

 

완성!