[selector] CSS - :target 가상선택자 - 내부링크목적지요소 (= :target선택자 = 타겟선택자 = 목적지선택자, IE9) ※ 탭/모달/열기닫기

1. :target 예제 - 내부링크의 목적지요소 선택
2. :target 정의
3. :target 구문
4. :target 예제 - Tab (탭)
5. :target 예제 - Modal (모달)
6. :target 예제 - 열기/닫기 (= 보이기/숨기기)

:target 예제 - 내부링크의 목적지요소 선택

 

<style>

:target {

  border: 1px solid gray;

  background-color: yellow;

  padding:20px;

}

</style>

<h1>홈짱닷컴</h1>

<p><a href="#hz1">사이트주소</a></p>

<p><a href="#hz2">사이트소개</a></p>

<p id="hz1"><b>Homzzang.com</b></p>

<p id="hz2"><b>홈페이지제작관리</b></p>

결과보기

:target 정의

 

문서 내부 링크의 현재 활성화 된 목적지요소 (= 대상요소 = 타겟요소) 의미.

 

---

 

1.

# 다음에 앵커 이름 있는 URL은 문서 내 특정 요소에 연결되는데, 그 링크되는 요소가 대상 요소 의미.

 

2.

IE9 이상 주요 최신브라우저 지원.

 

:target 구문

 

selector:target {

  css 선언 내용;

}

 

:target 예제 - Tab (탭)

 

<style>

.tab div {

  display: none;

}

.tab div:target {

  display: block;

}

</style>

<div class="tab">

    <a href="#link1">HTML</a>   

    <a href="#link2">CSS</a>

    <a href="#link3">JS</a>

    <div id="link1">

      <h3>HTML</h3>

      <p>기본골격</p>

    </div>

    <div id="link2">

      <h3>CSS</h3>

      <h4>세부디자인</h4>

    </div>

    <div id="link3">

      <h3>JS</h3>

      <p>동적기능</p>

    </div>

</div>

 

결과보기

:target 예제 - Modal (모달)

 

<style>

/* Chrome, Safari, Opera */

@-webkit-keyframes hz {

  from {top:-100px;opacity: 0;}

  to {top:0px;opacity:1;}

}

@keyframes hz {

  from {top:-100px;opacity: 0;}

  to {top:0px;opacity:1;}

}

/* 모달배경 */

.modal {

  display: none;

  position: fixed;

  left: 0;

  top: 0;

  width: 100%;

  height: 100%;

  overflow: auto;

  background-color: rgb(0, 0, 0);

  background-color: rgba(0, 0, 0, 0.4);

}

/* 타겟 시 Modal 노출 */

.modal:target {

  display: table;

  position: absolute;

}

/* modal 상자 */

.modal-dialog {

  display: table-cell;

  vertical-align: middle;

}

/* modal 내용 */

.modal-dialog .modal-content {

  margin: auto;

  background-color: #f3f3f3;

  position: relative;

  padding: 0;

  outline: 0;

  border: 1px #777 solid;

  text-align: justify;

  width: 80%;

  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

  -webkit-animation-name: hz; /* Chrome, Safari, Opera */

  -webkit-animation-duration: 0.5s; /* Chrome, Safari, Opera */

  animation-name: hz;

  animation-duration: 0.5s;

}

/* modal 닫기 버튼 */

.closebtn {

  text-decoration: none;

  float: right;

  font-size: 35px;

  font-weight: bold;

  color: #fff;

}

.closebtn:hover,

.closebtn:focus {

  color: #000;

  text-decoration: none;

  cursor: pointer;

}

.container {

  padding: 2px 16px;

}

header {

  background-color: #5cb85c;

  font-size: 25px;

  color: white;

}

footer {

  background-color: #5cb85c;

  font-size: 20px;

  color: white;

}

</style>

<a href="#open">Modal 열기</a>

<div id="open" class="modal">

  <div class="modal-dialog">

    <div class="modal-content">

      <header class="container">

        <a href="#" class="closebtn">×</a>

        <h2>홈짱닷컴</h2>

      </header>

      <div class="container">

        <p>코딩언어 그누보드 서버관리</p>

        <p>홈페이지 제작/유지보수관리</p>

      </div>

      <footer class="container">

        <p>Homzzang.com</p>

      </footer>

    </div>

  </div>

</div>

결과보기

:target 예제 - 열기/닫기 (= 보이기/숨기기)

 

<style>

#intro {display: none;}

#intro:target {display: block;}

</style>

 

<div>

    <p>홈짱닷컴 (Homzzang.com) 소개</p>

    <p id="intro">

        코딩언어 그누보드 서버관리 강의

     <a href="#">닫기</a>

    </p>

</div>

<a href="#intro">열기</a>

 

결과보기

https://codepen.io/enmanuelduran/pen/LYPawYY