본문 바로가기

전체 글463

[Vue] class attribute 다루는 방법 안녕하세요. 혀코입니다. 이번 시간에는 Vue에서 class attribute를 다루는 방법에 대해서 알아보겠습니다. 이전에 v-bind로 attribute를 다루면서 아래와 같이 class를 변경하는 방법에 대해서 알아봤습니다. Class Attribute {{ message }} Change Change 버튼을 클릭하면, class 가 변경되면서 글자 색상이 녹색에서 빨간색으로 변경됩니다. class 값으로 true, false 값을 가지는 객체 데이터 값을 넣어주면 더욱 활용도가 높아집니다. Class Attribute {{ message }} ({{isActive}}) Change 여기서 isActive 값이 true 일때만, active class가 적용되어 Change 버튼을 눌렀을때 텍스트 .. 2022. 9. 2.
[Vue] Vue에서 데이터 변경 감시하는 방법(feat. watch) 안녕하세요. 혀코입니다. 이번 시간에는 Vue에서 데이터 변경 감시하는 방법에 대해서 알아보겠습니다. 다음은 message를 Hello World! 에서 Smile World!로 바꾸는 코드입니다. Watch Message {{ message }} Change 여기서 변경되는 데이터를 감시하려면, watch property를 사용해야 합니다. Watch Message {{ message }} Change watch property를 추가하고, 감시할 데이터 message에 함수를 실행하는 형식으로 적어주는데 message: function() 을 줄여 message() 로 적고, message의 데이터 값을 console.log을 사용해서 출력해 주면 됩니다. 이때, watch의 매개변수를 value로 .. 2022. 9. 1.
[Vue] Computed Properties의 Getter, Setter 사용방법 안녕하세요. 혀코입니다. 이번 시간에는 Vue의 Getter와 Setter에 대해서 알아보겠습니다. 지난 시간에 배운 Vue의 computed property는 cashing 기능이 있어서 읽기 전용인 상수의 특성을 띈다고 했습니다. 이때 Getter와 Setter를 사용해서 이 computed property의 함수의 결과값을 바꿀 수 있습니다. App.vue Reverse Message {{ message }} {{ reversedMessage }} Add 위 코드를 실행하면, 제공된 문자열과 뒤집어진 문자열이 있고, Add 버튼을 누르면 제공된 문자열의 마지막에 느낌표가 추가되고 이 느낌표가 추가된 문자열을 뒤집어 뒤집어진 문자열을 출력하고 있습니다. 여기서 methods property의 add .. 2022. 9. 1.
[Vue] Computed Properties 안녕하세요. 혀코입니다. 이번 시간에는 Vue의 computed 속성에 대해서 알아보겠습니다. 우선 components 폴더 안에 Company.vue 파일을 다음과 같이 작성하고 App.vue에서 Company.vue 파일을 불러와서 Company 목록을 출력해 보도록 하겠습니다. /components/Company.vue {{ company }} App.vue 아래와 같이 출력 되었습니다. 여기서 Companies.vue에서 companies 배열을 삭제하면 v-if directive 조건 companies.length가 0이 되므로 화면상에 아무것도 출력하지 않습니다. 여기서 v-if에 바로 조건식을 적는 대신 computed property를 사용하면 다음과 같습니다. {{ company }} c.. 2022. 8. 31.
[Vue] Vue의 Attribute Binding 안녕하세요. 혀코입니다. 이번 시간에는 Vue의 Attribute Binding에 대해서 알아보겠습니다. v-bind 속성값으로 Vue의 데이터 값을 넣어줄 때는 이중괄호를 사용할 수 없습니다. 따라서 이때에는 v-bind directive를 사용합니다. {{msg}} 앱이 처음 실행될때 텍스트가 빨간색이였다가 클릭하면 녹색으로 변경하도록 코드를 짜보았습니다. 여기서 v-bind는 가장 흔하게 사용되는 directive로 다음과 같이 :로 축약해서 사용할 수 있습니다. {{msg}} class 속성값을 동적으로 추가하려면 다음과 같이 중괄호 [ ] 으로 작성해 줍니다. {{msg}} 이렇게 하면, 여러 가지의 속성을 다이나믹하게 동적으로 추가할 수 있는 장점이 있습니다. 또한 지금까지 사용했던 @ 기호는.. 2022. 8. 31.
[Vue] Raw HTML 사용방법 안녕하세요. 혀코입니다. 이번 시간에는 Vue에 데이터 값으로 Raw HTML을 사용하는 방법에 대해서 알아보겠습니다. Vue에서 데이터 값을 표시하려면 {{}} 이중 중괄호를 사용합니다. 그런데 이 데이터가 Raw HTML이라면 이 Raw HTML도 String 값으로 읽어 다음과 같이 그대로 표시하게 됩니다. {{ msg }} 이 값을 실제 HTML 로 표시하려면 v-html directive를 사용해줘야 합니다. 이렇게 Vue에 데이터 값으로 Raw HTML을 사용하는 방법에 대해서 알아보겠습니다. 해당 정보가 도움이 되셨다면, 공감과 구독 부탁 드립니다. 감사합니다. :) 2022. 8. 30.
[Vue] Vue의 Interpolation(보간법) 안녕하세요. 혀코입니다. 이번 시간에는 Vue의 Interpolation (보간법)에 대해서 알아보겠습니다. Vue에서 데이터를 표시할 때 이중 중괄호를 사용합니다. Vue의 문법 중에서 App이 생성될때 이 이중 중괄호 안의 데이터가 딱 한번 렌더링되고 나서 데이터의 변함이 없게 하는 것을 Interpolation (보간법)이라 합니다. 다음 코드를 보면, Hello World 문자열을 클릭할 때마다, 느낌표가 뒤에 더해서 출력이 됩니다. {{ msg }}, friend 이 코드에서 h1에 v-once directive를 추가해 주면, 처음 렌더링 후에 클릭을 해줘도 느낌표가 추가되지 않는 것을 확인하실 수 있습니다. {{ msg }}, friend 이렇게 Vue의 Interpolation (보간법)에.. 2022. 8. 30.
[Vue] Vue의 Lifecycle 안녕하세요. 혀코입니다. 이번 시간에는 Vue Lifecycle에 대해서 알아보겠습니다. Vue Lifecycle 은 다음과 같습니다. Vue의 Lifecycle 다음과 같은 것 있습니다. beforeCreate created beforeMount mounted beforeUpdate updated beforeUnmount unmounted 이 중에서 beforeCreate, created, beforeMount, mounted의 차이점을 코드를 통해 알아보겠습니다. {{ count }} 5보다 큽니다! 코드를 실행시키면 다음과 같이 출력합니다. App이 생성되기 전에 beforeCreate 을 실행했을 때 변수가 undefined이고 HTML에 연결이 되지않아 null 값을 가지고, created li.. 2022. 8. 29.
Visual Studio Code의 유용한 설정 세팅방법 총정리 안녕하세요. 혀코입니다. 이번 시간에는 Visual Studio Code의 유용한 설정 세팅방법에 대해서 총정리 해보겠습니다. 우선 Visual Studio Code에서 Setting 값을 변경하려면, File > Preferences > Settings 에서 변경하실 수 있습니다. # 자동 저장 기능 설정 (Auto Save) 소스코드를 거의 다 완성했는데 저장을 하지않고 프로그램을 종료했다면 어떻게 될까요. 몇시간 동안의 노력이 수포로 돌아가고 그 만큼의 시간동안 더 일을해야하고 야근을 하게되는 불상사가 일어나겠죠. 이런 불상사가 일어나지 않도록 자동 저장 기능 설정을 사용하는 것을 추천 드립니다. 해당 설정은 File > Preferences > Settings > Commonly Used 에서 찾.. 2022. 8. 29.
[Vue] Style 사용하는 방법 안녕하세요. 혀코입니다. 이번 시간에는 Vue에서 style을 사용하는 방법에 대해서 알아보겠습니다. 위 태그에서 해당 컴포넌트에 h1 태그가 없음에도 불구하고 h1 색상을 빨간색으로 지정했습니다. 그리고 style 태그에 scoped 속성이 없습니다. 그러면 다른 component에 있는 h1 태그의 색상이 빨간색으로 지정됩니다. 그래서 위 코드는 다음과 같이 사용되어야 합니다. {{ name }} Component에 해당하는 태그의 속성에만 스타일을 정의하고 scoped 속성을 추가해 주도록 합니다. 그리고 style 종류에는 css 와 scss가 있습니다. scss는 중첩 문법을 사용할 수 있기에 개발 속도를 높일 수 있습니다. scss를 사용하려면 lang 속성을 추가해주고 lang 속성의 값은 .. 2022. 8. 29.
[Vue] Component 사용하는 방법 안녕하세요. 혀코입니다. 이번 시간에는 Vue에서 Component를 사용하는 방법에 대해서 알아보겠습니다. 지난 시간에 Company 리스트를 반복문 v-for 를 사용해서 출력해봤습니다. 이 코드를 Component로 변경해서 사용하는 방법에 대해서 알아보겠습니다. Company {{ company }} src/components 폴더에 Company.vue 파일을 만들어서 코드를 다음과 같이 작성합니다. {{ name }} 태그 안에 name 데이터가 있고, props를 사용해서 name 데이터에 대한 타입을 String으로 지정해 줍니다. 이 데이터에는 항상 default 값이 들어가 있어야 하기 때문에 default를 빈 문자열로 지정해줍니다. 그리고, App.vue 파일을 다음과 같이 업데이트.. 2022. 8. 28.
[Vue] 반복문 v-for 사용하는 방법 안녕하세요. 혀코입니다. 이번 시간에는 Vue에서 반복문 v-for 를 사용하는 방법에 대해서 알아보겠습니다. Vue 에서 리스트 형태의 데이터를 반복문을 통해 출력하려면 v-for을 사용합니다. Company {{ company }} data에 companies라는 리스트 형태의 데이터가 있고, 이것을 html의 ul li에 v-for 반복문을 사용하여 리스트 형태로 출력하면 다음과 같은 결과를 볼 수 있습니다. 다음으로 배열의 index 값도 함께 출력할 수 있도록 소스코드를 변경해 보겠습니다. Company {{ company }} - {{index}} company in companies 를 company, index in companies로 변경해서 index 값을 추출해서 출력할 때 사용했습니.. 2022. 8. 28.
[Vue] 조건문 v-if 사용하는 방법 안녕하세요. 혀코입니다. 이번 시간에는 Vue에서 조건문 v-if 사용하는 방법에 대해서 알아보겠습니다. 지난 시간 Vue를 활용해서 Counter 프로그램을 만들어 봤습니다. 만약 Counter 숫자가 7보다 클 경우에 Vue 조건문 v-if를 사용해서 특정 메세지가 보여지도록 업데이트 해보겠습니다. 다음 코드는 지난 시간 작성했던 Counter 프로그램 입니다. {{ count }} Vue 조건문 v-if 을 사용해서 특정 메세지가 보여지도록 업데이트 해보겠습니다. {{ count }} Count가 7보다 큽니다. Count가 7보다 작거나 같을 경우에는 메시지가 안보여지는 것을 확인할 수 있습니다. Count가 8일 경우 7보다 크기 때문에 특정 메시지가 보여지는 것을 확인할 수 있습니다. 이번에는.. 2022. 8. 27.
[Vue] Counter 프로그램 만들기 안녕하세요. 혀코입니다. 이번 시간에는 Vue를 사용해서 간단한 Counter 프로그램을 만들어 보겠습니다. 지난 시간에 Vue + Vite 프로젝트 시작하기에 이어서 진행합니다. App.vue 파일의 내용을 모두 지우고 가장 기본적인 App.vue 코드를 작성합니다. // Vue 문법을 적용한 HTML 코드를 이곳에 작성합니다. 가장 기본이 되는 vue 코드는 , 이렇게 작성하면, 숫자를 클릭하면, 숫자가 1씩 증가하게 됩니다. 이렇게 Vue를 사용해서 간단한 Counter 프로그램을 만들어 봤습니다. 해당 정보가 도움이 되셨다면, 공감과 구독 부탁 드립니다. 감사합니다. :) 2022. 8. 27.
[Vue] Vue + Vite 프로젝트 시작하기 안녕하세요. 혀코입니다. 이번 시간에는 Vue + Vite 프로젝트 시작하는 방법에 대해서 알아보겠습니다. 아래 명령어를 실행해서 Vue + Vite 프로젝트를 시작합니다. $ npm create vite@latest 그러면 프로젝트 명을 물어봅니다. 프로젝트 명을 vue-awesome 으로 합니다. ? project name: >> vue-awesome 다음으로 사용할 자바스크립트 라이브러리 또는 프레임워크를 고릅니다. Vue를 고릅니다. vanilla > vue react preact lit svelte Vite를 사용해서 Vue 뿐만 아니라 vanilla, react, preact, lit 또는 svelte 를 사용할 수도 있습니다. 그리고 vue 종류를 vue 또는 vue-ts 중에 vue로 선택.. 2022. 8. 26.
[Gatsby] Layout 컴포넌트 만들어 UI 재사용 하기 - #04 안녕하세요. 혀코입니다. 이번 시간에는 Gatsby로 각 페이지 마다 반복되는 UI를 layout 컴포넌트로 만들고 재사용 하는 방법에 대해서 알아보겠습니다. src 폴더 아래에 components 폴더를 만들고 layout.js 파일을 만들어 코드를 다음과 같이 작성합니다. import * as React from 'react' import { Link } from 'gatsby' /* const Layout = (props) => { const pageTitle = props.pageTitle const children = props.children return ( ... ) } */ /* JavaScript Destructuring Applied */ const Layout = ({ pageTitl.. 2022. 8. 25.
[Gatsby] 새 페이지 만들고 Link component 사용하기 - #03 안녕하세요. 혀코입니다. 이번 시간에는 Gatsby로 새로운 페이지를 만들고 Gatsby의 Link component를 사용해 보겠습니다. /src/pages/Index.js 파일을 다음과 같이 수정합니다. import * as React from "react" const IndexPage = () => { return ( Home Page Welcome to my Gatsby site! I'm making this by following the Gatsby Tutorial. ) } export default IndexPage Index 페이지가 다음과 같이 수정되었습니다. /src/pages 에 about.js 파일을 만들고 다음과 같이 작성합니다. import * as React from 'react.. 2022. 8. 24.
[Gatsby] Github에 소스코드 올리고 Gatsby Cloud에 호스팅하기 - #02 안녕하세요. 혀코입니다. 저번 시간에 Gatsby로 로컬에서 웹사이트를 만들었습니다. 이번 시간에는 Gatsby 웹사이트를 Github에 소스코드를 올리고, Gatsby Cloud에 호스팅을 진행해 보겠습니다. Github에가서 Repository를 하나 만듭니다. Repository 이름은 Gatsby로 웹사이트를 만들때 사용했던 폴더이름으로 만들고, 체크박스를 모두 체크 해제한 상태로 (README.md 파일 없이) 만듭니다. Gatsby로 웹사이트 만들었던 폴더로 이동해서 Github에 소스코드를 올려줍니다. $ git init /* 두개 이상의 Github 계정을 사용할 때 Github 계정 정보를 확인해서 업데이트 합니다. */ $ git config --list $ git config --gl.. 2022. 8. 23.
[Visual Studio Code] HTML 시작 태그와 종료 태그 한번에 업데이트 하는 방법 안녕하세요. 혀코입니다. Visual Studio Code를 사용해서 HTML 파일을 작성할 때 보면, 시작 태그를 변경하고 종료 태그도 변경해야하는 번거로움이 있습니다. 그래서 이번 시간에는 Visual Studio Code에서 HTML의 시작 태그와 종료 태그를 한번에 업데이트 하는 방법에 대해서 알아보겠습니다. 한번에 시작태그와 종료태그를 한번에 업데이트 하려면 Visual Studio Code의 Setting에서 다음과 같이 Linked Editing 옵션에 체크표시를 해줘야 합니다. 이렇게 하면 HTML 파일에서 시작태그를 변경하면, 종료 태그도 함께 변경되는 것을 확인하실 수 있습니다. 이렇게 Visual Studio Code에서 HTML의 시작 태그와 종료 태그를 한번에 업데이트 하는 방법에.. 2022. 8. 22.
[Gatsby] 설치하기 (MacOS) - #01 안녕하세요. 혀코입니다. 이번 시간에는 Gatsby 를 MacOS에 설치하는 방법에 대해서 알아보겠습니다. Terminal에서는 이상하게 설치가 안되어서 bash로 설치했습니다. Homebrew 가 설치되어 있는지 확인합니다. brew -v Xcode Command Line Tools 를 애플 개발자 센터에서 다운로드 받아서 설치합니다. https://developer.apple.com/download/all/?q=xcode%20command%20line node를 설치합니다. $ brew install node gatsby를 설치합니다. $ npm install gatsby-cli --location=global 설치가 완료되면, 다음 명령어를 통해서 gatsby가 제대로 설치되었는지 확인합니다. $ .. 2022. 8. 22.
[Gatsby] 설치하기 (Windows) - #01 안녕하세요. 혀코입니다. Gatsby에 대해서 간략하게 설명하자면, React 기반 정적사이트 생성기 입니다. 이번 시간에는 Gatsby 를 설치해 보겠습니다. git bash 에서 텍스트가 깨지는 현상이 있어서 windows powershell을 사용하는 것을 추천 드립니다. gatsby-cli를 node package module을 사용해서 전역 설치합니다. npm install -g gatsby-cli 다음 명령어를 사용해서 gatsby로 웹사이트를 만들어 보겠습니다. $ gatsby new 그러면, 웹사이트 설정을 위한 여러 질문들이 나옵니다. What would you like to call your site? My Website What would you like to name the fold.. 2022. 8. 22.
[Github] git respository 버전 내역 없이 다운로드 받는 방법 안녕하세요. 혀코입니다. 보통 git repository를 내려받는 방법은 다음과 같습니다. $ git clone git-repository-https-address.git git clone을 명령어를 사용해서 내려받을 때는 버전내역을 포함해서 복제를 합니다. 그래서 이번 시간에는 git repository의 버전내역을 삭제하고 내려받는 방법에 대해서 알아보겠습니다. git repository 의 버전 내역을 제외하고 내려받는 방법은 다음과 같습니다. $ npx degit git-account-id/repository-name create-local-folder-name 새로운 프로젝트를 기존의 git repository를 사용해서 시작할 때 유용합니다. 이렇게 git repository의 버전정보를 제.. 2022. 8. 20.
[VIM] VIM 단축키 정리 안녕하세요. 혀코입니다. 이번 시간에는 VIM 단축키 정리를 해보겠습니다. View Mode H: 왼쪽으로 커서이동 J: 아래로 커서이동 K: 위로 커서이동 L: 오른쪽으로 커서이동 Shift + H : 스크린 가장 위 문장 Shift + M : 스크린 가운데 문장 Shift + L : 스크린 가장 하단 문장 W : 다음 단어의 첫번째 문자로 이동함 E : 커서가 위치한 해당 문자의 마지막 문자로 이동함 B : 이전 단어의 첫번째 문자로 이동함 0 : 커서가 위치한 문장의 첫번째 문자로 이동함 Shift + 4($) : 커서가 위치한 문장의 마지막 문자로 이동함 gg : 문서의 첫번째 문장으로 이동함 G : 문서의 마지막 문장으로 이동함 숫자 + Shift + G : 숫자 만큼의 몇 번째 줄로 이동함 C.. 2022. 8. 19.
[Flutter] flutter command not found 해결방법 (MacOS) 안녕하세요. 혀코입니다. 이번 시간에는 flutter command not found 오류 해결방법에 대해서 알아보겠습니다. 오류를 해결하기 위해서, 먼저, flutter sdk가 설치된 경로로 이동해서 pwd 명령어를 실행하면 현재 디렉토리의 경로를 출력합니다. $ pwd /Users/user/document/flutter/bin /Users/user 폴더에 가면 .zshrc 파일이 있습니다. 파일을 Visual Studio Code 을 사용해서 오픈합니다. 만약 사용자 user 폴더에서 .zshrc 파일을 찾을 수 없다면, Command + Shift + . 단축키를 사용해서 숨겨진 파일을 보여지게 합니다. 그리고 위에서 얻은 flutter sdk가 설치된 경로에 :$PATH를 붙여서 다음과 같이 P.. 2022. 8. 19.
[MacOS] 숨겨진 파일 보는 방법 안녕하세요. 혀코입니다. 이번 시간에는 MacOS에서 숨겨진 파일 보는 방법에 대해서 알아보겠습니다. Finder 앱을 열고 [ Command + Shift + . ] 단축키를 사용하면 숨겨진 파일이나 폴더를 볼 수 있습니다. 숨긴 파일을 볼 수 있는 상태에서 다시 한번 더 [ Command + Shift + . ] 단축키를 사용하면 보여지던 숨겨진 파일을 다시 안보여지게 할 수 있습니다. 이렇게 MacOS에서 숨김파일 보는 방법에 대해서 알아봤습니다. 해당 정보가 유용하셨다면, 공감과 구독 부탁 드립니다. 감사합니다. :) 2022. 8. 18.
[Github] 여러개의 Github 계정을 한대의 컴퓨터에서 사용하는 방법(Windows) 안녕하세요. 혀코입니다. 직장과 집에서 개인 프로젝트를 관리하기 위해서 Github을 사용하는 경우 두개 이상의 Github 계정을 사용하는 경우가 있습니다. Github 웹사이트에서 직접 소스코드를 업데이트 할 수 있으나 번거롭기 때문에 컴퓨터에서 계정 전환 필요없이 바로바로 커밋할 수 있는 방법을 알아보게 되었습니다. 그래서 이번 시간에는 여러개의 Github 계정을 사용하는 방법에 대해서 알아보겠습니다. SSH Key 생성 git-bash를 실행해서 C:\Users\user\.ssh 로 이동합니다. $ cd C:/Users/user/.ssh 각 계정에 해당하는 SSH Key를 생성합니다. $ ssh-keygen -t rsa -C "first-email@email.com" -f "github-firs.. 2022. 8. 17.
[CSS3] a 태그를 비활성 시키는 방법 안녕하세요. 혀코입니다. 이번 시간에는 태그를 비활성 시키는 방법에 대해서 알아보겠습니다. 보통 태그는 페이지 이동이나 같은 페이지 내에서 단락 이동할 때 쓰입니다. 하지만 때에 따라서 이러한 기능을 하지 못하도록 비활성화 해야합니다. 가령 현재 페이지 경로를 표시하는 breadcrumb 에서 현재 페이지를 나타내는 텍스트에 a 태그가 사용되어 있다면 이 때 a 태그는 비활성화 해줘야합니다. a:last-child { pointer-events: none } 이렇게 태그를 비활성 시키는 방법에 대해서 알아봤습니다. 해당 정보가 도움이 되셨다면, 공감과 구독 부탁 드립니다. 감사합니다. :) 2022. 8. 16.
[Python] 웹브라우저 실행하고 특정 웹사이트로 이동하는 방법 안녕하세요. 혀코입니다. 이번 시간에는 Python을 사용해서 웹브라우저를 실행하고 특정 웹사이트로 이동하는 방법에 대해서 알아보겠습니다. 웹브라우저를 실행하려면 webbrowser 모듈이 필요합니다. 그리고 특정 웹사이트로 이동하기 위해서는 webbrowser의 open 메소드를 아래와 같이 사용하면 됩니다. import webbrowser webbrowser.open('https://www.naver.com') 그러면, 기본 브라우저로 등록되어 있는 브라우저가 실행되고 open 메소드의 parameter로 받은 웹사이트 주소로 이동하게 됩니다. 이렇게 Python을 사용해서 웹브라우저를 실행하고 특정 웹사이트로 이동하는 방법에 대해서 알아봤습니다. 해당 정보가 도움이 되셨다면, 공감과 구독 부탁 드립.. 2022. 8. 4.
[JavaScript] 문장에서 어떤 단어를 포함하는지 여부 확인 방법 안녕하세요. 혀코입니다. 이번 시간에는 JavaScript를 사용해서 문장에서 어떤 단어를 포함하는지 여부를 확인하는 방법에 대해서 알아보겠습니다. 문장에서 어떤 단어를 포함하는지 여부를 확인하기 위해서 JavaScript의 include 메소드를 사용해야 합니다. let text = "Hello world, welcome to the universe."; let result = text.includes("world"); // true includes 메소드가 받는 parameter로 찾고자 하는 단어 string 값이 반드시 들어가야 합니다. 'Hello World, welcome to the universe.'에서 'world' 단어가 있으므로 true를 출력합니다. 또한, includes 메소드는 .. 2022. 8. 3.
[HTML5] Input 태그의 type 사용 방법 총정리 안녕하세요. 혀코입니다. 이번 시간에는 Input 태그의 type 사용 방법 총정리를 해볼까 합니다. Input 태그의 type에는 다음 10가지가 있습니다. 1. text 2. email 3. password 4. tel 5. datetime-local 6. date 7. week 8. month 9. time 10. number 1. text text는 Input type의 기본 값 입니다. 보통 문자열을 입력받을 때 사용합니다. 이때, label 태그의 for 값과 input 태그의 id 를 같게 해서 연동해 줍니다. name 값은 사용자가 입력한 값과 쌍으로 name: john 형식으로 입력됩니다. Name: 2. email 이메일을 입력받을 때 사용합니다. 이메일과 pattern에 정의된 형식이.. 2022. 8. 2.

티스토리툴바