HTML
웹 프론트 엔드 강의(8)
vue는 동적으로 html코드를 생성 요새 html은 죄다 MVC패턴 MVC : Model View Controller 여기서 model은 data 혹은 db, 기능 등으로 이해하면 됨. model은 json을 데이터를 기술함. 여기서 view는 display, html 렌더링, 태그 등으로 이해하면 됨. view는 html에서 사용하는 태그로 이해하면 쉬움. 여기서 controller : 제어 즉, model과 view를 연결하는 역할 근데 여기서 vue는 따로 controller가 없음. vue라는 프로그램을 따로 설치하지말고 id=app인 위치에 ‘홍길동’ 출력하기 나의 홈페이지 {{message}}/{{age}} 주소 : ~~~ 나이도 같이 출력할 수 있음 data = { message : '홍길..
웹 프론트 엔드 강의(7)
JSON과 익명함수 fun1이라는 함수를 만들고 변수를 name으로 지정하였다. 이 함수를 쓰면 alter 방식으로 html에 name이라는 변수에 넣은 값이 출력된다. 그래서 fun1("안녕"); 이라고 쓰면 안녕 이라고 출력된다. html> func1 이라는 함수를 지정하였다. 이 함수는 만약 아무것도 쓰지 않는다면 error라는 말이 뜨게되고 아무 말이라도 쓰게되면 그 아무 말을 출력하게 되는 함수이다. 지금은 test(fun1,"안녕"); 이라고 써있는데 이렇게 쓰면 안녕이 출력된다. 만약 test(fun1,""); 이렇게 아무것도 쓰지 않으면? 이렇게 error가 출력된다. 위의 방식처럼 함수를 호출하는 부분과 함수를 정의하는 부분이 분리해서 쓸 수 있지만, 함수를 호출하는 부분과 정의하는 부분..
웹 프론트 엔드 강의(6)
Json방식 Json방식은 매우 중요하다. json방식? 어떤 데이터를 지정할 때 중괄호로 시작 { } Json =Java Script Object Notation의 약자 즉 자바스크립트의 객체 표기 방법 만약 d={age:50} // 나이를 50으로 지정한다는 느낌. d={age:50, name:’이순신‘} // 이 객체가 가지고 있는 나이는 50이고 이름은 이순신이다. 이런식으로 Json방식으로 여러 개 지정도 가능하다. d=[50,‘이순신’] → 이거는 arrray로 정의한 것 d={age:50, name:’이순신‘} → 이거는 JSon 방식으로 정의한 것 array방식은 50이 몸무게인지 나이인지 전혀 알 수가 없음. 그래서 Json방식을 많이 사용함. 50 이순신 이거나 d=[50,‘이순신’] ..
웹 프론트 엔드 강의(5)
JQuery 자바 프레임워크에서 JQuery를 많이 씀. 그래서 JQuery를 배워야 다른 프레임워크를 이해하는 데 편함. JQuery는 자바스크립트로 이루어진 질의어라고 생각하면 쉬움. 이 질의라는거는 내가 원하는 노드를 찾는 라이브러리라고 생각하면 쉬움. html은 복잡한 태그들로 이루어져 있기에 그것을 효과적으로 찾는 것이 필요 Jquery를 CDM방식으로 사용하는 방법과 다운로드 받아 사용하는 방법이 있음. CDM방식은 따로 링크를 달아서 그 링크에 접속하면 바로 설치되는 방식이며, 다운로드 방식은 미리 우리가 다운받고 그 파일만 상대주소로 기입하는 방식이다. 자바 스크립트에서는 $도 사용가능함. C언어에서 gil_hyun 여기서 언더바를 써서 변수지정이 가능하듯이. 여기선 달러도 사용이 가능하다..
웹 프론트엔드 강의(4)
우선 소스부터 보여드리고나서 그 다음에 설명하겠다. go1 go2 go3 go1 여기서 #은 정의가 안되었다는 의미이다. function 은 함수라는 의미이며 sayhello( )에서 괄호안의 message라고 변수를 선언해줌을 의미한다. alert(message)하면 message라는 변수가 출력되는데 이때 go1을 눌렀을경우 hi~~ , go2를 눌렀을 경우 abc~~ , go3를 눌렀을 경우 123~~가 출력된다. 일단 이렇게 되고 go1 눌르면? go2 눌르면? go3 눌르면? 이렇게 출력된다. 다음은 준비물이 필요한다 파일질라로 영화포스터사진, 음식사진, 선물사진을 가져오자. 영화 음식 선물 영화버튼을 눌렀을 때 영화포스터사진 음식버튼을 눌렀을 때 음식사진 선물버튼을 눌렀을 때 선물사..
웹 프론트엔드 강의(3)
오늘은 자바스크립트를 간단하게 배워보겠다. html에서 자바스크립트를 쓰는 방법은 다음과 같다. 이렇게 스크립트 태그를 써줄것이다. 이런 식으로 세팅을 해둔다. 자바스크립트는 스크립트 태그안에서 코딩을한다고 생각하면된다. 보통 html은 세미콜론 ;를 사용하지 않지만 스크립트 태그를 사용하면 일반 프로그래밍 언어처럼 세미콜론 ;을 붙인다. c언어에서는 printf 함수가 출력에 있어서 기본적이었다면 자바스크립트에서는 alert 함수가 기본적이다. Hello Javascript 이렇게 한번 써서 출력해보자. 그러면 이렇게 출력이 된다. 신기하지 않은가? 자바스크립트는 이렇게 스크립트 태그 사이에 쓰는 것이다. 자바 스크립트 태그를 여러 개 만들어서 쓸 수 도 있다. 여기서 중요한게 자바스크립트 태그를 ..
파일질라 설치
filezilla.softonic.kr/download FileZilla 신난다 무료 FTP 클라이언트 filezilla.softonic.kr 이 사이트에서 파일질라를 설치한다. 2020.12.24 기준으로 설치한 것이며 훗날엔 더 좋은 버전이 나와있을 것이다. 그리고 다 깔고 실행시키면 이렇게 뜰것이다. 여기서 이 부분을 클릭한다. 이 부분은 '사이트 관리자 열기' 라고 부른다. 그러면 새로운 창이하나 뜰텐데 그러면 이걸 누른다. 그리고 그러면 오른쪽에 이렇게 뜨는데 여기서 빨간 밑줄만 적는다. 호스트에는 우리가 저번시간에 닷홈에서 발급받은 주소를 입력하고 사용자와 비밀번호칸에는 따로 또 새로 아이디와 비밀번호를 입력한다. 그러고 확인을 누르면 다시 원래화면으로 돌아오는데 다시한번 이걸 누른다. 그..
웹 프론트엔드 강의(2)
이번엔 Bootstrap을 이용하여 버튼을 이용하겠다. More More2 More3 body 태그에 이것을 넣어줄 것이다. 넣으면 More More2 More3 다음과 같다 이제 실행시키면? 다음과 같이 나온다. btn-outline을 쓰면 외각선만 나오게된다. btn-success는 주로 초록색 버튼 btn-info 는 하늘색 버튼이 나온다. 이제 앞으로 이 부분은 무조건 복붙해놓고 시작해야한다. 이제 새롭게 index.html말고 새로운 html을 만들어 연동시키자. 필자는 이렇게 많이 만들었지만 간단하게 index.html과 form.html을 연동시키는 법을 알려주겠다. 이 방법을 배우면 다른거 연동시키는건 쉽다. 아이디 패스워드 로그인 회원가입 이렇게 써보자!! 그러면 다음과 같이 ..