IT 공부 블로그

https://material.io/resources/color/#!/?view.left=0&view.right=0 Color Tool - Material Design Create and share color palettes for your UI, and measure the accessibility of any color combination. material.io https://css-tricks.com/snippets/css/a-guide-to-flexbox/ A Complete Guide to Flexbox | CSS-Tricks Our comprehensive guide to CSS flexbox layout. This complete guide explains everything about f..

출처: https://yuricoding.tistory.com/4 [CSS] CSS 공부방법! 게임으로 배우는 CSS 코딩공부를 하면서 정말 여러가지 강의를 접했다.... 그중 CSS학습에 도움이 될만한 좋은 사이트가 있어 블로그에 공유한다. 이 사이트는 유튜버 드림코딩의 엘리님의 강의를 듣고 알게된 사이트 yuricoding.tistory.com https://flukeout.github.io/# CSS Diner A fun game to help you learn and practice CSS selectors. flukeout.github.io https://flexboxfroggy.com/#ko https://dev.to/devmount/8-games-to-learn-css-the-fun-way-..

참고 : https://developer.mozilla.org/ko/docs/Web/CSS/Using_CSS_custom_properties 사용자 지정 CSS 속성 사용하기 (변수) - CSS: Cascading Style Sheets | MDN 사용자 지정 속성(CSS 변수, 종속 변수)은 CSS 저작자가 정의하는 개체로, 문서 전반적으로 재사용할 임의의 값을 담습니다. 사용자 지정 속성은 전용 표기법을 사용해 정의하고, (--main-color: black;) developer.mozilla.org 사용방법은 사용자 지정속성을 표시하는 : 을 앞에 붙여서 사용 가능 :root{ --base: yellow; --spacing: 10px; --blur: 10; } 선언한 변수에 --로 다 시작되는데 왜..

참고 : https://kingji8life.tistory.com/133 [CSS] 이미지 중심점 바꿔서 회전 시키기 (transform:rotate, transform-origin) 선택자 {transform:rotate(회전값)} : 이미지나 박스에 한하여 회전값 주기. (회전값 단위=deg) 선택자 {transform-origin:중심점 위치 설정} : 회전 시, 회전 축 설정. left, right, top, bottom, center 설.. kingji8life.tistory.com transform-origin: right; transform: rotate(40deg); transform-origin으로 회전 중심점을 선택하여 회전 시킬수있음

position:fixed;top:150px; left:30px;box-shadow : rgba(0,0,0,0.5) 0 0 0 9999px, rgba(0,0,0,0.5) 2px 2px 3px 3px;z-index : 100;위 css 적용하면 특정요소 외 전부다 검게 처리됨

z-index를 적용할 Element에는 반드시 position이 필요하며 position은 absolute만 적용되는듯 하다z-index의 숫자값이 클수록 앞에 배치되고 작을수록 뒤에 배치된다 만약 적용할려는 Element가 어떤 Element의 자식이면 부모의 z-index값에 따라 적용이 되지않을수있다부모의 z-index값이 0이면 자식이 아무리 값을 높여도 0으로 인식된다

css 수정하고 저장하고 chrome 설정에 캐시삭제하고 상당히 번거롭다그래서 F12를 누르고 개발자도구에서 간단하게 테스트해볼수있다왼쪽에서 Element를 하나 선택하고 오른쪽의 style에 css를 추가하면 적용할수있다 이걸로 테스트한후 값을 복사하여 옮긴후 저장 computed를 누르면 해당 Element의 padding, margin등을 설정할수있다

.fixed_header{ width: 400px; table-layout: fixed; border-collapse: collapse;} .fixed_header tbody{ display:block; width: 100%; overflow: auto; height: 100px;} .fixed_header thead tr { display: block;} .fixed_header thead { background: black; color:#fff;} .fixed_header th, .fixed_header td { padding: 5px; text-align: left; width: 200px;} -----------------------------------------------------------..