우주로의 여행,
SPACE와 함께

공지사항 및 이벤트

행성 정보

Swiper 플러그인을 사용한 슬라이드 입니다. 클릭시 하드코딩한 모달이 열립니다.
많이 가는 행성 1위!
해왕성
많이 가는 행성 2위!
천왕성
많이 가는 행성 3위!
토성
많이 가는 행성 3위!
화성
많이 가는 행성 4위!
금성
많이 가는 행성 5위!
명왕성

우주 여행 A-Z

스크롤 애니메이션. 스크롤을 내릴시 강조할 텍스트에 스타일이 적용됩니다.
  • 1. SPACE에 여행 일시와 행성 여행 일시와 행성 을 문의해 주세요!
  • 2. 일정 확인 후 SPACE에서 연락 SPACE에서 연락 을 드립니다.
  • 3. 여행일에 모여 주의사항과 안내사항 주의사항과 안내사항 을 듣습니다.
  • 4. 우주로 출발 후 즐거운 여행 즐거운 여행 을 해요!
  • 5. 지구로 안전하게 귀성 안전하게 귀성 합니다.

질문 및 답변

하드코딩한 아코디언 메뉴. 웹접근성을 고려하여 li 태그에 tab으로 포커스 가능하도록 작업하였습니다.
  • Q. 아코디언 메뉴 제목 영역입니다.
    A. 아코디언 메뉴 내용 영역입니다.
  • Q. 아코디언 메뉴 제목 영역입니다.
    A. 아코디언 메뉴 내용 영역입니다.
  • Q. 아코디언 메뉴 제목 영역입니다.
    A. 아코디언 메뉴 내용 영역입니다.
  • Q. 아코디언 메뉴 제목 영역입니다.
    A. 아코디언 메뉴 내용 영역입니다.
  • Q. 아코디언 메뉴 제목 영역입니다.
    A. 아코디언 메뉴 내용 영역입니다.
  • Q. 아코디언 메뉴 제목 영역입니다.
    A. 아코디언 메뉴 내용 영역입니다.
  • Q. 아코디언 메뉴 제목 영역입니다.
    A. 아코디언 메뉴 내용 영역입니다.

문의하기

datepicker 플러그인을 사용한 달력 선택 및 전송 버튼 클릭시 입력폼의 유효성을 체크합니다.

포트폴리오 정보

포트폴리오 정보

사용 기술
  • HTML
  • SCSS
  • Javascript
  • - 탭메뉴, 아코디언 메뉴, 모달, 스크롤 스파이 하드코딩
  • - Swiper, Date Picker, fancybox 플러그인 사용
  • - 작업 툴 : VScode, Photoshop
제작기간 및 기여도
  • - 제작기간 : 6일
  • - 프로젝트 전체 인원 : 1명
  • - 퍼블리싱 기여도 100%
진행 과정
  • 1. 개발적인 부분 위주로 생각하여 간단하게 기획
    1) 어떤 기술을 사용하면 좋을까?
    • - 다양한 기능, 플러그인을 사용해 볼 수 있도록 고려
    • - 인터랙티브한 웹을 만들기 위해 애니메이션 효과 적용
    2) 반응형/적응형 결정
    • - 반응형 웹(rem 단위 사용)
    • - 분기점 : 모바일 / 모바일 가로 / 태블릿 / 데스크탑
    3) 완성 후 체크할 점
    • - 웹접근성 확인
    • - 웹표준 확인
    • - 크로스 브라우징 확인
  • 2. 퍼블리싱 작업 진행
    • - 플러그인 적용 후 커스터마이징
    • - 키보드 접근성을 고려하여 키보드만 사용해서 페이지의 모든 부분을 탐색할 수 있도록 작업
    • - 섹션 제목(h2)이 없는 공지사항 및 이벤트 섹션은 웹접근성을 위해 스크린리더에서 읽혀지도록 작업
  • 3. 웹접근성 / 웹표준 / 크로스 브라우징 확인
    • - 웹접근성 : WAVE 웹접근성 검사 확인
    • - 웹표준 : W3C 웹표준 검사 확인
    • - 크로스 브라우징 : 크롬, 사파리, 파이어폭스, 엣지 확인

저에 대해 알려드릴게요!

경력 및 기술

경력
  • 웹퍼블리셔 경력
    빈페이지 (2020.3 - 2022.6)
    - PC/모바일/반응형 화면 HTML/CSS 퍼블리싱
    - Photoshop, Adobe XD를 사용한 협업
  • 기타 경력
    케이엔커뮤니케이션 (2018.5 - 2019.4)
    - HTML/CSS 위주 유지보수
    - PC 웹페이지 디자인
    - 모바일 웹페이지 디자인
기술
  • HTML
    - 웹 표준 / 웹접근성을 지키려 노력
    - 크로스 브라우징 확인
    - 시멘틱 마크업
    - 유지보수 고려
  • CSS/SCSS
    - 반응형 레이아웃 설계
    - 중복되는 코드를 줄이려 노력
  • Javascript
    - 플러그인 적용 및 커스터마이징
    - 탭메뉴, 아코디언 메뉴, 모달, 스크롤 스파이 하드코딩
  • Design Cooperation tool
    - Photoshop : 능숙한 편이에요.
    - Adobe XD : 웹디자이너분의 작업물을 받아 퍼블리싱 작업
    - figma : 웹디자이너분의 작업물을 받아 퍼블리싱 작업

저는 이렇게 일해요!

  • 웹접근성 / 웹표준은 최대한 지키려고 노력해요.
  • 작업 후 크로스 브라우징은 꼭 확인해봐요.
  • 회사와 동료들의 성장이 곧 나의 성장 이라는 마음으로 임해요.
  • 새로운 기술을 도입한다고 하면 마음 속으로 아싸! 를 외쳐요. 새로운 배움을 반겨요.
  • 좋은 사람 곁엔 좋은 사람들이 있다고 생각해요. 밝고 긍정적인 모습으로 지내요!

마무리 및 이력서

소중한 시간 내어 봐주셔서 감사합니다.
함께하고 싶어지셨다면, 언제든 연락 주세요.
이력서 보러가기