a href 링크 질문에 관해서
본문
제가 a tag를 이용해서 테스트하던중에 궁금한 점이 있어서 질문드립니다.
그림을 첨부하자면...
그림1- 실행했을때 처음 모습입니다.
그림2- 제일 왼쪽 여자를 클릭했을때 아래에 해당 내용이 나오는 그림입니다.
궁금한점은...해당 파일을 실행하면 처음에는 아무 설명이 없다가, 어떤걸 클릭해야지 비로서 내용이 나온다는 겁니다.
혹시 이걸 처음부터 제일 왼쪽 여자 내용이 아래에 나오게 할수는 없는지요.
고수님들 부탁드립니다..
---------------------------------------------------
<body>
<div class="team-section">
<h1>Our Team</h1>
<span class="border"></span>
<div class="ps">
<a href="#p1"><img src="p1_200300.png" alt=""></a>
<a href="#p2"><img src="p2_200300.png" alt=""></a>
<a href="#p3"><img src="p3_200300.png" alt=""></a>
</div>
<div class="section" id="p1">
<span class="name">Philip Alvarado</span>
<span class="border"></span>
<P>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</P>
</div>
<div class="section" id="p2">
<span class="name">Clarence Edwards</span>
<span class="border"></span>
<P>
It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</P>
</div>
<div class="section" id="p3">
<span class="name">Erin Lynch</span>
<span class="border"></span>
<P>
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.
</P>
</div>
</div>
</body>
-----------------------------------------------------------------------------------
아래는 CSS파일입니다.
-----------------------------------------------------------------------------------
*{
margin: 0;
padding: 0;
font-family:sans-serif;
}
.team-section{
overflow:hidden;
text-align:center;
background:#34495e;
padding:60px;
}
.team-section h1{
text-transform: uppercase;
margin-bottom: 60px;
color: white;
font-size: 40px;
}
.border{
display: block;
margin:auto;
width:160px;
height:3px;
background:#3498db;
margin-bottom:40px;
}
.ps{
margin-bottom: 40px;
}
.ps a{
display: inline-block;
margin:0 30px;
width:160px;
height:160px;
overflow: hidden;
border-radius: 50%;
}
.ps a img{
width:100%;
filter:grayscale(100%);
transition: 0.4s all;
}
.ps a:hover > img{
filter: none;
}
.section{
width: 600px;
margin: auto;
font-size: 20px;
color: white;
text-align: justify;
height: 0;
overflow: hidden;
}
.section:target{
height:auto;
}
.name{
display: block;
margin-bottom: 30px;
text-align: center;
text-transform: uppercase;
font-size: 22px;
}
답변 1
<a href="#p3"><img src="p3_200300.png" alt=""></a>
</div>
이부분을 아래와 같이 수정,,
<a id="chk" href="#p3"><img src="p3_200300.png" alt=""></a>
</div>
<script>
chk.click();
</script>
너무감사합니다...
