Just Do IT!

프로젝트에서 로그인 페이지에서 '로그인 유지하기' 버튼 UI를 구현 중이었다. 체크하는 아이콘이 png 파일이어서 버튼 클릭했을 때 스타일을 어떤 식으로 변경해야 하나 고민하다가 구글링해서 찾아냈다! 나중에도 써먹을 수 있을 것 같아서 블로그로 남긴다. filter 기능 활용하기 filter 속성으로 이미지 색상을 자유자재로 변경할 수 있다. 이미지를 필터링을 주는 효과이지만, 아이콘 이미지(png/svg) 원하는 색상으로 변경용으로 사용하면 된다. 좀 더 자세히 알고 싶으면 아래 링크로! https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/invert invert() - CSS: Cascading Style Sheets | MDN The ..

Reset CSS? 브라우저마다의 기본 default 스타일이 아니라 동일한 css 스타일을 보여주기 위해 default 값을 초기화해주어야 한다. 즉, 브라우저의 기본요소의 다지안을 모두 없애는 것이다. 3대 브라우저 별 UserAgent Style Chromium(Chrome): https://chromium.googlesource.com/chromium/src/third_party/+/master/blink/renderer/core/html/resources/html.css blink/renderer/core/html/resources/html.css - chromium/src/third_party - Git at Google chromium.googlesource.com Gecko (Firefox..

margin border의 바깥쪽 여백 content의 영향을 받지 않는다 주변 요소와 거리를 두기 위핸 여백이다 auto, 음수는 margin만 가능하다 auto: 중앙에 배치, 좌우 균형은 균등하게 배치된다 padding content와 border 사이의 여백을 나타내는 영역 padding 역시 content의 일부라고 볼 수 있다 (예) background color가 존재하면 padding 영역도 영향을 받는다 auto X / 음수 X margin과 padding 사용법 속성 4개 : 시계방향(위, 오른쪽, 아래, 왼쪽) 순서 속성 2개 : 첫번째 값은 위와 아래 / 두번째 값은 오른쪽과 왼쪽 여백을 의미 속성 1개 위, 오른쪽, 아래, 왼쪽 모두 같은 값을 사용하게 된다 padding은 안쪽 ..