HTML

Sass를 사용한 영화목록 페이지 클론코딩

URL: https://koreanhamster.github.io/weniv_movie_page/ 소스코드: https://github.com/Koreanhamster/weniv_movie_page 미리보기 기술스택 HTML, Sass(Scss) 적용기술 그리드 적용 아이템 모듈화하여 중복적용 footer 포지셔닝은 body에 min-height를 100vh를 준 뒤 footer박스에 margin-top을 0으로 주어 처리 아쉬운점, 배운점 예매하기와 예고편 버튼을 스타일링하고 포지션하는데 어려움이 있었는데, 일단 반응형이 전혀 고려되지 않고 네거티브 마진을 주는 식으로 버튼이 부모요소에 꽉 차있는것 '처럼' 스타일링을 했기 때문이다. 박스 스타일링은 overflow:hidden을 주어 부모의 borde..

Pure CSS로 포토샵의 역사 페이지 구현하기

URL: https://koreanhamster.github.io/photoshop_web-page/ 소스코드: https://github.com/Koreanhamster/photoshop_web-page 기술 스택 HTML CSS 신경쓴 점 네거티브 마진을 적극적으로 사용하여 자유롭게 박스포지셔닝을 할 수 있도록 했다. 아래 코드와 같이 nth-child속성을 사용하여 두 박스가 항상 중간 여백을 유지할 수 있도록 했다. .main { display: flex; flex-direction: column; align-items: center; padding: 7rem 0; } .card:nth-child(odd) { margin-left: -60%; } .card:nth-child(even) { marg..

오직 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 스타일..

background-image에 no-repeat이 안되요 - 초심자의 깜찍한 실수

문제점 오늘 아래처럼 background-image를 추가하던 중, .select-btn { background-image: url(images/Polygon\ 1.png); } 드롭다운 박스를 만들면서, 아래화살표 이미지를 추가하기 위해 아래와 같이 속성에 no-repeat;를 추가하였다. .select-btn { background-image: url(images/Polygon\ 1.png) no-repeat; } 그랬더니 아래와 같이 이미지가 아예 사라져버렸네~ 내 화살표 어디갔니 개발자도구를 살펴보니 오류가 난 것을 알 수 있다. 해결 그리고 답은 의외로 간단하고 어이없었는데... stack over flow에서 찾을 수 있었다. https://stackoverflow.com/questions/1..

그냥 꾸미면 되는게 아냐..? - input 체크박스 꾸미기

input 속성의 타입을 checkbox로 만들어주면, 위와 같은 모양의 체크박스가 default로 유지된다. 버튼처럼 그냥 보더를 없애고 예쁘게 꾸미면 되는 줄 알았는데... 그게 아니다? 사실 체크박스는 기본 모양을 다르게 꾸며서 (버튼 꾸미는 것 처럼) 스타일링을 하는 것이 아니고, 기본 모양을 아예 보이지 않게 처리 한 뒤, 그 공간에 원하는 형태의 박스 이미지를 넣어줌으로써(이미지였다니!!) 변경하는 것이다. 체크 했을 때의 변경 된 모습은, 가상선택자 :checked를 사용하여 체크시 변경된 모습의 이미지를 하나 더 넣어주는 것이다.(속았다!) 체크박스 구현해보기 HTML 로그인 상태 유지 위의 체크박스를 만들어주겠다. 1. 일단 기본 체크박스를 안보이게 만들자. input[id="chkbox..