일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 | 31 |
- 프로그래머스코딩테스트
- next.js 에러
- 정보처리기사
- mysql
- 코딩테스트
- 프로그래머스
- 코딩
- 프로그래머스 코테
- 코테공부
- 개발자
- 프로그래머스 Lv.0
- js
- 코테준비
- 코테스터디
- 1일1코테
- next.js
- Redux-Toolkit
- 프로그래밍
- html
- 알고리즘문제
- 알고리즘스터디
- CSS
- 정처기기출
- 프로그래머스코테
- 자바스크립트
- 프로그래머스 알고리즘
- 프로그래머스알고리즘
- 프로그래머스 레벨0
- 프로그래머스 코딩테스트
- 알고리즘공부
- Today
- Total
목록📌 Language (61)
계발하는 개발자
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/wOgG3/btscIIl1evM/KsYd3vyrA9pWkfpEDRMjE0/img.png)
사이트들을 보면 꼭 있는 필수 기능인 상단이동버튼 구현에 관한 포스팅도 정리차 올려보려합니다. Window.scrollTo() Javascript는 Window.scrollTo()라는 메소드를 제공합니다. 해당 메소드는 Window 내에서 사용자가 원하는 위치로 스크롤을 이동시킬 수 있습니다. // 기본 형태 window.scrollTo(x-좌표, y-좌표) scrollTo의 인자로 behavior를 추가하면 모션 설정도 가능합니다. 참고로, smooth 모션 미추가시 이동버튼을 클릭하게되면 슝~하면서 이동하는 과정없이 화면이 깜빡이면서 바로 상단으로 이동하게 됩니다. 이 동작이 많이 부자연스럽기 때문에 smooth 모션도 꼭! 설정해주기 ! // behavior에는 auto와 smooth를 입력할 수 ..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bE14BS/btscJr5ktUM/CQLNqi2rcUkltNrodJCwNk/img.png)
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 (뭔가를 잡고 끌수있는듯한 느낌 줄때)
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/yDhY4/btsbTphAWbI/ahziqpXMRP3n6FrKjLGslK/img.jpg)
브라우저에 렌더링된 요소의 스타일을 읽어오는 방법에는 두 가지가 있습니다. Element.style 속성 참조 getComputedStyle() 메소드 오늘은 엘리먼트 스타일에 접근하는 위 각 방법의 차이에 관해 포스팅하고자 합니다. # 각기 다른 방식으로 적용된 엘리먼트 첫번째 요소는 인라인 방식, 두번째 요소는 인터널 방식으로 각기 스타일을 적용한 모습입니다. 이제 js로 두 요소에 각기 적용된 스타일 값을 가져와보겠습니다. # 첫번째 요소의 스타일 값 가져오기 첫번째 요소의 노드 데이터를 가져와서 style 속성을 참조해보니, green 색상의 스타일 속성을 잘 가져올 수 있었습니다. 과연 두 번째 요소도 동일한 방식으로 스타일 값을 가져올 수 있을까요? # 두번째 요소의 스타일 값 가져오기 두번째..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/IkCGo/btscfDrn5DC/kbQLMgNZT6ZK2w6M8DhIH0/img.png)
JS로 요소에 개별 스타일 속성을 지정해주느라 진땀뺐던 사람들을 위한 희소식! 전체 스타일 설정을 위한 cssText 프로퍼티에 관해 다뤄볼까 합니다. cssText - 여러 css 스타일을 한번에 지정해줘야 할 때 사용되는 전체스타일 설정 프로퍼티 ※ 단, 기존 스타일에 스타일을 추가하는 게 아닌 전체를 교체해버리기 때문에 주의 필요 -> 요소를 새로 만들고 여기에 스타일을 적용할때는 기존 스타일이 없기 때문에 사용 가능! cssText 를 몰랐을 때는... ele.style.margin: "15px", ele.style.color: "red", ele.style.fontSize: "20px" ele.style.backgroundColor: "aqua" . . 등등등 개별 스타일을 일일히 지정해줘야 하..