<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*
가시속성 (display)
1) block요소 -> 태그가 공간을 한줄 전체를 차지하는 태그 -> 자동으로 한줄 개행 발생
2) inline요소 -> 태그가 컨텐츠의 크기 만큼 공간을 차지하는 태그 -> 가로,세로 높이가 수정 불가
3) none -> 화면상에 태그를 안보이게 할 때 -> 태그를 삭제하는 개념은 아니다!
*/
/*
실습 프로세스
1) 코드가 실행 됬을 때 span태그는 보이면 안된다.
2) a태크에 마우스를 올렸을때 span가 보이게 작성.
* 이번 실습에서 중요한점!
1) none속성은 태그를 삭제하는게 아니고, 보이지 않게 한다.
2) 선택자를 작성할 때, 반드시 마지막 목적지에 집중하자.
*/
span{
display: none;
}
a:hover + span{
display: inline;
}
</style>
</head>
<body>
<h1>블록요소</h1> <h1>블록요소</h1>
<span>인라인요소</span> <span>인라인요소</span>
<a href="http://www.naver.com">네이버</a>
<span>www.naver.com</span>
</body>
</html>
개발자