whatisthis?

React.js 선언형 코드를 예측 가능하고 디버그하기 쉽게 만들어줌. 컴포넌트 기반 다양한 형식의 데이터를 앱 안에서 손쉽게 전달할 수 있고, DOM과는 별개로 상태를 관리할 수 있음. 💡 웹팩(webpack)의 기능 - 쪼개진 js 파일을 html이 실행할수 있는 하나의 파일로 합쳐준다. React 클래스 컴포넌트 HTML like-button.js const e = React.createElement; class LikeButton extends React.Component { constructor(props) { super(props); } render() { return e("button", null, "like"); } } 클래스형 컴포넌트 - class 클래스명 extends React.Co..

BookStore UI -codepen 🏆 KEY POINTS display: flex와 flex-shrink position: absolute FontAwesome 사용 - 다른 방법! @import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css); .rating > label::before { display: inline-block; font-size: 0.9em; font-family: FontAwesome; content: "\f005"; } transition과 가상클래스 overflow overflow와 text-overflow의 차이는? text-overflow: ellipsis 텍스트가 넘치면 ellipsis (..

Modal pop-up - without JS 📌 기본 원리 - 을 해서 해당 div#popup에 가상클래스 :target을 준다! - display block과 none 토글되게 - 닫기버튼에는 로 다시 되돌린다. HTML Open modal 닫기 CSS #popup { display: none; } #popup:target { display: block; } 🔻 응용 예제 위 원리를 이용해서 응용 예제를 만들어보자. div#popup에 class도 추가해서 스타일 하나를 가지고 여러개의 모달을 만들 수 있게. 또한, display: block이아니고 display: flex를 해서 가운데정렬도 덤으로 할수 있게. index.html Open Modal A Open Modal B Open Modal C..

Slide Page - only CSS - without JS - 📃 실습하면서 알게된 점 기록 여지껏 js로 복잡하게 하던 방식 대신, js를 하나도 안쓰고 오로지 css와 :checked 선택자 만으로 슬라이드를 구현할 수 있다고 한다. 📌 :checked - CSS 가상클래스 - 선택했거나 on 상태인 radio, checkbox, option요소를 나타냄 __ 📌 CSS sibling element 관련 결합자 ~ : 이후 형제요소 다같이~ 선택하는 느낌. + : 바로 다음에 위치하는 형제요소만 선택. >> 바로 다음 형제만 필요하면 + / 그 외가 필요하면 ~ 쓰기. p ~ span { color: red; }​ 이건 빨강이 아닙니다. 여기 문단이 있습니다. 그리고 코드도 있습니다. 이제 빨강입..

슬라이드 페이지 (2) 터치형(드래그) - 📃 실습하면서 알게된 점 기록 📌touch 이벤트 changedTouches The TouchEvent.changedTouches property is a TouchList object that contains one Touch object for each touch point which contributed to the event. >> 즉, touchList 객체이므로 첫번째 아이템인 [0]을 가져온것. (터치가 여러군데 되면 여러 값 존재) +) 그 외에도 TouchEvent.targetTouches TouchEvent.touches 등의 프로퍼티가 존재함. ++) 터치 이벤트에는 (event) touchstart, touchmove, touchend, t..

슬라이드 페이지 (1) 버튼형 index.html (style 내장) First Second Third ⬅Left Right➡ app.js // Div 사이즈 동적 조절 const outer = document.querySelector(".outer"); const innerGrp = document.querySelector(".inner-grp"); const inners = document.querySelectorAll(".inner"); let currentIndex = 0; inners.forEach(inner => { inner.style.width = `${outer.clientWidth}px`; console.log(outer.clientWidth); }); innerGrp.style.wid..

Tab Menu - Tab Menu 다양한 css skill을 터득. 📃 실습하면서 알게된 점 기록 background: -webkit-linear-gradient(135deg, #667eea 0%, #764ba2 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; -webkit-background-clip과 color 🔺mdn 문서 참고 (-webkit-text-fill-color 와 color의 차이는?) background-clip - CSS: Cascading Style Sheets | MDN CSS background-clip 속성은 요소의 배경이 테두리, 안쪽 여백, 콘텐츠 상자 중 어디까지 차지할 지 지정합니..

🔻 j-Query 없이 만든 아코디언 메뉴 practice - css / js ) j쿼리 없이 아코디언메뉴 만들기 Accordion Menu (without jQuery) - 보통 아코디언 메뉴는 j쿼리를 이용하는데, j쿼리에는 slideToogle 등의 편리한 애니메이션 관련 메소드가 있기 때문! BUT! 나는 제이쿼리는 되도록 쓰지 않고 싶은 1人 으로 mywebproject.tistory.com Accordion Menu with jQuery .slideUp() 선택한 요소의 CSS height 속성값을 높여가며 사라지게 한다. (올라가면서 사라짐) .slideDown() 선택한 요소의 CSS height 속성값을 낮춰가며 나타나게 한다. (내려가면서 사라짐) .slideToggle() 선택한 요소..

🔻 j-Query 없이 만든 아코디언 메뉴 practice - css / js ) j쿼리 없이 아코디언메뉴 만들기 Accordion Menu (without jQuery) - 보통 아코디언 메뉴는 j쿼리를 이용하는데, j쿼리에는 slideToogle 등의 편리한 애니메이션 관련 메소드가 있기 때문! BUT! 나는 제이쿼리는 되도록 쓰지 않고 싶은 1人 으로 mywebproject.tistory.com Accordion Menu with jQuery - 나는 제이쿼리의 무거움을 기피 + 기본 자바스크립트에 충실하자! 는 마인드로 여태 jQuery를 굳이 안썼었다. - But. 언젠간 제이쿼리를 써야할 때가 있고, 현재 많은 페이지들이 제이쿼리로 구성되어있으므로 알고는 있어야 한다 (...) 따라서, 간단한..

Accordion Menu (without jQuery) - 보통 아코디언 메뉴는 j쿼리를 이용하는데, j쿼리에는 slideToogle 등의 편리한 애니메이션 관련 메소드가 있기 때문! BUT! 나는 제이쿼리는 되도록 쓰지 않고 싶은 1人 으로 .. (물론 지금 많은 페이지들이 제이쿼리를 사용하므로 배우는것은 필수라 생각) 바닐라 자바스크립트만을 사용해서 한번 구현해봐야겠다고 생각했다. - css 를 기반으로 클릭이벤트마다 class 추가 / 삭제 >> 이또한 j쿼리는 toogleClass 메소드로 if-else문 없이 깔끔하게 가능하지만 .. - 펼치고 접는 +, - 아이콘을 flex만으로 구현 + 애니메이션(트렌지션) 🔻 📃 실습하면서 알게된 점 기록 📌 css :hover시 선택자 예> div:ho..