Front-End Developer/Project
오직 Tailwind만을 사용해서 이력서 만들어보기 challenge
URL: https://koreanhamster.github.io/resume_only-tailwind/ 소스코드: https://github.com/Koreanhamster/resume_only-tailwind 미리보기 기술스택 HTML + Tailwind (CSS없이 오직 Tailwind만 사용) 배운점 & 아쉬운점 Tailwind의 문법에 어느정도 익숙해졌다. 생각보다 간단하고 할 수 있는게 다양하다. 확실히 유지보수는 힘들다. 같은 속성을 가지고있는 모든 요소들의 클래스를 변경해줘야한다. 미디어쿼리를 적용할 수 없어 아쉬웠다. CSS와 적절히 섞어 사용하면 정말 빠르고 편하게 웹을 만들 수 있겠다!
Vending machine(콜라 자판기 만들기)
URL:https://koreanhamster.github.io/vending-machine/ 소스코드:https://github.com/Koreanhamster/vending-machine 기술스택 HTML CSS 구현기능 flex와 grid를 적극적으로 사용하여 유지보수에 용이할 수 있도록 구현 반응형 디자인으로 화면 너비가 줄어들 때 섹션들이 세로축으로 정렬될 수 있도록 구현 IR기법을 사용하여 웹접근성을 높임 배운점 꼭 필요하지 않은 경우 각 컨텐츠들에 고정 height나 width값은 주지 않았다. 유지보수에 능한 웹 구현 경험치를 쌓았다. IR기법을 사용해보며 너무 길지 않으면서 동시에 명료하고 구체적으로 필요한 정보를 스크린리더 사용자에게 전달하는 연습을 했다. 마크업을 끝내고 CSS 스타일..
미디어쿼리를 이용한 반응형 웹 구현하기
신경쓴 점 반응형 대응/ 더 손쉬운 유지보수를 위해 애초에 html font-size를 10으로 맞춰놓고, 미디어쿼리에서 rem값을 사용하여 font-size를 조절했다. margin이나 padding의 값도 반응형을 위해 rem으로 조절했다. flex를 사용하여 두 컨텐츠가 direction을 row 혹은 colum으로 손쉽게 방향을 전환할 수 있도록 했다. 배운 점 미디어쿼리를 처음 사용해봤는데 생각보다 어렵지 않았다. min-width 와 max-width는 생각보다 이름이 막 와닫지 않는다. 확실히 외워버려야겠다! 사실 저 텍스트들이 한글자씩 다음행으로 떨어지는게 싫어서 word-break: keep all;을 설정했는데 먹지 않았다. 시간부족으로 일단 넘겼으나, 찾아보니 빔캠프에 영상이 있어 공..
위니브 로그인페이지 클론코딩(멋쟁이사자처럼 지원과제)
URL: https://koreanhamster.github.io/weniv_login_page/ 소스코드: https://github.com/Koreanhamster/weniv_login_page 결과물 구현시 신경 쓴 점 웹 접근성 두번 째 로그인 페이지 - 보여지는 순서대로 마크업을 하면 스크린리더 상에서 아이디 입력으로 넘어가기 전에 닫기버튼이 나오기 때문에, 닫기버튼을 마크업 맨 마지막으로 배치하고 CSS를 통해 상단에 위치하게 함 소스 절약 각 회사 아이콘에 이미지 스프라이트 기법 사용 - 1장의 이미지만 사용함으로서 소스 및 로딩시간 절약 부딪혔던 문제점 1. 약간의 삽질 회원가입과 아이디/비밀번호찾기 사이에 있는 저 수직라인을 만들고 싶었다. 가상요소를 생성하여 라인을 만들어주려고 했는데,..
CSS로 캐릭터 만들기 - 멋사 WEB 캐릭터경진대회 우수상 수상
URL: https://koreanhamster.github.io/character_contest/ 소스코드: https://github.com/Koreanhamster/character_contest Preview 초반 스케치 캐릭터 컨셉을 확실히 잡았다. 이름: 바지리 (내가 키우는 바질에서 영감을 받음. 통통하고 연약해보이는데 잘 자란다. 성격: 외유내강을 생각하며 시크하고 세상이 뭐라던 신경쓰지 않는 내 자아를 담았다. 컨셉: 뉴욕시티 / 에어팟프로 / 주머니손 부딪힌 문제점 사진과 같이 캐릭터의 얼굴 정 중앙에 수직선을 활처럼 휘게 만들고 싶었다. 그냥 얇고 기다란 선을 만들고 각도를 조절하는건 쉬웠지만, 저렇게 활처럼 휘어보이는 표현은 어떻게 해야할 지 막막했다. 검색 중 border-radi..
HTML과 CSS로 감성달력 만들기.
URL https://koreanhamster.github.io/calendar/4:5/index.html 소스코드 https://github.com/Koreanhamster/calendar HTML 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 9..