본문 바로가기

분류 전체보기69

[HTML/CSS] Sass란? SassSass(Syntactically Awesome Style Sheets)는 CSS의 단점을 보완하기 위한 Preprocessor(전처리 언어)이다. Sass는 css를 변수, 함수, import, 상속 등의 기능 같은 프로그래밍 언어를 작성할 수 있는 문법들을 제공한다.  개발환경 세팅웹 브라우저는 css 파일밖에 모르기 때문에 Sass로 코드를 짰으면 css 파일로 변환해 주는 변환기를 돌려 변환된 css 파일을 html 파일과 사용해야 한다.node.js를 설치해서 변환하는 대신 VScode 에디터를 활용해 보자. VScode의 extension 메뉴에서 Live Sass Compiler를 검색해서 높은 버전을 설치한다. (5.0.0 버전 이상) Sass 파일은 파일명.scss로 생성하면 된다.. 2024. 11. 27.
[HTML/CSS] head 태그에 들어갈 내용 정리 body 내용HTML 문서의 기본 템플릿은 꼭 head, body 태그를 포함해야 한다.head 태그는 사이트 내에서 눈에는 보이지 않는 중요한 정보들이 들어갈 수 있는데, head 태그 내에서 쓸 수 있는 중요한 태그들을 몇 가지 나열해 보자.   1. 각종 css 파일들css 파일들을 첨부할 때 링크 태그를 집어넣을 수 있다.위 경로는 현 html 파일과 같은 위치에 있는 css 폴더 내의 main.css 파일을 첨부하라는 뜻이다.(1) css/main.css(2) /css/main.css(1)은 상대경로로 현재 html 파일과 같은 경로에 있는 css라는 폴더 내의 main.css 파일을 의미,(2)는 절대경로로 현재 사이트의 메인 경로(abcd.com)부터 시작해서 abcd.com/css/main.. 2024. 11. 21.
[JavaScript] Switch 문법 if else 문법 대신 쓸 수 있는 switch라는 문법이 있다.if else 문법으로도 모든 걸 할 수 있지만 좀 더 간단하게 적고 싶을 때 switch 문법을 사용한다. switch 문법 사용법// 문법switch (변수){ case 값1 : 실행문; break; case 값2 : 실행문; break; case default : 실행문;}// 사용법let 변수 = 2 + 2;switch (변수){ case 3 : alert('변수가 3이네요'); break; case 4 : alert('변수가 4네요'); break; case default : alert('아무것도 해당 안 됨'); break; }▲ switch의 소괄호에는 조.. 2024. 10. 24.
[JavaScript] 캐러셀에 스와이프 기능 만들기 & 터치 이벤트 보호되어 있는 글 입니다. 2024. 10. 23.
[JavaScript] 스크롤 위치에 따라 변하는 애니메이션 보호되어 있는 글 입니다. 2024. 10. 22.
[JavaScript] position : sticky 활용하기 보호되어 있는 글 입니다. 2024. 10. 21.
[JavaScript] localStorage 브라우저에는 저장 공간이 여러개 있다.크롬 개발자 도구의 Application 탭에 들어가면 확인할 수 있다.[Local Storage / Session Storage] : key : value 형태로 문자, 숫자 데이터 저장 가능[Indexed DB] : 크고 많은 구조화된 데이터를 DB처럼 저장 가능[Cookies] : 유저 로그인 정보 저장 공간[Cache Storage] : html, css, img 파일 저장해 두는 공간 Local Storage / Session Storage는 문자, 숫자만 key : value 형태로 저장 가능하고, 5MB까지만 저장 가능하다.Local Storage는 브라우저에 재접속해도 영구적으로 남아 있어 유저가 브러우저 청소하지 않는 이상 반영구적으로 데이터 저장이 .. 2024. 10. 18.
[JavaScript] DOM 개념 정리 & load 이벤트 보호되어 있는 글 입니다. 2024. 10. 17.
[JavaScript] array에 자주 사용하는 sort, filter, map 함수 sort()- 배열의 요소를 정렬하는 함수.- 배열의 요소들을 문자열로 취급하여 기본적으로 오름차순 정렬을 한다.- 원본 배열을 변경한다.[숫자]var array = [7, 3, 5, 2, 40];array.sort();console.log(array); // [2, 3, 40, 5, 7] 출력▲ 오름차순 정렬인데 위와 같이 결과가 나오는 위유는 sort()는 배열의 요소를 문자로 취급해서 정렬하기 때문이다.var array = [7, 3, 5, 2, 40];// 숫자를 올바르게 정렬하려면 비교 함수를 사용array.sort(function(a, b){ return a - b // 오름차순 console.log(array); // [2, 3, 5, 7, 40] 출력});array.sort(functi.. 2024. 10. 15.
[JavaScript] Ajax 개념 정리 서버란?- 유저가 데이터를 달라고 요청하면 데이터를 보내 주는 간단한 프로그램- 서버 데이터를 요청할 때는어떤 데이터인지 url로 기재하고어떤 방법으로 요청할지 결정해야 (GET/POST 등)데이터를 보내 준다.  GET/POST 요청하는 법- GET 요청 : 서버에 있던 데이터를 읽고 싶을 때 주로 사용- POST 요청 : 서버로 데이터를 보내고 싶을 때 사용 (서버는 유저 데이터를 DB에 저장해 주는 역할도 함)- PUT, DELETE 요청도 있음 GET 요청을 날리는 가장 쉬운 방법은 브라우저 주소창이다. 주소창에 URL 적으면 그곳으로 GET 요청을 날려 준다. POST 요청을 날리는 방법은 태그를 이용하면 된다. 폼이 전송되었을 때 POST 요청을 날려 준다.그런데 이렇게 GET, POST 요.. 2024. 10. 15.
[React] To Do List 만들기 - 3 리액트로 To Do List 만들기📖 사용 기술Editor : VScodeLanguagehtmlcssReact.js배포: Github.io 클릭 📂 컴포넌트 구조📂 src ├── 📂 components │ ├── 📄 AddTodo.js # 할 일 추가 컴포넌트 │ ├── 📄 Container.js # 레이아웃을 담당하는 컨테이너 컴포넌트 │ ├── 📄 Title.js # 타이틀 컴포넌트 │ ├── 📄 TodoList.js # 할 일 목록 컴포넌트 ├── 📄 App.js # 메인 애플리케이션 컴포넌트 └── 📄 App.css # 글로벌 스.. 2024. 10. 14.
[JavaScript] <select>, 자바스크립트로 html 생성하는 법, forEach, for in 반복문, arrow function - HTML에서 사용 되는 폼 요솔, 드롭다운 리스트 또는 선택 박스를 생성하는 데에 사용된다.- 요소 안에 여러 개의 요소를 포함하여 각 항목을 정의한다.- 선택시 input, change 이벤트가 발생한다.- value로 유저가 입력한 값을 가져올 수 있다. 상품선택 모자 셔츠 (▲ Bootstrap이 설치되어 있으면 예쁘게 나옴)   Q. 사용자가 셔츠를 선택하면 하단에 사이즈를 선택할 수 있는 박스가 나타나게 하려면? 상품선택 모자 셔츠 95 100 미리 를 하나 더 추가하고, .form-hide 클래스에는 display: none을 주었다.그리고 사용자가 선택한 값이 셔츠이면 form-h.. 2024. 10. 10.