CSS

HTML & CSS

CSS 적용 우선순위 (Specificity), JS로 style 다루기

두 줄 요약 CSS 적용 순서 : !important;(사용금지) > inline > id > class > tag inline CSS 모두 날리기 : element.style = ""; 출처는 이번에도 Kyle 형님이다. 대단한 형님이다. 공부한 내용을 정리해본다. youtu.be/CHyPGSpIhSs 코드펜 See the Pen CSS Specificity Practice by Richard JEON (@hj-rich) on CodePen. 정리스샷 CSS 적용에 관한 명확도 규칙 : CSS Specificity 1. 명확하게 지칭할수록 적용순위가 높다. !important > inline > id > class > tag (단, important는 절대 사용하지 않는다. NAVER) 2. 마치 금은..

HTML & CSS

CSS에 변수와 계산식을 사용해보자! - calc(var(--myVar) + 180px)

두 줄 요약 : css 전역변수 선언과 호출, css에 calc를 이용한 계산식 사용 1. :root { --myWidth: 180px; --myColor: 180;} 2. width: calc(100% - var(--myWidth)); background-color: (calc(var(--myColor) + 100), 51, 180); 출처 : youtu.be/x7EWFoRzAkk Web Dev Simplified 라는 채널을 운영하고 있는 Kyle 형님이다. 잘생기고 목소리도 좋고 캠위치와 크기, VS code와 live server 화면분할, 단계적 레슨, 활용도까지. 정말 어마무시한 형님이다. 매 영상마다 시작할 때 너의 드림 프로젝트를 시작할 수 있게 웹을 심플하게 해주려 한다는데 암튼 정말 어..

리차드
'CSS' 태그의 글 목록