본문 바로가기
반응형

웹 개발10

파비콘 생성사이트 / favicon-generator.org / favicon generator site favicon-generator.org https://www.favicon-generator.org/ Favicon & App Icon Generator Upload an image (PNG to ICO, JPG to ICO, GIF to ICO) and convert it to a Windows favicon (.ico) and App Icons. Learn more about favicons. www.favicon-generator.org 파비콘 제작을 도와주는 사이트입니다. png, jpg, gif 확장자 파일를 업로드하고 용도, 취향에 맞게 체크박스를 체크합니다. 그 뒤 Create Favicon을 클릭합니다. 생성된 ico 파비콘을 다운 받고 싶다면 1번을 클릭하고 다른 파비콘을 원한다면 2번을.. 2024. 3. 14.
[Vue] watch 속성 / 예제 watch watch 속성은 데이터 변화를 감지하고 정해진 로직을 수행합니다. 아래는 v-model를 이용한 watch 예제입니다. 예제 결과 input 박스의 데이터를 변경할때마다 v-model이 message 데이터를 동기화해주고, watch 속성이 message 데이터의 변화를 감지하여 로직을 수행하고 있습니다. 2024. 3. 11.
[Vue] computed 속성 / 특징, 예제 예제 {{reversedMessage}} 결과 vuejs에서는 복잡한 연산은 뷰 인스턴스 안에서, html에서는 데이터의 표현만 하는 것을 권고하고 있습니다. computed 속성은 데이터의 연산을 정의할때 사용할 수 있습니다. 만약 위 코드와 다르게 computed 속성을 사용하지 않는다면 아래와 처럼 표현해야하고 가독성에 좋지 않습니다. {{message.split('').reverse().join('')}} computed 특징 1. 반응성 data의 값에 따라 자동으로 다시 연산합니다. 2. 캐싱 만약 화면 여러곳에서 연산한 값을 보여줘야한다면 매번 연산하는 것이 아닌, 미리 연산한 값을 가지고 있다가 화면에 결과를 표시합니다. 2024. 3. 7.
[Vue] 주로 쓰이는 디렉티브 정리 아래 디렉티브들은 주로 쓰이는 핵심 디렉티브입니다. v-in 지정한 뷰 데이터의 값에 따라 해당 부분을 보이게 할 수 있습니다. 이제 나를 볼 수 있어요! seen이 참이라면 p 태그를 출력한다. v-for 지정한 뷰 데이터의 개수만큼 html 태그를 반복 출력합니다. {{ item.text }} v-show v-if와 거의 같습니다. 다른 점은 v-if는 뷰데이터가 거짓이라면 태그를 완전히 삭제하지만, v-show는 css에서 display:none으로 바꿉니다. v-bind html 태그의 기본 속성과 뷰 데이터 속성을 연결합니다. Vue.js v-on 화면 요소의 이벤트를 감지, 처리할 때 사용됩니다. 클릭하세요 v-model 폼에 입력한 값을 Vue 인스턴트 데이터와 즉시 동기화합니다. 즉, 폼 .. 2024. 3. 4.
[CSS] flexbox 속성 재밌게 배우기 - [Flexbox Froggy] https://flexboxfroggy.com/#ko Flexbox Froggy A game for learning CSS flexbox flexboxfroggy.com FlexboxFroggy.com은 CSS flexbox에 대해 재밌게 공부할 수 있는 게임입니다. 다음은 FlexboxFroggy의 개발자와의 인터뷰입니다. https://thenewstack.io/open-source-leaders-thomas-park-hops-easy-css-development-flexbox-froggy/ Open Source Leaders: Thomas Park Hops to Easy CSS Development with Flexbox Froggy The following interview is part of a.. 2022. 11. 19.
JavaScript 예약어 모음 도움이 되시길 바랍니다. abstact long with in case false goto throw private byte native var void instance continue default boolean protected finally funtion new extends try catch const if chur super int double implements else import null package break static case float interface final short this for do return synchronized true throw public switch transient while class 없는 예약어나 오타는 계속 수정하겠습니다. 2022. 7. 30.
node.js 다운로드 하기 https://nodejs.org/ko/download/ 다운로드 | Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 자신의 운영체제와 버전을 확인하고 버튼을 누르면 됩니다. (ex. 윈도우 64비트인 경우 빨간 동그라미 선택) 다운로드 된 파일을 실행시켜 다운로드 받아줍니다. 모두 Next 누르면 됩니다. 설치가 완료가 되었다면 cmd창을 열어 node -v 를 입력하여 설치가 완료되었는지 확인합니다. 2022. 3. 19.
[PHP] 문자열 출력하기-print, echo #3 PHP 문자 출력하기 - print PHP에서 문자열을 출력하는 방법에는 여러가지 방법이 있습니다. 먼저 print문입니다. print문은 다음과 같은 형태로 사용할 수 있습니다. 1 2 3 4 5 6 7 8 9 10 11 cs 출력 화면입니다. 일반적으로 print "출력내용"; 같은 형태로 사용합니다. (PHP에서는 명령 구문이 끝나면 세미콜론';'을 붙여야 합니다.) 괄호로 묶어 사용이 가능하고 곧은 큰따옴표 말고도 곧은 작은따옴표로도 사용이 가능합니다. print에서는 개행을 인식하지 못하고 개행이 필요할 때 html태그인 을 같이 출력시켜 개행을 할 수 있습니다. 하나의 문자열만 파라미터로 받을 수 있고 1을 반환합니다. PHP 문자 출력하기 - echo echo도 문자열을 출력하는 방법 중 하.. 2019. 2. 12.
[PHP] 시작태그, 종료 태그, 주석 달기 #2 PHP 작성 규칙 - 시작 태그, 종료 태그 print "2"; 다음 코드 중 '' 이 종료 태그입니다. PHP 코드는 시작 태그와 종료 태그 안에 작성해야 작동합니다. 실행 화면입니다. 2번째 줄 코드와 6번째 줄 코드가 실행되어 '1', '3'이 출력되었고 4번째 줄 코드는 시작 태그와 종료 태그 밖에 있어서 'print "2";'가 그대로 출력되었습니다. 2019. 2. 11.
[PHP] PHP란 #1 PHP란 PHP : 요청의 따라 html등의 문서를 동적으로 생성, 빠르게 페이지를 만들 수 있는 것이 장점인 언어입니다.Personal Home Page의 약자입니다. PHP의 특징 무료이다. PHP는 오픈소스이기 때문에 무료입니다. 배우기 쉬운 언어이다. C, Java등과 비슷한 문법을 사용하기 때문에 다른 언어를 알고 있다면 배우기 쉬우며 매뉴얼도 완비되어 있습니다. 디버깅이 비교적 쉽다. PHP에서 오류가 발생하면 오류 내용과 몇 번째 줄이 문제인지를 나타내기 때문에 오류를 빠르게 찾을 수 있습니다. 여러 플랫폼을 지원한다. Windows, Mac OS등의 여러 운영체제에서도 작동하며 Azure등의 클라우드에서도 PHP를 지원합니다. 서버 사이트 스크립트 언어이다. PHP는 서버에서 동작하기 때문.. 2019. 2. 10.
728x90
반응형