반응형
밑줄 효과 주기
오늘은 마우스를 가져다 댔을때 밑줄이 스르륵 생기는 효과를 구현해 보겠습니다.
position에 대한 이해도만 있다면, 혹은 슬라이드 구현을 해본적이 있다면,
이해하기 매우 쉬울거에요 :)
포스팅 요약
1. 결과
2. 코드
3. 동작 원리
4. 깃허브 코드 다운
[Result]
[Code]
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css">
<title>Document</title>
</head>
<body>
<div id="menual">
<p class="main_tit">원하는 곳에 밑줄 효과 넣기</p>
<p class="main_content">
<span class="have_highlight first">밑줄 효과를 어디에 넣을까?
<strong class="highlight"> 여기에</strong>
<br>넣읍시다.</span><br>
<span class="have_highlight second">두 번째 밑줄효과는 어디에 넣을까?
<br><strong class="highlight">요기에</strong> 넣읍시다.</span>
<br><span class="have_highlight third">세번째 밑줄효과는?
<br><strong class="highlight">이쪽에</strong> 넣을 겁니다.</span>
<br><span class="have_highlight fourth">제 블로그
<strong class="highlight">코드짜는 문과녀</strong> 많이 사랑해주세요.</span>
<br><span class="have_highlight fifth">도움이 됐다면
<strong class="highlight">하트를 꾹</strong> 눌러주세요~</span>
</p>
</div>
</body>
</html>
CSS
#menual{
width: 100%;
height:650px;
padding-left: 400px;
margin-top: 50px;
}
#menual .main_tit{
font-size: 2em;
padding-bottom: 30px;
}
#menual .main_content{
font-size: 2em;
line-height: 1.6;
color: rgb(192,192,192);
}
.first:hover, .second:hover, .third:hover, .fourth:hover, .fifth:hover{
color: black;
}
.highlight{
display: inline-table; /*highlight::before과 겹치게 해줌*/
position: relative;
overflow: hidden;
}
.highlight::before{
content:'';
width: 100%;
height: 100%;
background: rgba(236, 98, 78);
position: absolute;
top: 40px;
left: -100%;
transition: all .35s;
}
.have_highlight:hover .highlight::before{
left: 0;
}
#menual strong{
color: black;
}
[동작원리]
슬라이드가 동작하는 원리와 비슷하다.
위 사진에서 보면 원래는 아래 진분홍 박스가 있으며, overflow:hidden으로 컨텐츠를 가려준것이다.
(*위 사진은 동작 원리를 설명하기 위해 overflow:hidden값을 잠시 빼뒀다.)
그리고 hover시 진분홍 박스를 오른쪽으로 이동시켜, 파란 박스 영역에 들어온 부분만 표시가 되는 원리이다.
원리는 매우 간단하나, 아직 position:relative, position: absolute에 대한 이해도가 부족하다면,
어려울 수 있는 부분이니, 이해가 어려우신분들은 먼저 position에 대해 이해하신 후 동작을 구현해보시면
좋을것 같습니다:)
[GitHub Link]
https://github.com/6810779s/Underline_Slide
GitHub - 6810779s/Underline_Slide
Contribute to 6810779s/Underline_Slide development by creating an account on GitHub.
github.com
도움이 되셨다면 하트 꾹 눌러주세요 ~
반응형
'웹' 카테고리의 다른 글
| 문과생 개발자 면접 - 프론트엔드 개발자 공통 질문 요약 (0) | 2021.10.01 |
|---|---|
| (VsCode)Visual Studio Code 저장할 때 자동 코드정렬/자동 코드정렬 prettierrc 사용하기 (0) | 2021.08.17 |
| VS Code에서 html, css, 자바스크립트 정렬 단축키/ 단축키 확장프로그램 사용법 (0) | 2021.07.23 |
| (웹)DOM 테이블 추가,삭제/사용자가 원하는 만큼 테이블 추가 삭제 예제(결과화면 有) (0) | 2021.05.11 |
| (웹)맥북 -VsCode(Visual Studio) 라이브 서버(Live Server) 브라우저 설정 (0) | 2021.05.07 |
댓글