sass

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

Sass 연습 - @function 와 @return

Sass 첫 경험! CSS를 더 가독성 있게, 반복되는 작업들을 줄여줄 수 있도록 효율성을 올리기 위해 사용한다고 한다. 그 중 배웠던 기능 한가지를 정리한다. 변수에 여러가지 색깔 넣어주기 1 2 3 4 $colors: ( primary: #005dff, accent: #fff6bb, ); cs $colors라는 변수명 안에 두가지 컬러를 용도에 따라 지정해 주었다. 여기서는 내가 만드는 웹페이지에 주로 사용할 primary와 강조하는 요소에 사용할 accent색깔을 넣어주었는데, 당연히 버튼에 사용할 색, 배너에 사용할 색 등 원하는대로 지정이 다 가능하다! 1 2 3 4 .background { background-color: map-get($colors, primary); } Colored by ..