본문 바로가기
반응형

Front-end14

submit 버튼 쓰지 않고 submit하기 1. 폼 태그에 대한 간략한 설명 태그는 사용자로부터 값을 입력받기 위해 사용됩니다. 최근 개발되는 웹 또는 앱 서비스의 경우 가입 시 개인 정보 수집을 최소화하려는 경향을 보이고 있긴 합니다만, 전통적인 회원가입 페이지를 한번 떠올려보죠. 사용자는 의 내부에 있는 에 아이디와 비밀번호를 입력하고, 에서 생년월일을 고르고, 라디오 버튼이나 체크박스까지 모두 선택한 뒤에 마지막으로 또는 을 누릅니다. 이 '제출하기' 라는 행위를 통해서 폼에 입력된 데이터들은 서버로 전송되게 됩니다. 2. Submit 버튼의 대안 1) submit() 메서드로 submit하기 button이 아닌 어떤 html 요소를 클릭했을 때 submit이 이루어지도록 하려면, onclick 이벤트 발생 시 특정 폼을 지정하여 submi.. 2023. 1. 12.
React 시작하기 react는 프론트엔드 개발을 위해 페이스북에서 만든 js 라이브러리입니다. 리액트의 장점은 빠르다는 것입니다. DOM을 직접 조작하지 않고 가상 DOM을 사용하며, 하나의 동적인 페이지로 구현되는 Single page application(SPA)이기 때문이죠. vue나 angular도 유사한 특성을 가지고 있습니다. 또 확장성과 재사용성, 높은 생산성과 더불어 커뮤니티의 활성화로 관련 자료를 많이 찾아볼 수 있다는 점도 리액트가 인기를 끄는 이유라고 할 수 있겠습니다. 그럼 지금부터 10초만에 리액트 프로젝트를 만드는 법을 알려드리겠습니다. 0. 준비단계 - node.js 설치하기 react를 설치하기 위해서는 node.js가 필요합니다. 리눅스 환경에서는 커맨드 한 줄이면 nodejs 를 설치할 수.. 2022. 9. 20.
CSS / 애니메이션과 트랜지션 animation & transition 시작에 앞서 CSS를 적용할 대상을 만들어줍니다. .ball { width: 200px; height: 200px; background-color: skyblue; border-radius: 50%; } 애니메이션 1. 애니메이션 제작하기 먼저 @keyframes로 애니메이션을 만들어봅시다. @keyframes colorChange { from {background-color: #0dcaf0;} to {background-color: #0a53be;} } @keyframes colorChangeAdvanced { 0% {background-color: #0dcaf0;} 25% {background-color: #3cb3ff;} 50% {background-color: #4e69ff;} 100% {back.. 2022. 5. 23.
Javascript - DOM (Document Object Model) DOM 은 html 문서를 트리형태로 구조화한 인터페이스입니다. DOM 을 이용하면 javascript에서 html 문서에 접근하고 탐색 및 조작을 할 수 있습니다. 1. 탐색 Welcome paragraph item1 item2 위와 같은 html 문서에서 각 요소들을 선택하기 위해서 document의 메서드인 getElementByid() 또는 querySelector()를 이용할 수 있습니다. 이 메서드들은 주어진 조건에 해당되는 element를 반환합니다. //id가 hd인 요소 var heading = document.getElementById("hd"); //class가 pr인 요소 var paragraph = document.querySelector(".pr"); //li 중 2번째 자식 v.. 2021. 12. 8.
Javascript - JSON 데이터 조작하기. (배열과 객체) 1. JSON (JavaScript Object Notation) 이란 JSON의 키-값의 쌍으로 구성된 문자열 형태의 데이터 포맷입니다. 웹이 동작하기 위해서는 클라이언트와 서버 간의 끊임없는 데이터 전송이 필요합니다. 이때 정보를 담아서 주고받을 수 있는 형식 중 하나가 JSON입니다. 아래는 id, name, phone, type, childnode 라는 속성과 그에 대응되는 값으로 구성된 json tree의 예시입니다. var data = [{ "id": 1, "name": "Yong", "phone": "010-0000-0000", "type": "sk", "childnode": [{ "id": 11, "name": "echo", "phone": "010-0000-1111", "type": "k.. 2021. 11. 28.
SASS SASS(Syntactically Awesome Style Sheets)는 css를 확장하여 몇 가지 편의성을 제공하는 스타일시트 언어이다. sass 파일은 .scss로 저장되는데, 이 파일을 css로 컴파일하여 html 문서에 연결해야하는 다소의 불편이 따른다. 사용을 위해서 우선 sass를 설치해야 한다. 1. ubuntu에 sass 설치하기 $ sudo apt-get update $ sudo apt-get install sass 위와 같이 입력하면 sass가 설치된다. 2. 컴파일하기 $ sass name.scss name.css 2-1 자동 컴파일 파일을 수정할 때마다 컴파일을 하는 것은 귀찮고 불편한 일이다. $ sass --watch name.scss:name.css 위와 같이 입력하면 ctr.. 2021. 5. 13.
반응형

티스토리툴바