0110 Html, Css

오늘은 프로젝트 진행을 위해 포트폴리오 구성 연습을 했다
포트폴리오는 틀만 만들어놨는데 혼자 개인 공부를 하고 싶어서 나 혼자 인스타 외국 분들 하는 거 보고 벤치마킹하면서 공부하고 있다.
먼저 각자 사람끼리 누가 header 만들고 body 만들고 foot 만들기를 정하고 나는 header를 만들었다. 사진으로 봐서는 별로겠지만 css를 통해 transition을 줬다.

메뉴바 Services, Projects, About들은 마우스를 올리면 radius를 줘서 동그란 모양으로 나오게 했고 흰색에서 하늘색으로 바꾸게 했다.

.nav_links li a:hover{
    color: #eee;
    border-radius: 50px;
    padding: 15px;
    background-color: rgba(0, 136, 169, 0.8);
}

그 옆 아이콘들은 예쁘게 배치 시켜놓고!

.icon-wrap{
    display: flex;
    list-style: none;
}
.icon-wrap .icon {
    position: relative;
    border-radius: 50%;
    padding: 15px;
    margin: 10px;
    width: 50px;
    height: 50px;
    font-size: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

마우스를 올리면 그 아이콘 특성에 맞는 색을 주기 위해 엄청 찾으려고 공부했다.. 여기에서 시간 제일 많이 허비했다.. 그림자도 줘보고 linear-gradient도 줘봤는데 너무 안 예쁜 모양과 색감이 나오길래 더 검색해봐서 conic-gradient를 알아냈다! 엄청 뿌듯했는데 ㅎㅎ..

.icon-wrap .icon:hover span, .icon-wrap .icon:hover .tooltip {
    text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.1);
}
.icon-wrap .google:hover, .icon-wrap .google:hover .tooltip, .icon-wrap .google:hover .tooltip::before {
    background: conic-gradient( #EA4335, #4285F4, #34A853, #FBBC05, #EA4335);
    color: #ffffff;
}
.icon-wrap .instagram:hover, .icon-wrap .instagram:hover .tooltip, .icon-wrap .instagram:hover .tooltip::before {
    background: #E4405F;
    color: #ffffff;
}
.icon-wrap .github:hover, .icon-wrap .github:hover .tooltip, .icon-wrap .github:hover .tooltip::before {
    background: #333333;
    color: #ffffff;
}

결과는?

이렇게!!!

요롷게!!! 만들었다.. 알면 알수록 신기하고 재밌는 html, css.. 얼른 더 잘하고 싶고 더 배우고 싶은 욕구가 뿜뿜이다! 오늘 일기 끗!