자기소개 페이지_1에 이어
수정했던 부분과 헤맸던 부분을 기록하고싶다
지난 게시글(click!) : 자기소개 페이지를 만들며_1
지난 게시글에서 작성한 것 처럼
수정&보완이 필요한 부분은 여섯가지(+a) 였다.
🐣 수정&보완한 부분 🐣
1. 네비바 영역 재설정
페이지에 오른쪽 여백이 발생한다.
크롬 검사기를 이용해서 영역을 살펴 보았을 때
네비바가 사진처럼 영역을 벗어나있었다.
#navBar ul{
display: flex;
overflow-x: hidden;
justify-content: center;
width: 100vw; height: 40px;
position: fixed;
padding: 0; margin: 0;
} width: 100vw; 로 너비 값을 주었지만, 아무리 코드를 보아도 여백이 생길만한 건 없는데.. 라고 생각해서 한참을 헤맸다 ㅠㅠ
알고보니까 아래 다른 영역에서 padding-left:30px 을 주었고, 30px 만큼 오른쪽으로 밀려서 여백이 생긴거였다.
💫 해결 방법
width:100vw / height:100vh 속성은 padding-left로 여백을 준 부분까지 포함해서 적용되니, 페이지 여백이 생기면 다른 부분의 패딩값과 마진값 등 여백값 확인이 필요하다.
2. 이미지 아래 텍스트 가독성 높이기
이 부분은 간단하게 css부분을 이용해서 처리했다.
color:#6F606E; font-size:19px; font-weight: bold;
3. 아이콘 삽입
4. 해당 아이콘을 클릭하면 해당 url로 넘어갈 수 있도록 연결하기
contact 요소들을 작성하면서 인스타그램/벨로그 등 내용을 넣으면서 아이콘을 삽입하여 가독성을 높였다.
나는 스터디 조원님이 공유해주신 폰텔로를 사용했다.
https://fontello.com/
instagram ~ mail 텍스트를 클릭하면 넘어갈 수 있도록 html의 a태그를 이용해서 작성했다.
특히, 메일은 a태그의 mailto 속성을 이용하면 바로 메일을 전송하게 할 수 있는 기능이 있다
5. 자바스크립트 기능 추가하기
6. 폰트 지정하기
웹 호스팅 후 폰트가 달라져있었다. 명조체 느낌 아무튼 네모 반듯한 글꼴이 좋아서 폰트를 별도로 지정해주었다.
나는 구글 웹폰트(https://fonts.google.com/) 를 이용해 폰트 지정을 해주었다.
해당 페이지에 접속해 원하는 폰트를 선택하면
1. hmtl에 < link > 태그를 이용하는 방식
2. css에 @import 를 이용하는 방식
두 방법이 있는데, 나는 2번을 이용했다.
@import url('https://fonts.googleapis.com/css2?family=Do+Hyeon&family=Kanit:wght@500&display=swap');
자기소개페이지를 만들며 막막한 순간도 있었지만
이렇게 끝내고 나니 기분이 너무 좋다!
퀄리티를 떠나서 이 과정을 통해서 알게된 점도 많고, 자신감도 조금 생긴 느낌 ! 앞으로도 팟팅이다 이야호 🤸♀️
