week1-자기소개 페이지 만들기(2)

정인호·2022년 7월 29일
0

위코드

목록 보기
3/5

이전에 올린 페이지의 사진을 클릭해서 링크를 타고 들어오면,

위와 같은 페이지로 이동할 수 있다.

.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

profile
경제학과를 졸업후 개발에 뛰어든 햇병아리입니다.

0개의 댓글