계발하는 개발자

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 (뭔가를 잡고 끌수있는듯한 느낌 줄때)

뷰를 시작하기 앞서, html 타이틀 바로 밑에 뷰 cdn 링크를 붙여넣어줍니다. 대규모 프로젝트 진행시에는 npm 설치해주는 것이 좋으나, 지금은 스터디하는 중이므로 cdn으로 진행했습니다. 👇뷰JS 스탠드얼론 버전의 CDN 링크는 아래 참고 https://rintiantta.github.io/jpub-vue/guide/chapter1.html 뷰 cdn을 태그 안에 에 넣어주고 나면 콘솔창에 위와 같이 찍힙니다. 위 메시지가 뜨면 이제 뷰를 사용할 수 있는 개발 환경이 설정되었다는 뜻입니다. 😆 이제 뷰JS로 아래의 예제들을 하나씩 테스트해보겠습니다. 1. 텍스트바인딩 먼저 new 키워드를 통해 Vue 인스턴스를 만들어줍니다. Vue에서 기본적으로 지정된 속성 내용들은 앞선 포스팅 내용을 참고 바랍니..

VueJS는 비교적 최근에 등장한 JavaScript Framework입니다. 또한 SPA(Single Page Application) 개발을 위한 프론트엔드 프레임워크로, 한 페이지에서 여러 데이터를 바인딩 처리해야하는 경우 유용하게 활용할 수 있습니다. View(html DOM): 사용자에게 보이는 화면. Model(JS): 데이터를 담는 용기, 보통 서버에서 가져온 데이터를 javascript 객체로 저장 ViewModel: View와 Model의 중간 영역으로 DomListener와 DataBinding을 제공하는 영역 DOM: HTML 문서에 들어가는 요소(tag, class, attribute 등)의 정보를 담고 있는 데이터 트리 DOM Listener: DOM의 변경에 대한 즉각적으로 반응하..

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