자기소개 페이지 만들기 Review

simoniful·2021년 4월 8일

WeCode

Wecode

목록 보기

1/14

'HTML/CSS'로 자기소개 페이지 만들면서 새로 배운 것들, 여전히 해결하지 못한 부분, 앞으로 개선점을 정리해보려한다!

페이지 소스코드
페이지 링크

새로 알게된 것들

콘텐츠모델 & 아웃라인

새로 시멘틱 부분을 정리하면서 최대한 깔끔하게 사이트 전반의 개요를 만드는 점부터 시작했습니다. 여타 사이트를 참고하며 타이포를 중점으로 강조된 사이트가 눈에 들어왔고 이를 활용해보고 싶었다. 외신 신문사의 사이트 사이트들은 UI가 정말 깔끔하더라구요. 꼭 참고해보시길!

콘텐츠 모델 속에서 시멘틱 부분을 정리하다 보니 전반적인 개요를 제대로 구성하기 위해 부단히 애를 쓰면서 뼈대를 잡아나갔습니다. <article>, <section>, <nav>, <aside> 를 기반으로 구획을 만들고 이에 CSS를 입히면서 UX적으로 조금은 이목을 끌 수 있는 첫 페이지 구성을 진행했었네요.

적응형

굳이 커다란 사이트를 만드는 것이 많이 부담으로 다가왔습니다. 이전에 네이버 부스트캠프를 진행하면서 반응형에 시달렸어요. 물론 반응형도 정리해서 올려둔 상태지만 다음에 만들 사이트는 조금은 복잡하게 Grid 레이아웃과 연계하여 해보고 싶은 마음이 컸습니다. 꼭 깔끔하게 적용할 수 있도록 여러 사이트를 클론 해봐야겠어요

Naver Boostcamp 반응형 페이지 만들기

따라서 사이트 구성은 최대한 작게하면서 모바일 기기에서 봤을 때 어색하지 않도록 적응형 사이트로 해보기로 했습니다. 개발자도구 내 토글 디바이스 Mobile L(425 * 572)로 기준을 잡고 만들어나갔구요.

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">

내부 콘텐츠 또한 width 값을 100%로 표현하여 뷰포트 크기가 줄어들어도 이를 침범하지 않도록 하고 싶었습니다. 또한 단순한 UI를 유지하고 싶었기에 위와 같이 설정했습니다.

적응형 ref
반응형 ref

상단 배너 고정

postion : fixed

position 속성을 fixed로 지정해줄 경우, 해당 엘리먼트는 부모 엘리먼트로 부터 완전히 독립되어 브라우저 화면(viewport) 상에서 어디든지 원하는 위치에 자유롭게 배치된다. 상단에 고정되어 있는 메뉴바, 이미지 배너를 만들고 싶었고 해당 속성을 사용해보기로 했다

상단 메뉴바 고정

나중에 사용하면서 안 사실이지만 스크롤 했을 경우 hover 같은 가상요소를 사용했을 때 z-index값의 조정이 일어나서 꽤나 당황했었다. 물론 금방 수정하긴 했지만 브라우저의 초점이 어디로 있는지에 따라 달라지는 거 같아 항상 주의해야겠다.

물론 싱딘 배너 크기만큼 paddong을 주어서 해결할 수 있었다는 것도 검색을 통하여 찾을 수 있었다. 뭐든 해보고 계속 찾는 습관을 들여야지!

배경 고정 스크롤

처음에는 뒤에 약간 반투명의 배경을 넣고 싶었다. 하지만 먼가 마음에 드는 이미지가 떠오르지 않았고 끝내 solid 타입의 배경을 선택했다.

CSS Zengarden

  background-attachment: fixed;
  background-color: rgba(138,188,159,0.5);
  background-image: url(bamboo.png);
  background-repeat: no-repeat;
  background-size: cover;

하지만, 여러 사이트를 참조하면서 고정된 배경을 어떻게 적용하는지 알아보고 개발자 도구를 켜 마구 뒤졌다. 찾아보면 답이 나온다.

해당 영역에 적용되는 요소의 class를 찾아보니 다음과 같이 이미지를 고정하고 쓸 수 있는 거 같아 해당 속성을 검색해보니 scroll과 fixed를 사용하여 이를 구현하더라

fixed
배경을 뷰포트에 대해 고정합니다. 요소에 스크롤이 존재해도 배경은 함께 스크롤되지 않습니다

scroll
배경을 요소 자체에 대해 고정합니다. 요소에 스크롤이 존재해도 배경은 함께 스크롤되지 않습니다. 즉 요소의 테두리에 배경 이미지를 부착한 것과 같은 효과입니다.

Hover 애니메이션 효과

시각적인 효과를 스스로의 힘만으로 주기에는 너무도 잘 만든 템플릿들이 존재하고 또 그걸 수 많이 따라했었다. 프레임을 강조하는 어울릴 것 같은 2가지 효과를 선택하고 hover 될 시에 이를 활용할 내용을 구성하여 넣는 것으로 이를 마무리 지었다. 그래도 대부분 css만을 사용한 효과라 크게 문맥적으로 이해하는 것은 어렵지 않아 어려움은 없었다.

물론 엄청나게 좋은 효과들이 많이 존재한다. 사실 능력자들의 기운이 뿜뿜하기에 기가 많이 죽을 때도 있지만, 꾸준히 하다보면 원하는 시각 효과를 직접 구현하는 날이 생기지 않을까?

프리소스 ref
CSS 효과 ref

웹 폰트

작업을 하면서 사이트가 새로고침 될 때 마다 애니메이션이 적용된 부분에서 폰트 관련 스타일들이 초기화되고 다시 설정되는 것을 보았다 아마도 내가 가져온 호버 애니메이션 효과들이 지원되는 폰트가 아니라 대체 폰트를 찾다보니 그렇게 된 거 같았다

따라서 내장 폰트가 아닌 웹 폰트를 불러올 목적으로 구글 웹폰트를 사용해보고 싶은 마음에 가장 많이 쓰던 나눔고딕체가 있는지 확인하고 이를 적용하는 방법을 찾았다. 기존 구글에서 지우너하는 폰트의 경우와 커스텀의 경우가 있으니 항상 이를 확인하고 쓰길 바란다.

<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js">
	WebFont.load({ 
		google: {
			families: ['Droid Sans', 'Droid Serif']
		},
		custom: {
			families: ['Nanum Gothic'],
			urls:['http://fonts.googleapis.com/earlyaccess/nanumgothic.css']
		}  
	});
</script>