블럭 태그와 인라인 태그를 설정 해줄 수 있다.
a 태그가 인라인 태그이기 때문에 가운데 정렬을 할 수 없으나
diplay 로 블럭으로 바꿔주면 가능하다.
display 속성
| none | 없애기 |
| inline | 인라인으로 바꿔주기 |
| block | 블록으로 바꿔주기 |
a{
display: block;
text-align: center;
}line-height 를 부모의 높이 만큼하면 세로 가운데 정렬 가능.
예제)
a태그안에 네이버 위에 마우스를 올리면 옆에 주소가 뜨게 끔 만들어라
<!DOCTYPE html>
<html>
<head>
<style>
span{
display:none;
}
a:hover + span{
display : inline;
}
</style>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
<a class = "naver" href = "#">네이버</a> <span>https://naver.com</span><br>
<a class = "daum" href = "#">다음</a> <span>https://daum.net</span>
</body>
</html>'구 게시글 (~2020.01)' 카테고리의 다른 글
| [웹] CSS background 속성 (0) | 2020.01.07 |
|---|---|
| [웹] CSS Float layout (0) | 2020.01.07 |
| [웹] HTML 인라인태그, 블럭태그 (0) | 2020.01.06 |
| [웹] CSS 이벤트 선택자 (0) | 2020.01.06 |
| [웹] CSS를 저장하는 방법 3가지 (0) | 2020.01.06 |