CSS

누구나 애니메이션 만드는 공식

애니메이션 만드는 공식 one-way 애니메이션을 만드는 공식을 알아보자. one-way 애니메이션이란? A→B처럼 한방향으로 흘러가는 애니메이션 예를들어 아래와 같은 경우가 있겠다. 투명도를 0 → 1 로 만들고싶을 때 margin left 10px → 300px font size가 15px → 30px 모든것은 세가지 기본단계의 원리만 알면 된다. 첫번째 시작스타일 최종스타일 을 CSS로 만들어놓는다. 두번째 자스로 내가 원할 때 최종스타일로 변하라고 코드를 짠다 세번째 시작스타일에 transition을 추가한다. 예제 1 모달창이 toggle 될 때 transition 주기 첫번째 단계 시작스타일 만들기 .black-bg { visibility: hidden; opacity: 0; } 최종스타일 만..

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..

빔캠프 종찬님 특강 - .wrapper는 어디에 쓰는고?

이렇게 생긴 웹의 레이아웃을 짠다고 하면, 우리는 크게 위의 사진영역 하나, 그리고 아래의 메인 컨테이너 영역 하나 이렇게 나누게 된다는 것은 어렵지 않게 예상해 볼 수 있다. 아래와 같이, 위 헤더영역 아래 컨텐츠영역으로 나눈 다음, 차례차례 윗영역을 작업하고, 아래 영역을 작업하는 것이다. 그런데 종찬님은 여기서 하나의 큰 레이아웃을 더 보셨다. 바로 윗영역이나 아래영역이나 공통적으로 존재하는, 중간 컨텐츠 영역이다. 종찬님은 이 컨텐츠들을 한번에 묶어 클래스명 .wrapper로 하나의 요소 안에 넣어주시곤 하는데, 이를 하는 이유는 직관적이고 명시적으로 우리가 작업할 공간이 정해진다. 공통된 위치를 정해줌으로써, 우리는 윗영역과 아랫영역의 레이아웃을 한번에 짤 수 있고 나중에 유지보수도 편해진다. ..

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..

Vending machine(콜라 자판기 만들기)

URL:https://koreanhamster.github.io/vending-machine/ 소스코드:https://github.com/Koreanhamster/vending-machine 기술스택 HTML CSS 구현기능 flex와 grid를 적극적으로 사용하여 유지보수에 용이할 수 있도록 구현 반응형 디자인으로 화면 너비가 줄어들 때 섹션들이 세로축으로 정렬될 수 있도록 구현 IR기법을 사용하여 웹접근성을 높임 배운점 꼭 필요하지 않은 경우 각 컨텐츠들에 고정 height나 width값은 주지 않았다. 유지보수에 능한 웹 구현 경험치를 쌓았다. IR기법을 사용해보며 너무 길지 않으면서 동시에 명료하고 구체적으로 필요한 정보를 스크린리더 사용자에게 전달하는 연습을 했다. 마크업을 끝내고 CSS 스타일..

가지고 놀면서 배우는 position: absolute;

div 안에 div 안에 div 1. .child에 position:absolute를 주자. 그리고 top과 left를 0을 줌으로써, 어디를 기준으로 위치가 이동되는지 보자. .child { width: 30px; height: 30px; background-color: orange; position: absolute; top: 0; left: 0; } 뷰포트를 기준으로 top: 0, left: 0이 적용되어 뷰포트 최상단 왼쪽에 붙었다. 기준이 되는 부모컨테이너를 지정해주지 않고 단독으로 absolute를 가지고 있으면, 뷰포트 전체 창 기준에서 움직인다. 흔히 우리가 position:absolute 사용 시 기준이 되는 부모컨테이너를 지정해주지 않으면 body 혹은 html을 기준으로 움직인다고 하..