Programming/CSS
-
sass 변수 사용Programming/CSS 2022. 2. 9. 23:07
CSS를 편리하게 다룰 수 있게 해주는 Sass. 쌩 CSS를 작성하고 관리하는 것보다 어떤 점이 편리해지는지 예시를 기록한다. 변수를 사용할 수 있다. 개발 시 사용할 각종 자원들―색상 hex code 등, 폰트 size, line height, letter spacing 등―을 변수로 지정하여 중복되는 입력, CSS 코드 유지보수를 편리하게 해준다. sass에서 변수를 선언하여 사용할 수 있다. $변수명: 값; 값에는 CSS value에 해당하는 것들을 넣을 수 있다. // CSS p { transition: color 200ms ease-in; color: #000; } //SCSS $transition-1: color 200ms ease-in; $black: #000; p { transition:..
-
css 초기화Programming/CSS 2022. 2. 9. 19:09
html의 기본 스타일을 초기화하는 방법 1. Reset CSS https://meyerweb.com/eric/tools/css/reset/ CSS Tools: Reset CSS CSS Tools: Reset CSS The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on. The general reasoning behind this was discussed in a May 2007 post, if you're inter meyerweb.com 2. Normalize.css https://nec..
-
form 입력창 border 설정 소소한 팁Programming/CSS 2021. 4. 13. 02:05
좌측은 목표 이미지이고 우측은 직접 마크업한 이미지이다. 내가 해결하고자 하는 문제는 두 가지이다. 1. 좌측과 같이 이메일 입력란과 비밀번호 입력란 사이에 border가 겹쳐보이지 않을 것 2. focus 시 위에서 언급한 부분의 box-shadow가 묻혀보이지 않을 것 html 마크업은 다음과 같이 작성했다. CSS는 다음과 같이 작성했다. 문제1 해결 각각의 input에 border-top, border-left, border-right...이렇게 설정하는 방법은 좋지 않아보였다. 고민하다가 클론 대상 사이트를 뜯어보고 발견한 방법은 바로 input의 겹치는 한쪽에 margin-bottom을 -1px을 주는 것이었다. 문제2 해결 focus 시 z-index를 주어 box-shadow가 묻히지 않도..