강의 들은 후 혼자 실습 진행.
+) 22/01/29 - 강의에서 예제 완성 후 스스로 추가 페이지를 만들어봄.
HTML 기본 구성
body > div.container > div.heroes > [ div.hero > div.image ] * 32 div.log > img
CSS 기본 구성
- body에 배경 추가 > 반복되지 않고 스크롤에 움직이지 않음.
- heroes는 플렉스 박스 > wrap 상태로 해서 줄바꿈이 창 크기에 따라 유동적으로 되도록.
- hero > 배경을 흰색, skewX로 기울기를 두고 모서리를 둥글게 해서 보기 좋게끔 한다.
- hero:hover > 마우스가 hover일 때 scale은 커짐 & 배경색은 주황 > transition 설정.
- image > 배경 반복 없이, skewX를 hero 반대방향으로 두어 이미지는 그대로 유지.
- hero:nth-child(n) > image > nth-child 선택자로 32개의 div에 배경이미지 설정.
: 특정 영웅의 이미지 영역을 클릭하면 상세페이지로 이동.
: 메인페이지의
div.image
를a.image
로 변경하여 상세페이지 연결.
: Profile 과 Skill Container로 구분
: Profile 에는 선택된 영웅에 관한 요약된 설명과 컨셉이미지가 들어감.
: Skill Container 에는 각 스킬의 영상, 설명이 작성됨.
body > div.box > div.profile > div.image.tooltip > div.act / div.name.right div.container > div.story div.skill > div.basic > span.tip div.flex > video table.stat > [ tr > td.key / td.value ] * N div.desc > span div.click_right > span.tip div.flex > video table.stat > [ tr > td.key / td.value ] * N div.desc > span div.shift > span.tip div.flex > video table.stat > [ tr > td.key / td.value ] * N div.desc > span div.E > span.tip div.flex > video table.stat > [ tr > td.key / td.value ] * N div.desc > span div.Q > span.tip div.flex > video table.stat > [ tr > td.key / td.value ] * N div.desc > span
- div.image에 배경으로 영웅 컨셉이미지 첨부.
- div.story로 영웅의 대사 중 하나를 표시.
- div.skill에 선택된 영웅이 가진 스킬들을 카드 형태로 쌓음.
- 각 스킬 카드에는 스킬이름, 스킬 영상, 표 형태로 정리된 스킬 능력치, 스킬에 대한 설명이 들어감.
- 영상은 음소거, 자동재생, 반복하도록 설정.
: 모든 상세페이지에 공통적으로 사용될 CSS를 담은 hero.css 와 선택된 영웅에 따라 다르게 적용될 heroN.css 로 구분. ( N은 각 영웅마다 임의로 부여된 숫자 )
(1) hero.css
- body에는 메인페이지와 똑같은 설정 적용.
- box > position을 relative로, profile > position을 absolute로 설정하여 profile이 오른쪽 상단 (story의 오른쪽 끝) 에 오게끔 배치.
- image > 반복 없이 background-position으로 이미지 위치 미세 조정.
- act > image 위로 해당 영웅의 역할군 배치.
- name > image 우측에 위치하도록 조정하고 visibility는 hidden. ( :hover > visibility를 visible로. )
- story > 오른쪽 padding을 설정하고 text는 오른쪽 정렬.
- flex > display를 flex로 설정하여 하위 요소들을 수평정렬.
- 각 스킬의 tip > visibility는 hidden. ( 각 스킬:hover > visibility를 visible로. )
- tr > border-bottom을 설정함으로서 최소한의 표의 형태를 표시.
- stat > height를 영상과 같도록 조정하여 보기 좋게끔 함.
- desc > flex와 수직 정렬 상태이기에 영상과 표의 아래쪽에 위치.
(2) heroN.css
- img > 해당 영웅의 이미지를 배경으로 불러옴.
- 각 스킬의 tip > 툴팁이 각 스킬의 영상의 좌측 상단에 위치하도록 조정.
- 각 페이지 하단에 컨텐츠 출처 표기 추가.
- 필요없는 툴팁 관련 코드 정리.
- 로딩 되지 않는 이미지 url 변경.
- 32명의 영웅 상세정보 추가.
- 메인페이지의 로고 부분을 누르면 오버워치 공식 홈페이지로 이동 하는 링크 추가.
- 페이지 타이틀에 영웅에게 임의로 부여한 번호 추가.
- 이전 페이지, 다음 페이지로 이동하는 링크 추가.
<div class="page"> <a class="pre" href="./heroN.html" title="N_name"></a> <a class="next" href="./heroM.html" title="M_name"></a> </div>
.pre{ width: 50px; height: 50px; position: absolute; top: 70px; left: -40px; background-size: contain; background-repeat: no-repeat; opacity: 60%; background-image: url("../assets/arrow.png"); } .next{ width: 50px; height: 50px; position: absolute; top: 70px; right: -40px; background-size: contain; background-repeat: no-repeat; transform: rotate(180deg); opacity: 60%; background-image: url("../assets/arrow.png"); }
:
- 상세페이지 -> 메인페이지 이동하는 링크 추가.
<a class="go_home" href="../index.html"></a>
.go_home{ width: 50px; height: 50px; position: absolute; top: 70px; left: 100px; background-position-x: -40px; background-size: 250%; background-image: url("https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/logo_overwatch.png"); }
: 이미지는 메인페이지 로고 부분에서 사용했던 이미지를 다시 사용.
: 따로 프로젝트라고 부르기도 부끄러운 그저 html과 css 작업만으로 만든 페이지 이지만 강의를 듣고 내가 또 따로 제작해보면서 많은걸 배웠다.
사실 저 모든 과정에서 내가 생각하고 이렇게 구현하면 좋겠다 싶은 부분들이 지금 내가 알고 있는 지식으로는 구현하기 힘든 부분들이 많아서 좀 답답한 느낌도 들었다.
하지만 반대로 아무것도 못하던 내가 html 과 css를 조금 배운 것으로 인해 이렇게 그럴듯한 하나의 페이지를 기획하고 만들 수 있었다는 건 또 그만큼 대단한 일이다.
나중에 더 많은 기술을 배우게 되고 그걸 어느정도 손에 익히고 나면 그때는 또 그만큼 대단하게 느끼게 되겠지. 그날이 기대된다.
+) 후에 다시 손을 본다면 고치고 싶은 점
1) skill container를 탭 형식으로 고친다면 좀더 보기 좋을 것 같다.
2) 이전, 다음 페이지를 오고 가는 화살표 버튼을 스크롤을 내릴때 같이 내려가도록, 즉, 뷰포트에 고정되도록 고친다면 굳이 맨위까지 올라가서 누르지 않아도 되서 편할 것 같다.