웹 디자인을 하다보면 가장 많이 쓰는데 또 맨날 까먹는 것 중에 하나가 바로 가운데 정렬이다.

 

무의식적으로 바로 text-align : center 사용하고는

 

아 왜 안되지?

 

그다음은 이제, vertical-align : middle 사용하고는

 

아 왜 안되지?

 

 

무한 반복하다가, 아 맞다....하고는 최후의 수단? 만병통치약으로 사용하는 것이 바로 position을 사용한 가운데 정렬이다.

 

 

 

<html>
<div class="a_box">
   <div class="b_box">
    	안녕?
    </div>
</div>
</html>

<style>
.a_box{
	position: relative;
    }
.b_box{
	position: absolute;
    top: 50%;
    left : 50%;
    transform: translate(-50%, -50%);
}
</style>

 

레알 만병통치약이다.

 

부모 클래스에는 position : relative;

자식 클래스에는 position : absolute; top: 50%; left : 50%; transform: translate(-50%, -50%);

'programming' 카테고리의 다른 글

[Web] 색상 코드 추출하기 (컬러콥 color cop 추천 및 오류 해결)  (0) 2022.01.20
[Web] url로 queryparameter 쿼리파라미터 가져오기  (0) 2022.01.19
[Web] css 한 줄에 여러가지 색깔 넣기  (0) 2022.01.17
[Web] ajax로 불러온 요소(element)에 접근하기  (0) 2022.01.12
[Web] html 안에 html 넣기 (html import 하는 방법)  (0) 2022.01.11

한줄에 여러가지 색깔을 사용하려면 꼭 써줘야하는 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

+ Recent posts

티스토리툴바