이전에 올린 페이지의 사진을 클릭해서 링크를 타고 들어오면,
위와 같은 페이지로 이동할 수 있다.
.Link{
transition: all 0.2s linear;
}
.Link:hover{
transform: scale(1.9);
}
.Link_2:hover{
transform: scale(1.9);
margin-left:31.5px;
}
css에서 Link class에 hover를 주어 마우스를 갖다대면 이미지가 서서히 확대되게 설정했다.
다음은, 상단에 있는 ME MBTI등을 클릭하면 해당 위치로 이동하게 된다.
<a href="#ME">ME</a>
<a href="#MBTI">MBTI</a>
<a href="#PREFERENCE">PREFERENCE</a>
<a href="#EXPERIENCE">EXPERIENCE</a>
<a id="ME">ME</a>
<a id="MBTI">MBTI</a>
<a id="PREFERENCE">PREFERENCE</a>
<a id="EXPERIENCE">EXPERIENCE</a>
먼저 클릭하는 텍스트에게는 a태그에 href="#~"을 주고,
이동할 위치에 a태그로 id값을 주면 된다.
사진 3장을 넣어 슬라이드 박스를 만들었다.
구글링을 해서 코드를 작성했는데, 간략하게 설명하자면
.slides > div {
scroll-snap-align: start;
flex-shrink: 0;
width: 600px;
height: 300px;
margin-right: 50px;
border-radius: 10px;
overflow: hidden;
background: #eee;
transform-origin: center center;
transform: scale(1);
transition: transform 0.5s;
position: relative;
display: flex;
justify-content: center;
align-items: center;
font-size: 100px;
}
사진 3장이 화면 레이아웃보다 크므로, flex-shrink를 0으로 주어 너비가 축소되지 않게 했다.
overflow를 hidden으로 주어 현재 보여지고 있는 사진 이외에 다른 사진은 보이지 않게 설정했다.
transition으로 움직임을 자연스럽게 주었고, display를 flex로 설정해서 justify-content와 align-items를 통해 center값을 줄수 있게 해서 슬라이드 박스 안에서 정중앙에 위치하게 했다.
이렇게 해서 완성한 첫 자기소개 페이지이다!
https://quqon.github.io/first-web-page/index.html
내 깃허브 페이지: https://github.com/Quqon