[프론트엔드] 12. HTML + CSS 실습 예제 - Overwatch Selector

이하나·2022년 2월 24일
0

프론트엔드

목록 보기
15/19

강의 들은 후 혼자 실습 진행.
+) 22/01/29 - 강의에서 예제 완성 후 스스로 추가 페이지를 만들어봄.

GITHUB
GITHUB 호스팅

[1] 기본 메인페이지 작성 ( 22/01/28 )

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에 배경이미지 설정.

[2] 상세 페이지 ( 22/01/29 )

1. 상세 페이지 기획

0) 메인 페이지와의 연결
: 특정 영웅의 이미지 영역을 클릭하면 상세페이지로 이동.
: 메인페이지의 div.imagea.image 로 변경하여 상세페이지 연결.
1) 초기 기획

: Profile 과 Skill Container로 구분
: Profile 에는 선택된 영웅에 관한 요약된 설명과 컨셉이미지가 들어감.
: Skill Container 에는 각 스킬의 영상, 설명이 작성됨.
2) 작성
+ HTML 기본 구성
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 기본 구성
: 모든 상세페이지에 공통적으로 사용될 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 > 툴팁이 각 스킬의 영상의 좌측 상단에 위치하도록 조정.

[3] 추가 진행 상황 ( 22/01/31 ~ 22/02/18 )

- 각 페이지 하단에 컨텐츠 출처 표기 추가.
- 필요없는 툴팁 관련 코드 정리.
- 로딩 되지 않는 이미지 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) 이전, 다음 페이지를 오고 가는 화살표 버튼을 스크롤을 내릴때 같이 내려가도록, 즉, 뷰포트에 고정되도록 고친다면 굳이 맨위까지 올라가서 누르지 않아도 되서 편할 것 같다.

profile
코딩을 배우는 비전공자 코린이!

0개의 댓글