목록📌 Language/CSS (18)

계발하는 개발자

[CSS] cursor 속성

W3Schools CSS cursor demonstration Mouse over this area to see the cursor result. www.w3schools.com 가짓수가 많은 cursor 속성도 이번에 같이 정리해버리기로 했다. 자세한건 예시와 함께 w3c에 잘 소개되어있으니 참고하자!! - - - 자주 쓰이는 커서 속성 TOP 3 1) cursor : pointer (직접 누르는듯한 느낌 줄때) 2) nw-resize (좌측-사이즈 조정 가능하단 느낌 줄때) -> 비슷한 애로 nesw-resize(우측), ns-resize(위아래) 등이 있다. 3) grab (뭔가를 잡고 끌수있는듯한 느낌 줄때)
📌 Language/CSS 2023. 4. 25. 21:53
요소에 적용된 스타일을 읽어오는 방법 : Element.style 속성과 getComputedStyle() 메소드의 차이

브라우저에 렌더링된 요소의 스타일을 읽어오는 방법에는 두 가지가 있습니다. Element.style 속성 참조 getComputedStyle() 메소드 오늘은 엘리먼트 스타일에 접근하는 위 각 방법의 차이에 관해 포스팅하고자 합니다. # 각기 다른 방식으로 적용된 엘리먼트 첫번째 요소는 인라인 방식, 두번째 요소는 인터널 방식으로 각기 스타일을 적용한 모습입니다. 이제 js로 두 요소에 각기 적용된 스타일 값을 가져와보겠습니다. # 첫번째 요소의 스타일 값 가져오기 첫번째 요소의 노드 데이터를 가져와서 style 속성을 참조해보니, green 색상의 스타일 속성을 잘 가져올 수 있었습니다. 과연 두 번째 요소도 동일한 방식으로 스타일 값을 가져올 수 있을까요? # 두번째 요소의 스타일 값 가져오기 두번째..
📌 Language/CSS 2023. 4. 23. 14:10
JS에서 여러 CSS 스타일 한꺼번에 적용하는 방법: style.cssText

JS로 요소에 개별 스타일 속성을 지정해주느라 진땀뺐던 사람들을 위한 희소식! 전체 스타일 설정을 위한 cssText 프로퍼티에 관해 다뤄볼까 합니다. cssText - 여러 css 스타일을 한번에 지정해줘야 할 때 사용되는 전체스타일 설정 프로퍼티 ※ 단, 기존 스타일에 스타일을 추가하는 게 아닌 전체를 교체해버리기 때문에 주의 필요 -> 요소를 새로 만들고 여기에 스타일을 적용할때는 기존 스타일이 없기 때문에 사용 가능! cssText 를 몰랐을 때는... ele.style.margin: "15px", ele.style.color: "red", ele.style.fontSize: "20px" ele.style.backgroundColor: "aqua" . . 등등등 개별 스타일을 일일히 지정해줘야 하..
📌 Language/CSS 2023. 4. 23. 12:32
[CSS] 반응형 폰트 사이즈 단위 rem? em?

반응형 웹페이지 제작에 많이 쓰는 사이즈 단위인 rem, em에 대해 알아보겠습니다. 보통의 정적인 요소들에 폰트사이즈를 고정크기인 px(픽셀) 단위로 설정하는 게 일반적이지만, 화면 크기 배율에 따라 상대적인 폰트값을 적용하려는 경우가 생기기 마련입니다. 이때 사용하는 것이 rem, em 되겠습니다. 여기서 1.5em, 1.5rem은 각각 1.5배 해주는 것이라 보시면 됩니다. 앞서 '화면 크기 배율'에 따라 상대적인 크기값을 준다고 정의했는데요, 어떤 것이 배율의 기준이 될까요? 어떤 요소의 1.5배를 말하는 걸까요? 이에 대해 rem과 em은 서로 다른 특징을 지닙니다. rem은 문서의 최상위 부모인 html을 기준으로 배율값을 지정해주는 크기 단위입니다. rem의 뜻은 최상위를 뜻하는 root의 ..
📌 Language/CSS 2023. 2. 8. 02:27
이전 Prev 1 2 3 4 5 Next 다음