반응형 코딩4 번들러의 탄생과 이해(vite) 번들러를 설명하기 전에 먼저 자바스크립트의 태생을 보면 자바스크립트는 간단한 동작만을 위해 탄생했다 간단히 버튼을 눌렀을 때 무언가 동작을 하거나 css를 바꿔주는 정도이다 여러 개의 파일로 나눠서 개발하는 모듈 방식이 없는 채로 탄생했는데 여기서 모듈이란 쉽게 말해 여러개로 나눠서 작업한 다음 하나로 합칠 수 있는 것이다. 그러다 보니 하나의 파일에 수많은 개발자들이 수많은 코드를 작성한다거나 엄청난 양의 코드로 인해 관리도 힘들고 확장하기도 힘들다는 단점이 있다. 그렇다면 개발자들이 여러 개로 나누어서 파일을 만든 다음에 하나로 합치면?????? 그게 번들러이다 한마디로 여러 모듈이 모여서 하나의 번들러가 된다고 보면 될 거 같다. 출처 대표적인 번들러는 webpack이었는데 이게 다양한 부가 기능이.. 2023. 7. 5. CSS_변수로 색상 관리하기, 애니메이션 효과 넣기, 미디어 쿼리 색상 / 애니메이션 색상을 변수로 지정해서 관리 :root { --main-color: rgb(98, 220, 147);\ --sub-color: rgb(100, 55, 26); } css파일에 이렇게 변수를 지정 후 사용하고자 하는 요소에 넣어주면 된다. 넣을 때는 var뒤에 변수명을 쓰면 된다. div { width: 100px; height: 100px; background-color: var(--main-color); } 이렇게 하면 나중에 가져다 쓰기 편하다. 애니메이션 주기 transition div에 마우스를 hover했을 때 로고가 커지게 하기 div:hover img { width: 200px; } img { width: 100px; transition: all 1s ease-in-out.. 2023. 6. 27. < / > 클론 코딩-당근마켓__HTML & CSS (feat. 슈퍼코딩)_2 이번 글에서는 당근마켓 클론 코딩에서 사용했던 css에 대해서 알아보겠다. 참고로 클론코딩은 밑에서 확인할 수 있다. 2023.06.21 - [개발공부] - 클론 코딩-당근마켓__HTML & CSS (feat. 슈퍼코딩) 클론 코딩-당근마켓__HTML & CSS (feat. 슈퍼코딩) 당근마켓 클론 코딩(html, css) 진행 1. 구역 나누기 - 크게 3등분을 했다. - 시계와 배터리 정보, 역삼1동과 메뉴들이 있는 - 상품들이 전시되어 있는 - 가장 아래 '홈'부터 '나의 당근'이 있는 2. - 거 illdanjob.tistory.com 아, 혹시나 해서 하는 말이지만 이건 최종본이 아니다. 일단은 html과 css 작업을 해놓은 것이며 나중에 어느 정도 진행이 되면 깃헙을 통.. 2023. 6. 23. 무료 아이콘 공유 사이트 2023.06.21 - [개발공부] - 클론 코딩-당근마켓__HTML & CSS (feat. 슈퍼코딩) 이 글에서는 위 글에서 다뤘던 무료 아이콘 공유사이트인 Heroicons 사용 방법에 대해서 간단히 소개해 보겠다. 구글에서 '히어로아이콘'이라고 검색하면 미안하다 안 나온다. 다시 영어로 'heroicons'라고 검색한다. 그럼 이렇게 방패모양의 아이콘이 있는 사이트가 나온다.이게 귀찮은 분들을 위해서 링크를 공유해 놓겠다. https://heroicons.com/필요한 이미지를 검색하면 실시간으로 관련 아이콘들이 나온다. 이때 빨간색으로 테두리 되어있는 Copy SVG를 눌러서 복사한다. (밑에 거는 나도 뭔지 모른다. 선생님이 안 알려줬다.) VSCode로 넘어온다. 현재 작업 중인 폴.. 2023. 6. 22. 이전 1 다음 반응형
