티스토리 뷰

💻 Web/About ME Project

1. Intro-click 페이지 제작

싱 이 2022. 9. 23. 09:19

첫 페이지 개발은 'Intro-click' 페이지!

 

페이지 설명

 

사용자가 사이트를 열면 처음 마주하는 페이지이다. 해당 페이지에 있는 'Click Me!' 라는 텍스트를 읽고 캐릭터 그림을 누르면 실제 홈페이지 메인 화면으로 이동하는 페이지이다. 처음 HTML/CSS 강의를 들으면서 배웠던 게 하이퍼링크 기능이었는데, 이를 내 프로젝트에도 넣어보고 싶어서 Intro-click 페이지를 넣게 되었다. 

 

구현해보고 싶었던 기능

 

1. 웹 브라우저 사이즈에 따라 중앙 위치 그림 사이즈 자동 축소&확장

 

img 관련 css 코드는 아래와 같다.

 .center{
        display:block;
        margin-top:170px;
        margin-left:auto;
        margin-right:auto;
        width:25%;
      }

우선 img를 중앙 정렬 해주기 위해 margin-right와 margin-left 값을 각각 auto로 설정해 주었다.

좌우 margin을 auto로 설정해주게 되면 브라우저에서 일정 크기의 width를 제외한 나머지 공간들이 2개로 분할되어 자동으로 img가 중앙 정렬이 된다!

 

다음으로 브라우저의 크기에 따라 img의 크기도 자동으로 확장/ 축소하려고 img의 width를 25%로 지정해주었다. 

 

2. 웹 브라우저 사이즈에 따라 중앙 위치 텍스트 크기 자동 축소&확장 (반응형 폰트 크기)

 

      h2{
        font-family: 'Lobster', cursive; 
        text-align:center;
        font-size:5vw;
        margin-top:0px; //캐릭터와 붙게 하기 위해 top 마진값은 0으로
      }

 

처음에는 자동으로 텍스트 크기가 조절되는 기능을 생각하지는 못했다. 그저 텍스트를 페이지에 일정 크기로 중앙 배열하려 고만 했다. 근데 브라우저 크기를 이리저리 조절해본 후, img 크기는 조절이 되는데 텍스트만 떡 하고 있는 걸 보고.. 크기가 자동으로 바뀌는 기능이 필요함을 느꼈다. 

 

홈페이지 개발을 기획할 때 참고한 사이트 중 Brittany Chiang 이라는 분의 개인 페이지가 있었다. 처음에 이 분처럼 브라우저 창의 크기가 변하면 알아서 자동으로 텍스트 크기가 작아지는 명령을 내리고 싶었는데, 검사창 에서 관련 코드를 찾기 어려웠다. 그래서 이와 관련하여 계속 구글링을 시도했다.

 

font-size를 변경하는 방법으로는 크게 3가지가 있다.

 

1. px 사용하기

 

2. em, rem 사용하기

>  상대적으로 폰트 크기를 지정 하는 방법이다. em은 상위 요소 폰트 크기를 기준으로 몇 배를 할 것인지 나타내는 방법이고, rem은 문서의 최상위 요소, html 요소 폰트 크기를 기준으로 몇 배를 할 것인지 결정한다.

 

3. vw, vh, vmin, vmax 사용하기

> px, em, rem이 브라우저 창의 크기와 상관 없는 폰트 크기라고 한다면, vw, vh, vmin, vmax의 경우 브라우저 창의 가로 혹은 세로 크기에 따라 폰트 크기가 변한다. 1vw 혹은 1vh는 현재 브라우저 창 가로 혹은 세로 크기의 1%의 값을 가진다.

* viewport란 현재 보고 있는 컴퓨터 화면의 영역을 얘기하고, 일반적으로 브라우저 창과 동일하다.

viewport의 정의를 나타낸 그림 (출처: ken1204 viewport란?)

 

> vw (viewport width)

: 웹 브라우저의 가로폭(너비)를 기준으로 결정되는 폰트 크기

ex) 웹 브라우저 너비가 1280일때 폰트 크기를 1vw로 지정했다면 이는 1280의 1%인 12.8px 크기를 가짐!

 

> vh (viewport height)

: 웹 브라우저의 세로폭(높이)를 기준으로 결정되는 폰트 크기

ex) 웹 브라우저의 높이가 720일때 폰트 크기를 1vh로 지정했다면 이는 720의 1%인 7.2px 크기를 가짐. 

 

> vmin (viewport minimum)

: 웹 브라우저의 가로(너비)와 세로(높이) 중 더 작은 값을 기준으로 폰트의 크기를 결정하는 것.

ex) 이곳을 클릭해서 웹 브라우저 창의 가로와 세로 크기를 바꿔보면 더 작은 값의 영향을 받아 폰트의 크기가 변하는 것을 볼 수 있음. 

 

> vmax (viewport maximum)

: 웹 브라우저의 가로(너비)와 세로(높이) 중 더 큰 값을 기준으로 폰트의 크기를 결정하는 것.

ex) 이곳을 클릭해서 웹 브라우저 창의 가로와 세로 크기를 변화시킬 경우, 더 큰 값의 영향을 받아 폰트의 크기가 변함.

 

 

3. 캐릭터 누르면 다른 페이지로 이동할 수 있는 기능 만들기 (이미지에 링크 걸기)

<body style="background-color:#FFA89F">
    <a href="https://yelynnoh.github.io/AboutME/">
      <img src="../image/pic.jpg" class="center">
    </a>
 </body>

삽입한 이미지에 링크를 걸고 싶다면 a 태그를 쓰고 href를 이용해주면 된다.

내 경우 깃허브에 배포한 다른 웹사이트로 이동하기를 바랬으므로 href = "사이트 주소" 식으로 코드를 작성하였다.

 

덧)

처음 코드를 작성하기 시작했을 때는 이미지를 삽입하기 위해 ../image/pic.jpg 이런 코드를 작성했고, Live Server로 실행했을 땐 삽입한 이미지가 보였다. 근데 나중에 보니 깃허브에 소스 코트를 커밋하고 배포할 경우 이미지가 보이지 않는 문제가 발생했다. 문제를 어떻게 해결했는지는 추후 깃허브 배포 과정의 글에서 얘기해보겠다.. ㅜㅜ

 

'💻 Web > About ME Project' 카테고리의 다른 글

3. 목표 페이지  (0) 2022.09.23
2. 전체 뼈대 제작 + Introduce 페이지  (0) 2022.09.23
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2025/02   »
일 월 화 수 목 금 토
1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28
글 보관함