일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- echarts
- React-native
- javascript
- react bits
- KBW
- api 35
- toy project
- JS
- React
- Threppa
- 문제
- css
- miniproject
- mini
- wescanner
- project
- 구조화된 데이터
- next.js
- Tanstack Query
- useForm
- 일본 우편번호 api
- html
- 이중map
- useEffect
- teamproject
- react-hook-form
- ToyProject
- 다중map
- 팀프로젝트
- Today
- Total
목록분류 전체보기 (98)
블로그 이름을 입력해주세요

전편 javascript에서 document.getElementById('test').innerHTML = '한번만 바꿔라 쪽팔리게잇!' 이렇게 자바스크립트를 구성하면 된다고 했다 document는 문서 getElementById는 아이디를 가지고 있는 놈을 찾아줘~ . innerHTML은 HTML을 변경해줘~ 라고 했는데 너무 길다 이걸 짧게 줄일 수 있는 게 jQuery다 jQuery를 잘 쓰면 긴 코드를 축약할 수 있습니다 사용하기 전 jQuery는 html에 import 시켜야 사용할 수 있죠 이걸 복사해서 HTML의 head든 body든 붙여넣으면 된다 CDN이라고 하는데 사용 법이니 자세한 건 묻지 마요 https://releases.jquery.com/ jQuery CDN The integr..

그동안 CSS로 어렵사리 만들어본 작동기능들 이제는 js로 쉽게 해보자 HTML hello JS! 이것을 자바스크립트 문법을 통해 바꿔보겠다 먼저 자바스크립의 기능을 구현하려면 h3에 id를 줘야한다 hello JS! 한글도 가능! 그리고 document 문서 getElementById('아무거나이름') 찾은 아이디 innerHTML 이기능으로 '헬로제이에스' 바꿔줘 hello JS! h3에 id가 '아무거나이름' 이니까 h3를 바꿔줘 여기서 innerHTML은 안에있는HTML을 바꿔 뭐로 '헬로제이에스!'로 참고 - 코딩애플 MDN - javascript MDN에서는 개발자가 되기위한 자바스크립트 코스같은것도 마련해 놓은거 같은데 유료강의나 다른걸 사기전 맛보기로 봐도 좋을거 같아요 이어서 >>>

자바스크립트를 이용하면 쉽지만 CSS의 transition만으로도 간단하게 화면을 꾸밀 수 있다 CSS .navibar-search input { box-shadow: 3px 2px 1px #041562; border-radius: 5px; border: none; width: 150px; transition: all 1s; color: #041562; } .navibar-search input:focus { width: 300px; } transition = 1s(1초)에 걸쳐 시작과 최종 스타일을 보여줘 focus = 검색 창을 눌렀을때 가로 150px(시작) 에서 300px(최종)으로 보여줌 1초에 걸쳐서 나머지 css는 검색 창을 꾸미는 용도라 신경쓰지 않아도 된다 그냥 input창으로 연습가능 ..

왼쪽 스크롤은 내려가고 오른쪽 이미지는 고정된다 이 기능으로 재밌는 css를 꾸며 볼 수 있다 position-sticky이다 HTML Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. Lorem Ipsum is simply dummy text of the printing and typesetting industry. L..

CSS 애니메이션을 줄 수 있는 방법 transform 먼저 transform의 주요 기능들 transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: perspective(17px); transform: rotate(0.5turn); transform: rotate3d(1, 2.0, 3.0, 10deg); transform: rotateX(10deg); transform: rotateY(10deg); transform: rotateZ(10deg); transform: translate(12px, 50%); transform: tran..

CSS가 많아지면 코드가 길게 이어지기 마련 그럴 때 좀 효과적으로 코드량을 줄일 수 있다 빠르고 쉽게 CSS .btn-green { color: green; width: 100px; height: 100px; padding: 20px; } .btn-red { color: red; width: 100px; height: 100px; padding: 20px; } .btn-blue { color: blue; width: 100px; height: 100px; padding: 20px; } 이런 박스를 만든 css 코드가 있다 중복되는 width, height, padding 이런 거를 .btn-blue, .btn-red, .btn-green { width: 100px; height: 100px; paddi..

프론트엔드를 준비하시는 분이라면 한번쯤은 들어봤을 bootstrap이다 css를 특히 반응형을 만들때 아주 효과 적이고 시간을 획기적으로 단축시켜 주는 일종의 라이브러리이다 이 Bootstrap은 링크를 불러옴 쉽게 말하면 bootstrap에 저장되어 있는 고유 디자인 툴을 나의 css로 불러오는 것 여기서 bootstrap 클래스를 사용하게 되는데 Card title Some quick example text to build on the card title and make up the bulk of the card's content. Go somewhere 코드를 보면 class= card 또는 class= card-img-top 등 지정된 클래스를 사용해야 부트스트랩을 쓸 수 있다 여기서 내가 css..

박스를 이리저리 옮기고 위드랑 하이트 값을 이리저리 만들어 줘도 클론 코딩을 할 때, 혼자 만들어 볼 때, 따라서 코드만 쳐볼 때 등등 분명 똑같이 했는데 나는 다른 box크기가 나오면 당황하게 된다 예를 들어 이미지 첫번째는 원래 애니메이션을 줘 정사각형의 모양으로 좁혀 들어가는 효과를 줘야 한다 그런데 오른쪽으로 박스가 좀 더 나와 라이트와 바텀이 안 보이는 것을 볼 수 있다 이럴 때 box-sizing: border-box; 한 번 줘보자 이 코드가 이렇게 이렇게 어떤 원리로 돌아간다! 자세하게 설명 할 순 없지만 box-sizing을 주지 않으면 이런 식 이 아닐까 싶다 부모 컨테이너 여백에 자식을 포함시키지 않기 때문인 거 같다 box-sizing을 준 상태 결과 잘 나오는 애니메이션! 그래서 ..