여기서 뭘 얻어갈려 하지 마셔요

// element.style.:propertyName = propertyValueelement.style.setStyle('--variantName', variantValue)element.style.:propertyName 하려고 console에 찍어보니 나오지 않아 당황했다.style의 setStyle 함수를 이용하여 설정해주면 된다. 간단 box { --rotation: 0; transform: rotate(calc(var(--rotation) * 1deg));}const box = document.querySelctor('.box') // 방법1// const box = document.getElementByClassName('box') // 방법2box.styl..

icon에 drop-shadow를 하려고 했는데 속성을 부여하는 이미지에 따라 shadow가 결정돼서 아주 얇고 작은 아이콘에 확실한 효과를 주려니 투명도가 없어도 너무 희미했다. 그래서 배경을 원형 그라데이션으로 줄 수 있는 방법이 없나 찾아보다 발견하게 되었다. Radial Gradient radial-gradient() - CSS: Cascading Style Sheets | MDN The radial-gradient() CSS function creates an image consisting of a progressive transition between two or more colors that radiate from an origin. Its shape may be a circle or an ..

[Sass] Sass란? Sass에 대해 알아보자 [ Sass ] Sass(Syntactically Awesome StyleSheets)는 CSS pre-processor로서 CSS의 한계와 단점을 보완하여 보다 가독성이 높고 코드의 재사용에 유리한 CSS를 생성하기 위한 CSS의 확장이다. CSS despiteallthat.tistory.com [CSS] CSS, SASS, SCSS 차이점, 사용방법 ⏲ TL;DR SASS와 SCSS는 CSS를 편리하게 사용할 수 있도록 하며 추가 기능 또한 있는 확장판 스크립트 언어 SASS, SCSS에서 기존의 CSS의 기능 부재 단점을 보완한 다양한 기능 추가 SASS는 들여 쓰기+줄 바 cocoon1787.tistory.com Sass(SCSS) 적용하기 📝 개..

https://nykim.work/84 반응형 웹 뚝딱 만들기 (1) - 뷰포트 메타태그와 미디어 쿼리 이 글은 공동 기술 블로그(tech.yeon.me)에도 올린 글입니다. (여기에서도 숨겨진 좋은 글을 발견할지도 몰라요!) 프롤로그 모바일 사용자가 점점 늘어나는 요즘 반응형으로 만든 웹 사이트를 쉽게 nykim.work https://nykim.work/85 반응형 웹 뚝딱 만들기 (2) - vw, vh, vmin, vmax, em, rem 속성 프롤로그 지난 글에는 반응형을 위해 필요한 뷰포트 메타태그와 미디어 쿼리에 대해 다뤘었는데, 이번에는 CSS 속성을 통해 좀 더 편하고 쉽게 반응형을 만드는 방법을 알아보려고 합니다 🤟 히 nykim.work

https://tech.elysia.land/%EB%84%A4%EC%9D%B4%EB%B0%8D-%EC%BB%A8%EB%B2%A4%EC%85%98-bem-b291ba7bff01 네이밍 컨벤션 BEM 회사에 입사하기 전에는 “css는 그냥 돌아가기만 하면 됐지” 하고 id나 class 이름을 대충대충 적어서 코드를 짜는 일이 많았었습니다. 어차피 혼자 작업하는 것이고, 머리만 조금 싸매면 어렴풋 tech.elysia.land https://yeongseungjeong.tistory.com/57 [CSS] 네이밍 규칙 새로운 페이지를 만들때 항상 고민되는 변수명 짓기 Javascript에서는 흔히 Camel Case로 불리는 컨벤션 규칙을 사용한다. 띄어쓰기 없이 변수명을 붙여쓰되 이어지는 단어의 첫 글자는 ..

+ : Next-sibiling combinator a + b 태그 바로 다음에 오는 태그 첫번째 한개 ~ : Subsequent-sibling combinator a ~ b 태그 다음에 오는 모든 태그 형제들 여러개 * 여러 형제 요소들 중 첫번째 요소 제외하고 전체 적용시 유용! ref. https://ssocoit.tistory.com/274 [CSS] 모르면 평생 안쓸 미치도록 유용한 CSS 형제 결합자 HTML과 CSS를 이용해서 연속된 요소들을 순서대로 나열할 때 정해진 수치만큼 padding이나 margin을 주는 경우가 아주아주 빈번하게 발생합니다. 이 과정에서 보통 첫 요소에는 padding이나 margin이 필요 ssocoit.tistory.com https://developer.moz..

속성값 normal, bold, bolder가 각각 숫자로 표현할 때는 어떤 값인지 궁금해서 찾아보다가 normal : 400 bold : 700 ( legacy tag, go to a trash 🚮) But, bolder & lighter 는 정해진 값이 없고 부모 요소보다 상대적으로 굵거나 얇아짐. * 해당 폰트의 지원하는 굵기 범위 내에서 적용 * 800 -> extra bold 900 -> black ref. https://aboooks.tistory.com/139 [html/css] font-weight 속성 (bold, 100~900, bolder, lighter) [html/css] 글꼴 굵기를 지정하는 font-weight 속성 (bold, 100~900, bolder, lighter) 오..

border-box : width, height에 border, margin, padding 포함 content-box : width, height에 border, margin, padding 미포함 https://dasima.xyz/css-box-sizing-content-box-vs-border-box/