코코무 : 코딩에 코딩을 무는 디자인

css transition을 이용하여 형광펜으로 밑줄 긋는 듯한 애니메이션 주기
다양한 색상으로 활용가능, height값을 조정하여 밑줄을 긋는 애니메이션으로 활용이 가능하다.

<div class="nav">
 <a href="#">MENU1</a>
 <a href="#">MENU2</a>
 <a href="#">MENU3</a>
 <a href="#">MENU4</a>
</div>

✅html
1) <div> 안에 <a> 태그를 이용하여 nav를 제작한다

.nav a {
    color: white;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    margin-left: 65px;
    position: relative;   /* 형광펜효과 */
    display: block;   /* 형광펜효과 */
}
.nav a::after{
    content: "";
    position: absolute;
    width: 0%;
    height: 50%;
    bottom: 25%;
    left: -10%;
    z-index:-1;
    background: #ffffff;
}
.nav a:hover::after{
    width: 120%;
    transition: width 0.5s;
}
.nav a:hover{
    color:black;
    z-index: 2;
}

✅css
1-1) <a> 태그 메뉴 속성을 바꿔준다 (color, font, margin 등)
1-2) transition효과를 위해 position을 설정해준다
1-3) transition효과를 위해 <a> 태그는 inline요소이기 때문에 block요소로 설정해준다

2-1) <a> 태그에 ::after가상 요소를 설정해준다
2-2) content: “” 공란으로 작성
2-3) position :absolute 값을 준다
2-4) width 0% 값을 주고 보이지 않게 한다
2-5) height 값을 조정한다 (height 값이 클수록 형광펜의 범위가 넓어짐)
2-6) bottom 값을 조정한다 (부모를 기준으로 바닥에 붙는 정도)
2-7) left 값을 조정한다 (-값을 준 이유는 해당 메뉴보다 형광펜이 더 크게 보이게 하기 위해)
2-8) z-index값을 - 값으로 a보다 뒤에 보이게 한다
2-9) 원하는 형광펜 색을 배경색으로 지정해준다

3-1) <a> hover시 변화할 수 있도록 hover에 가상 요소 after를 설정해준다
3-2) widht 값을 준다 ( 100%보다 좀 더 크게 준 이유는 형광펜 길이가 메뉴보다 더 크게 보이게 하기 위해)
3-3) transition을 widht가 변화할 때 원하는 시간으로 걸어준다

4-1) <a> hover시 글씨 색상이 변할 수 있게 color값을 넣어준다
4-2) <a> hover시 변한 메뉴의 글씨가 앞에 보일 수 있게 z-index 값을 넣어준다

✔️ transition에는 position 값이 필요
✔️ transition은 inline요소에 적용되지 않는다
✔️after가상 요소를 사용하여 transition을 사용할 때 content와 position값을 둘 다 설정한다

css를 이용하여 로고는 보여지고 텍스트는 읽혀질 수 있게 활용
메인 로고와 음성으로 보여져야할 이미지에 활용

<a href="#" class="logo">
 로고명
</a>
           

✅html문서
1) <a> 태그를 이용하여 로고 클릭 시 home으로 돌아갈 수 있게 제작
2) <a> 태그에 로고나 홈페이지명을 작성하여 음성인식 시 정보를 알 수 있음

.logo{
 background: url(/로고파일링크) no-repeat;
 text-indent: -9999px;
 overflow: hidden;
 display: block;
 }

✅css문서
1) background에 로고 파일을 불러온 후 widht, height, background-position, background-size 등을 조절해준다
2) 텍스트를 멀리 밀어 보이지 않게 하기 위해 text-indent 값을 -9999px을 준다
3) 보이지 않는 요소에 대해 overflow: hidden처리를 해준다
4) 해당 속성은 block요소에만 적용되기 때문에 inline요소인 <a> 태그를 block요소로 바꿔준다

✔️ 적용이 안될 시 블록 요소인지 인라인 요소인지 체크