[HTML][CSS] css가상요소 이용해서 구분 bar 넣기(로그인창 옵션)

0. 로그인창 옵션

따라 만들 창

 

>> 전에 포스팅했던 무신사 로그인 창 옵션 부분을 가상요소를 이용해서 다시 만들어보았습니다.

 

1. html

 

    <div class="util_menu">
        <ul>
            <li><a href="#">회원 가입</a></li>
            <li><a href="#">아이디 찾기</a></li>
            <li><a href="#">비밀번호 찾기</a></li>
        </ul>
    </div>

> util_menu 클래스를 만들어 옵션 넣어줌.

 

 

2. css (전체 코드는 아래에 따로)

 

.util_menu{
    width: 450px;
    height: 50px;
    background: #f1f1f1
}

> .util_menu 가로,세로를 지정하여 만들기 시작 

 

.util_menu>ul>li{
    float: left;
    margin-left: 30px;
    position: relative;
}

> li- float: left;를 주어 가로로 배치한다.

   position: relative; 준 이유- bar를 가상요소로 주었을 때 li를 기준으로 bar의 위치를 움직여 정하기 위해서.

 

.util_menu>ul>li:first-child::after{
    content:'';
    width: 1px;
    height: 11px;
    background: rgb(174, 182, 193);

    position: absolute;
    left: 75px;
    top: 6px;
}

> li 3개 중 첫번째 li와 두번째 li에만 bar를 넣어야 하기 때문에 :first-child, :nth-child(2) 를 사용한다.

- ::after로 태그의 뒤에 넣도록 한다.

- content 속성으로 기본값을 지정하고('',"" 둘다 가능) width,height,background로 직접 bar를 만든다.

- position: absolute; 를 주어 bar를 li를 기준으로 위치를 조정한다.

 

3. css 전체 코드

 

*{margin: 0;padding: 0;}
ul{list-style-type: none;}
a{text-decoration: none;}

.util_menu{
    width: 450px;
    height: 50px;
    background: #f1f1f1
}

.util_menu>ul>li{
    float: left;
    margin-left: 30px;
    position: relative;
}

.util_menu>ul>li>a{
    font-size: 14px;
    font-weight: bold;
    color: rgb(174, 182, 193);
}

.util_menu>ul>li:first-child::after{
    content:"";
    width: 1px;
    height: 11px;
    background: rgb(174, 182, 193);
    position: absolute;
    left: 75px;
    top: 6px;
}

.util_menu>ul>li:nth-child(2)::after{
    content:"";
    width: 1px;
    height: 11px;
    background: rgb(174, 182, 193);
    position: absolute;
    left: 90px;
    top: 6px;
}

 

4. 결과물

 

결과물

> 배경만 흰색으로 맞추면 됨!