한줄에 여러가지 색깔을 사용하려면 꼭 써줘야하는 css 속성이 있다.
오늘 해볼 것은 한줄에 여러가지 두가지 색상을 표현하고,
또 추가로 마우스를 가져다 대면 (hover) 색이 변하는 css를 구현해보려 한다.
like this ->
가장 중요한 것은 바로바로 !!!
display : inline-block 을 넣어 주는 것이다.
그리고 hover 속성을 전체 묶어주는 div에 주어야 마우스를 가져다 대면 동시에 모든 색상이 변할 수 있다.
hover 속성을 main_titl_1:hover / main_titl_2:hover
이런식으로 따로따로 주게 되면 글자를 반 나눠서 왼쪽 반에 가져다 대면 왼쪽만 바뀌고,
오른쪽에 가져다 대면 오른쪽만 바뀌게 된다.
(이런 효과를 원한다면 이렇게 따로따로 hover를 매기세요~)
<style>
#home_btn{
font-size: 40px;
}
.main_titl_1{
color : #f5df4d;
display: inline-block;
}
.main_titl_2{
color : #0a174e;
display: inline-block;
}
#home_btn:hover .main_titl_1 { color : #0a174e; border : none; }
#home_btn:hover .main_titl_2 { color : #f5df4d; border : none;}
</style>
<html>
<a href="/home" id="home_btn">
<div class="main_titl_1">안</div>
<div class="main_titl_2">녕</div>
</a>
</html>
'programming' 카테고리의 다른 글
| [Web] url로 queryparameter 쿼리파라미터 가져오기 (0) | 2022.01.19 |
|---|---|
| [Web] div안에 div 가운데 정렬하기 (0) | 2022.01.18 |
| [Web] ajax로 불러온 요소(element)에 접근하기 (0) | 2022.01.12 |
| [Web] html 안에 html 넣기 (html import 하는 방법) (0) | 2022.01.11 |
| [Python] 아나콘다 가상환경 이름 바꾸기(Change the name of the virtual env in Anaconda) (0) | 2022.01.11 |
