HTML/CSS로 오버워치 캐릭터 선택 화면 만들기 - 실습 예제(간략히): 오버워치 캐릭터가 들어갈 박스를 32개 만든 후 기울기 주기: 박스에 마우스를 올려놨을 때 박스의 크기가 바로 커지고 배경색상은 회색 → 오렌지색으로 천천히 변경하기: 이미지 넣은 후 기울어진 이미지 다시 돌려놓기: 웹브라우저 사이즈가 줄어들어도 줄바꿈이 되고 양쪽 사이드에 여백이 있게 하기 위와 같은 이미지로 실습예제가 만들어지고여기에서 살짝 수정하여 탱커/딜러/힐러끼리 묶어서 해당 캐릭터에 마우스를 올렸을 때 탱커는 푸른색, 딜러는 오렌지색, 힐러는 초록색으로 보여지게 수정하였고, 블리자드 로고를 우측상단으로 고정시킴
블리자드 로고는 뷰포트 기준 우측상단에 위치 시켰고,기존에 class만 있던 div코드에 tanker/dealer/healer의 이름인 id를 추가하였고, 캐릭터들도 포지션에 맞게 재배치 진행