목록2020/12/20 (3)
디케이
1. 화살표 간단한 화살표 만의 패턴에서 흔히 볼 수있는 border지정한 요소를 transform: rotate(-45deg);이지 회전시킨 것입니다 CSS를 다음과 같이 설명합니다. CSS a { padding-top: 60px; } a span { position: absolute; top: 0; left: 50%; width: 24px; height: 24px; margin-left: -12px; border-left: 1px solid #fff; border-bottom: 1px solid #fff; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); box-sizing: border-box; } 2. 화살표 × 서클 이곳은 방금 화살표..
전체적으로 메인페이지를 만들 때는 내비게이션 바를 만들 때보다 더 쉬웠던 것 같다. 적용하기에 어려운 부분은 애니메이션처럼 움직이는 부분이었고 나머지는 할만했다. ✌🏻 Background Image 🖼 배경 이미지에 적용하고 싶었던 효과는 크게 두 가지였다. ☝🏻, 스크롤을 해도 고정되어 있을 것. ✌🏻, 화면에 표시되는 폰트보다 뒤에 있는 느낌으로 조금 어두울 것. 배경 이미지 고정 📌 이 부분은 구글링으로 아주 쉽게 찾을 수 있었다. CSS .main_1 { background-image: url(images/main.jpg); height: 100vh; background-size: cover; background-attachment: fixed; } background-attachment: fix..
CSS는 상대적으로 배우기 쉽고 재미있습니다. 웹 개발 초심자에게는 이만큼 접근하기 좋은 게 없죠.CSS는 분명 쉽고 재밌지만, 작업이 고도화될수록 불편함도 같이 커집니다. 불필요한 선택자(Selector)의 과용과 연산 기능의 한계, 구문(Statement)의 부재 등 프로젝트의 규모가 커질수록 아쉬움도 같이 커지죠. 하지만 웹에서는 표준 CSS만 동작할 수 있기 때문에 다른 선택권이 없습니다.그렇다면 우리는 앞으로 계속 CSS만 사용해야 할까요?CSS Preprocessor 란?HTML, CSS를 다루는 분이라면 한 번은 들어봤을 Sass, Less 등이 있습니다. 이 친구들은 CSS 전(예비)처리기 입니다. 보통 CSS Preprocessor 라고 부릅니다.CSS가 동작하기 전에 사용하는 기능으로,..