✨ Front-end67 [HTML] 스프링(Spring)에서 파일 생성 시 형식 추가 세팅 파일 메뉴의 Window -> Preferences를 클릭한다. 검색창에 template를 치고, HTML Files를 찾아 Templates를 선택하면 위와 같은 창이 뜨는데, New 혹은 Edit을 클릭하여 창을 생성 또는 수정한 후 OK를 누른다. 생성 or 수정한 HTML 파일 만들어보기 위와 같은 방법으로 마지막에 Finish를 누르면 생성이 된다 ! 2023. 3. 17. [JavaScript] 전체 체크박스 항목 선택 및 해제, 체크 여부 변경 See the Pen Untitled by ParkJooHong (@ParkJooHong) on CodePen. 이번에는 자바스크립트만을 이용하여 체크박스를 간편하게 전체 선택 또는 해제 하는 방법에 대해 알아보았다. 첫번째 이벤트로, 체크박스 전체 선택 및 전체 해제에 대한 방법을, 두번째 이벤트로, 내용부에 있는 체크박스에 따라 제목줄 체크박스 체크 여부 변경에 대해서 자세히 기술해보려고한다. 위와 같이 HTML을 짜주고, body 태그가 끝나기 전에 js를 연결시켜준다. 첫번째 이벤트 체크 박스 전체 선택 및 전체 해제 기능을 해볼 것이다. 일단 제목줄에 있는 체크 박스를 선택해서 가져와야 한다. 나는 id태그에 checkAll을 주어 js로 가지고 왔다. 이후 체크박스 클릭시 실행되는 이벤트를 추.. 2023. 3. 9. CSS - div를 가운데 정렬 (inline-block) 이전 포스팅에서는 float과 overflow를 이용하여 div를 가운데 정렬해보았다. div를 가운데 정렬하기 위해서 또 한가지의 방법이 있다. 알아보자. HTML 삽입 미리보기할 수 없는 소스 .wrap > div { } 태그에 width를 추가하고, display 값을 inline-block으로 바꾸었다. .wrap > div { border : 1px solid black; background-color: maroon; width: 20%; display: inline-block; } float과 inline-block에는 차이점이 있다. float은 빈공간을 안띄워주고, inline-block은 공간을 띄워준다. 단, inline-block은 크기를 조절해주기가 float보다는 어려운 단점이 있다. 2023. 3. 7. CSS - div를 가운데 정렬 (float과 overflow) div를 사용했는데 내용을 중간으로 옮기고 싶을 경우가 있다. 아래와 같이 적용해보자 HTML 삽입 미리보기할 수 없는 소스 .wrap > div { } 태그에 width를 추가해주었다. .wrap > div{ /* >은 wrap의 자식 테이블 선택. */ background-color: fuchsia; border: 1px solid black; width: 20%; } .wrap > div { } 태그에 float을 추가해주었다. .wrap > div{ /* >은 wrap의 자식 테이블 선택. */ background-color: fuchsia; border: 1px solid black; width: 20%; float:left; } float를 적용시키면 인식을 못한다. 이 float을 감싸고 있.. 2023. 3. 7. [JavaScript] var, let, const의 변수 선언 방식과 각각의 차이 변수 사용시 반드시 선언이 필요하다. 변수를 선언할 때는 var, let, const를 사용한다. HTML 삽입 미리보기할 수 없는 소스 HTML 삽입 미리보기할 수 없는 소스 HTML 삽입 미리보기할 수 없는 소스 var ( 함수 레벨 ) [ 중복 선언 가능, 재할당 가능 ] let (블록 레벨) [ 중복 선언 불가능, 재할당 가능, 변하는 값을 저장할 때 사용한다. ] 블록 스코프는 { }를 통해서 영역을 구분하는 것이다. 블록 { } 안과 밖의 변수 이름이 같더라도 스코프가 다르므로 변수가 선언되고 각 변수에 할당된 값이 대체되지 않고 유지된다. this Var를 통해 전역에서 변수를 선언하게 되면 this를 통해 접근이 가능했었다. 하지만. let을 통해 접근하게 되면 this를 통한 전역변수의 .. 2023. 3. 3. [React] 리액트 JSX문법, State 알아보기 JSX란? JavaScript에 XML을 추가한 문법이다. 그러나, JSX는 리액트로 프로젝트를 개발할 때 사용되므로 공식적인 자바스크립트 문법은 아니다. 사용법 - JSX(JavaScript XML)은 일반적인 HTML처럼 사용하면 된다. 단, JSX에서 특별히 허용되는 문법과 지켜야 할 문법이 존재하며 이 문법만 숙지하면 기존의 HTML 코드 안에 JavaScript 코드를 넣어 사용하는게 가능하다. JSX 에서 지켜야 할 문법 1. 하나의 부모 엘리먼트가 반드시 감싸야 한다. 만약 어떤 요소로 감싸기 애매할 경우 Fragment를 사용하기도 하는데, 처럼도 사용할 수 있다. 다만, Fragment는 일반 태그보다 처리속도가 느리므로 사용을 지양하는것이 좋다. 2.자바 스크립트 표현식 3. if, f.. 2023. 2. 26. [React] 리액트 설치 방법과 개발 환경 세팅하기 1. node.js 를 깔아준다. https://nodejs.org/ko/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 2. Visual Studio Code를 깔아준다. https://code.visualstudio.com/ Visual Studio Code - Code Editing. Redefined Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and availa.. 2023. 2. 25. [JavaScript] 배열(Array)과 객체(Object) 차이, innerHTML 사용법 배열(Array)과 객체(Object) 차이, innerHTML 사용법 만약 상품을 만들었다면, 저장할 공간이 필요하다. 이때 Array 혹은 Object를 사용할 수 있다. 배열(Array) 구성하는 각각의 값을 배열 요소(element)라고 하며, 배열에서의 위치를 가리키는 숫자를 인덱스(index) 라고한다. 객체(Object) 이름(name)과 값(value)으로 구성된 프로퍼티(property)의 정렬되지 않은 집합이다. key : value형태로 저장가능 Array와 Object의 차이점 중 한가지는 "순서" 이다. Array는 자료간 순서가 존재하지만, Object는 순서개념이 없다. HTML에 를 이용해 javascript의 기능을 추가해보았다. HTML에서 콘솔 창을 열어 각각 배열과 객.. 2023. 2. 25. [JavaScript] 상품 리스트 만들어보기 Bootstrap을 이용해 상품을 만들어 버튼을 눌리면 하나 하나씩 볼 수 있도록 만들어보았다. HTML HTML 삽입 미리보기할 수 없는 소스 CSS HTML 삽입 미리보기할 수 없는 소스 JS HTML 삽입 미리보기할 수 없는 소스 먼저 tab-button을 다 찾아준다. 이 상태에선 아무거나 눌러도 코드가 실행된다. 그래서 바로 뒤에 .eq(0) 을 추가해준다. 이것은 querySelectorALL('.tab-button')[0] 이거랑 비슷하다. 이 코드를 반복문을 돌려서 풀려고 했으나, 제대로 작동하지 않아서 그냥 어떻게 쓰는지만 알아두었다. 아직까지 js를 쓰는게 많이 불편하다... See the Pen Untitled by ParkJooHong (@ParkJooHong) on CodePen. 2023. 2. 20. [JavaScript] jQuery 이용해서 이미지 슬라이드 만들기 (캐러셀) HTML HTML 삽입 미리보기할 수 없는 소스 CSS HTML 삽입 미리보기할 수 없는 소스 JS HTML 삽입 미리보기할 수 없는 소스 jQuery를 이용해서 if 대신 while을 넣어보았다. 그러자 갑자기 무한로딩에 걸려 어쩔수 없이 while을 쓰지 못해 코드가 굉장히 길어졌는데, 해결 방법에 대해 더 연구해보아야겠다. See the Pen Untitled by park (@johong) on CodePen. 2023. 2. 19. [JavaScript] 타이머 예제 setInterval, clearInterval, timeOut Timeout 함수 setTimeout 은 ~초후 코드를 실행하는 것이다. 즉, 일정 시간이 지난 후 함수가 한번 실행 된다. clearTimeout은 setTimeout 함수를 취소한다. Interval 함수 setInterval 은 매 일정시간마다 함수가 계속 실행 된다. clearInterval 은 setInterval 함수에 의해 실행된 반복 작업을 종료한다. 코드의 예는 이렇다. HTML 삽입 미리보기할 수 없는 소스 HTML 삽입 미리보기할 수 없는 소스 5초가 지나면 알람박스를 사라지는 기능을 만들어보았다. HTML HTML 삽입 미리보기할 수 없는 소스 CSS HTML 삽입 미리보기할 수 없는 소스 JS HTML 삽입 미리보기할 수 없는 소스 See the Pen Untitled by pa.. 2023. 2. 19. [JavaScript] if문으로 HTML 배경 Dark, White모드 만들기 이번에는 자바스크립트를 이용해서 모드 변경을 해보았다. HTML HTML 삽입 미리보기할 수 없는 소스 CSS HTML 삽입 미리보기할 수 없는 소스 2023. 2. 19. 이전 1 2 3 4 5 6 다음
