작업 내용
요구된 개인별 기술 요구사항은 아래와 같다.
페이지 소개
내가 맡은 페이지는 전라권(호남권)이었다.
📄 메인 페이지는 좌측 [큰 지도] + 우측 [전라권 확대 지도 + 텍스트 ]에 snb(side navigation bar)로 구상하였다.
📄 맛집 소개 페이지는 카드를 활용했다. 카드에 호버 효과와 함께 '네이버지도' 링크가 올라오도록 만들었다. 
📄 기아타이거즈 소개 페이지는 간단하게 작성하였다.
📄 관광 명소 페이지도 맛집 소개와 동일하게 카드와 호버를 주었다.
📄 2026년 행사 페이지는 테이블을 이용하여 하드코딩하였다. 행사가 있는 날은 내부에 a 태그로 넣었다.
필수 활용 요소
-
snb를 list를 사용해서 작성하였다.
-
테이블
테이블은 하드코딩으로 달력을 작성하여 3월 전라권 행사를 나타내보았다.
-
시맨틱 태그, 멀티미디어, 텍스트 태그, 링크
-
멀티미디어 (오디오)
이슈사항 정리
❗a 태그 사용 시 주의점
a 태그 사용 시, 특히 target="_blanck"를 사용할 때 문제가 되는 부분이 있다.
Reverse Tabnabbing이다.
Reverse Tabnabbing란 target="_blanck"를 사용하여 열린 새 페이지는 기존 페이지에 접근이 가능하고, 자바스크립트에서
window.opener를 사용하여 이전 탭(원래 페이지)를 조작할 수 있다.
만약, 접근한 사이트가 악성 사이트라면
window.opener.location = "https://fake-login.com";이 코드가 실행 될 수 있는데
즉,
- 사용자가 외부 링크를 클릭한다.
- 새 탭이 열린다.
- 그 사이트가 원래 탭을 가짜 로그인 페이지로 바꾼다.
- 사용자는 원래 사이트인 줄 알고 로그인 정보를 입력한다.
이러한 공격이 가능하다.
해결법
rel 속성을 이용하여 해결이 가능하다.
rel="noopener noreferrer"noopener → 새 탭에서 window.opener 접근 차단
noreferrer → 이동 시 이전 페이지 주소 전달 차단
습관으로 들이도록 하자.
Whitespace 오류
팀원 간 운영체제가 달라 나타나는 Whitespace오류가 발생했었다.
해결법
🧑 짧은 회고
팀 단위의 작업을 시작할 때, 여러 컨벤션을 정하고 시작했는데, 협업에 있어 고무적이었다고 생각한다.
페이지 위주로 디자인을 살짝 잡고 들어갔었는데 디자인 시스템이나 틀 단위로 디자인을 나누었으면 더 좋았을 것 같았다.
PR 양식을 맞춰보며 양식에 맞지 않아 닫아도 보았다.
팀원들 입장에서는 이렇게까지 싶었을 수도 있었을 것 같지만 필요하다고 생각했다.
각 팀원의 이전 개발 경험이 달라 속도에서 차이가 있었는데, 앞뒤로 조율을 잘 했는지 모르겠다.
팀장으로서 전체적인 흐름을 잡고 더 잘 이끌어가고싶다.
