display는 요소를 삭제하거나 인라인 속성이나 블록 속성으로 바꿔 보이게 한다.
visibility는 해당 요소를 숨기거나 보이게 할 수 있다.
여기서 인라인 속성이란 좌우로 나열하여 보여주는 것이고
블록속성은 위 아래로 나열하여 보여준다.
display: [none / inline / block];
visibility: [hidden / visible];
위와 같이 사용한다.
none : 삭제
inline : 인라인 적용
block : 블록 적용
hidden : 숨기기
visible : 보이기
삭제와 숨기기는 별 차이 없어보이지만
삭제를 하면 공간을 차지 하지 않고 사라지지만
숨기기를 하면 빈 공간으로 남아있다.
예제를 확인해보자
<html>
<head>
<meta charset="UTF-8">
<title>요소 보이기/숨기기</title>
<link rel="icon" href = "img/btn.png">
<style>
li{
list-style-type: none;
background-color: aqua;
padding: 20px;
display: inline;
}
a:hover{
/*해당 요소를 숨기므로 영역은 남아있음*/
visibility: hidden;/*[visible|hidden]*/
}
#dis{
/*해당 요소를 지우므로 영역도 없어짐*/
/*지웠다 새로 그리는 느낌이기 때문에 조금 느려질 수 있다.*/
display: none;/*[none|inline|block]]*/
}
</style>
<!--스타일이 많으면 로딩이 느려질 수 있다.-->
<!--아이디가 # 클래스가 . 태그는 p-->
</head>
<body>
<ul>
<a href="#"><li>HTML</li></a>
<a href="#"><li>CSS</li></a>
<a href="#"><li>JAVA-SCRIPT</li></a>
<a href="#" id="dis"><li>J-Query</li></a>
<a href="#"><li>BOOT STRAP</li></a>
</ul>
</body>
</html>
인라인 속성이라 좌우로 나열되고 사진에는 안나왔지만 마우스가 CSS 부분에 있어 중간에 빈 부분이 있다.
그리고 J-Query도 나와야 하지만 display: none;이라 자리의 흔적조차 보이지 않는다.
display를 이용해서
https://qdgbjsdnb.tistory.com/134
https://qdgbjsdnb.tistory.com/142
두 예제를 합친 최종본의 본문을 보였다 숨겼다를 적용해보자
본문 내용은 조금 변경한다.
<html>
<head>
<meta charset="UTF-8">
<title>메인 Page</title>
<link rel="icon" href = "img/btn.png">
<style>
div.content{
background-image: url("img/bg.png");
background-repeat: no-repeat;
background-position: right bottom;
background-size: 200px;
height: 60%;
}
dt{
font-weight: 600;
font-size: 120%;
}
#dt1:hover{
/*해당 요소를 숨기므로 영역은 남아있음*/
visibility: hidden;/*[visible|hidden]*/
}
#dt2:hover{
/*해당 요소를 숨기므로 영역은 남아있음*/
visibility: hidden;/*[visible|hidden]*/
}
#dt3:hover{
/*해당 요소를 숨기므로 영역은 남아있음*/
visibility: hidden;/*[visible|hidden]*/
}
#dt4:hover{
/*해당 요소를 숨기므로 영역은 남아있음*/
visibility: hidden;/*[visible|hidden]*/
}
</style>
</head>
<body>
<iframe src="exercise_03_navi.html" width="100%" height="51" frameborder="0" scrolling="no"></iframe>
<h2>HTML</h2>
<hr/>
<div class="content">
<dl>
<a href="#" id="dt1">
<dt>
정의
<dd>
HTML은 Hyper Text Markup Language의 약자 입니다.
</dd>
</dt>
</a>
<a href="#" id="dt2">
<dt>
용도
<dd>
웹 어플리케이션의 뼈대를 만듭니다.
</dd>
</dt>
</a>
<a href="#" id="dt3">
<dt>
추가 학습1
<dd>
CSS
</dd>
</dt>
</a>
<a href="#" id="dt4">
<dt>
추가 학습2
<dd>
JAVA SCRIPT, J-Query
</dd>
</dt>
</a>
</dl>
</div>
<iframe src="exercise_03_footer.html" width="100%" frameborder="0" scrolling="no"></iframe>
</body>
</html>
결과는 다음과 같다.
첫번째 결과에 추가학습 2에 마우스를 올렸을 때 스크린샷이다.(마우스가 안찍힘)
추가로 예전에 했던 iframe 예제에서 메뉴의 HTML을 눌렀을 때
위의 페이지로 이동하게 하려면 다음과 같이 바꾸면 된다.
여기서 파란 네모친 부분에 HTML을 누르면
다음 화면으로
이 부분은 메뉴바에서 <a href="subpage01.html"><li>HTML</li></a>부분이 있는데
이렇게 입력했을 때는 iframe 내에서만 열려 이상하게 표시된다.
그러므로 대상을 부모 프레임으로 바꾸어 주어야 한다.
<a href="subpage01.html" target="_parent"><li>HTML</li></a> 타겟을 위와같이 입력하면 된다.
ex.zip
