목록전체 글 (529)
안녕하세요
리액트에서 component가 될 부분의 class 명은 첫 글자를 대문자로 합니다. jquery에서 css 속성을 {}로 변경하는 방법입니다. $('.TopBanner').css({ display: 'none' }) js로 class를 toggle하는 방법입니다. function closeBanner() { document.querySelector(".TopBanner").classList.toggle("on"); } 함수선언식으로 표현하는 방법입니다. var closeBanner = () => { document.querySelector(".TopBanner").classList.toggle("on"); } jquery로 slideToggle을 적용하면 편리하게 슬라이드 애니메이션을 구현할 수 있습니..
![](http://i1.daumcdn.net/thumb/C150x150.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/HrKxo/btrI1hFT5Ie/GzBQ8yXLqQzmqkK0YsPPuK/img.png)
리액트로 만들어진 페이지는 router 로딩에 딜레이가 없습니다. 리액트 앱을 실행시키려면 npm install로 설치를 먼저 해야합니다. npm build를 하면 index.html 파일이 만들어집니다. float 사용방법입니다. div.top : 100%, 아래에 위치한 div.left, div.right : 각각 50% .About02 .top { float: left; width: 100%; } .About02 .left { float: left; width: 50%; } .About02 .right { float: left; width: 50%; } 한 이미지를 클릭하면, 다른 태그에 있는 이미지를 클릭한 이미지로 바꾸는 기능을 구현합니다. [ 페이지주소 ][ js ] jquery에서는 attr..
![](http://i1.daumcdn.net/thumb/C150x150.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/c9V1xJ/btrI8SRnI9z/oBoHFf7TsKpHIi9awR9EUK/img.png)
구매하기 버튼은 클라이언트마다 다르지만 중요하기 때문에 강조되어 있는 것을 좋아하기도 합니다. 너무 눈에 띄지 않는 것은 안됩니다. 호버로 이미지를 다 덮어서 제품을 보이지 않도록 하는 것은 권장하지 않습니다. logo는 무슨 일이 있어도 훼손하면 안됩니다. 텍스트는 가능하면 마름모꼴을 만들도록 합니다. 따옴표는 이쁜 폰트를 따로 적용하는 것도 좋습니다. 마우스를 가져다 대야 나타나는 것 보다는 최초에 다 보이도록 하는 것을 권장합니다. 리스트에 점을 찍는것은 왼쪽이나 오른쪽 정렬일 때만 사용합니다. 텍스트 가운데 정렬일 때는 좋지 않습니다. 섹션 이름을 tab으로는 짓지 않습니다. tab은 기능입니다. [ 주얼리 웹코딩 ] [ html / css / js ]
![](http://i1.daumcdn.net/thumb/C150x150.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/brj5DC/btrIPX0TC8Q/ruDJYqF1G0GazxtG2Htow1/img.png)
메모를 실수로 날려버렸습니다... 내일 학원에서 파일을 다시 보며 기억을 살려 메모를 해보도록 합니다. 주얼리 주제와 마우스 이벤트를 넣는 것이 목표였지만 어느 쪽도 쉽지 않습니다. [ 주얼리 웹코딩 ] [ html / css / js ] align-self 를 이용하면 width: 100%;처럼 박스 내에서 커지도록 할 수 있습니다. align-self: stretch; 박스 두개를 float:left; wirdth:50%를 적용하면 각각 50%씩 자리를 차지하여 display: flex; flex: 1; 같은 배치가 됩니다. .Business .inner > div { float: left; width: 50%; padding: 0 15px; }