자기소개 페이지(2) 리뷰

dudgus5766·2021년 7월 3일

CSS html 자기소개

자기소개 페이지

목록 보기

2/3

HTML과 CSS로 만든 자기소개 페이지!
직접 백지에서 코드를 짜면서 생긴 문제점과 풀이과정 그리고 여전히 해결하지 못하고 궁금한 사항들을 정리해보았다.

자기소개 페이지 링크

새로 알게된 점들

웹 폰트 @font-face 적용

해당 폰트 사이트에서 (나는 전 회사에서 사용하던 '눈누'라는 상업적 무료 폰트 사이트를 이용했다) @font-face를 찾아 <style>에 추가하거나 CSS에 추가한다.

@font-face {
    font-family: 'GmarketSansBold';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff') format('woff');
    font-weight: normal;
    font-style: normal;

'Gmarket산스' 와 같은 한글 폰트는 다 이런식으로 지정을 해줘야 하는건지 궁금하다.

창 크기에 따라 정렬이 변하는 메뉴바

반응형 페이지를 만들어 보고자 유튜브에서 찾아낸 방법이다. 페이지 width가 768px보다 작아졌을 때 메뉴바의 li들이 column을 써서 페이지 중앙에 중앙정렬로 바뀌게 된다.

@media screen and (max-width: 768px){
   .navigator {
       flex-direction: column;
       align-items: flex-start;
   }
   .navbar-menu {
       flex-direction: column;
       align-items: center;
       width: 100%;
   }

적용 이미지메뉴 li들을 align-items: center;로 중앙정렬 시켜도 화면 정중앙에는 오지 않았다. width="100%"코드로 너비를 지정해줘야 중앙으로 오게 된다는 사실!

출처 - 드림코딩 by 앨리님의 웹사이트 따라만들기, 반응형 헤더편

메뉴 `li` 밑줄 애니메이션 효과

웹 페이지에서 애니메이션은 자바스크립트를 통해서만 가능한 줄 알았지만 유튜브를 검색해보니 CSS로도 간단한 애니메이션을 만들 수 있었다.
커서를 메뉴 li에 올렸을때 :hover를 사용하여 밑줄이 해당 li 바로 밑에 동적으로 적용되는 효과를 만들었다.
밑줄을 만드는 과정에서 :after라고 하는 가상요소를 처음 써봤는데 기존 요소에 적용되었던 값들이 가상요소 다음에 입력되는 요소에 적용되지 않는다.(대신, position 값을 absolute라고 가상요소에 썼기 때문에 기존 요소에는 relative 값을 추가해야 했다.)


.navbar-menu li {
    color: #4a86ff;
    font-family: 'GmarketSansMedium';
    font-size: 13pt;
    margin: 0px 5px;
    padding: 7px 10px;
    position: relative;
}

.navbar-menu li:after{
    content: ""; position: absolute; left: 50%; bottom: 0; width: 0%; height: 2px; background-color: #053768; 
    transition: all 0.5s;
}

a:hover {
    color: #053768;
}

.navbar-menu li:hover:after{
    left: 0; width: 100%;
}
.navbar-menu li:hover{
    color: #053768;
    font-family: GmarketSansBold;
    letter-spacing: -0.008em;
    transition: 0.5s;
}

애니메이션은 CSS상에서도 볼 수 있듯이 transition을 사용하였다. left값을 지정해줌에 따라 밑줄 애니메이션 시작점을 달리 할 수 있었다.

출처 - 리베하얀님의 한솔홈데코 헤더영역 따라만들기

이미지 가운데 정렬

부모 요소가 있는 경우

div {
  display : block ;
  text-align : center ;
}
img {
  display : inline;
}

text-align은 left, center, right, justify 속성 값을 가지고 있다. block 요소 안에 inline 요소가 있어야 가운데 정렬을 할 수 있다. 즉, text 뿐만 아니라 이미지도 가능하다는 뜻.

부모 요소가 없는 경우

img {
  display : block ;
  margin : 0 auto ;
}

img 태그는 기본적으로 inline-block 속성이다. 이 속성은 너비와 높이를 지정할 수 있고 줄 바꿈이 이루어지지 않는다. 만약, 너비와 높이를 지정하지 않는다면 img 만큼만 영역이 잡히게 된다.
이때 block 요소를 사용한다면 한 영역을 차지하는 박스형태의 성질을 가지고 있기 때문에 가운데 정렬이 가능해진다. 왜냐하면 width값이 100%가 되기 때문이다.

출처 - https://dahanweb.tistory.com/74

이모지 적용

해당 url에 들어가 이모지를 선택한 후 복붙하면 완료!🙃

https://kr.piliapp.com/twitter-symbols/

여전히 풀지 못한 점(풀 때마다 업데이트 예정!)

1. `flex-direction` 에서의 각각의 텍스트를 `text-align: left;`로 하고, 전체 텍스트를 중앙정렬 하는 방법

2. 메뉴 탭을 눌렀을 때 상단에 고정된(fixed) 메뉴바에 가리지 않고 content를 볼 수 있는 방법

(07.04 수정) 사전 스터디 중에 content 상단에 마진을 더 주는 방법을 추천해 주셨다. 하지만 원초적으로 수정할 수 있는 방법을 찾아볼 예정.

3. 사진을 정방향으로 자르고 싶은데 코드 내에서 구현하는 방법

4. 박스 전체에 `:hover`를 주었을 때 각각의 사진이나 텍스트를 바꾸는 방법

(07.05 수정) display:none;을 사용하여 이전 요소에 적용하면 된다!

!마치며💡

HTML과 CSS만으로도 이런 웹페이지를 만들 수 있다는 사실에 놀람과 동시에 자바스크립트까지 공부해서 동적, 반응형 페이지를 만들고 싶다는 욕구가 턱 끝까지 차올랐다. 아직 자바스크립트를 기초를 배우고 있는 '코린이'지만 성취감을 느끼며 조금씩 나만의 코드를 짤 수 있는 사람이 되어야겠다.