MI CASA

01. [글목록 페이지.html] 에서 [글등록 버튼] 클릭 02. [글등록 페이지.html]로 이동 03. [글등록 페이지.html]에서 [완료 버튼] 클릭 04. reviewAjax.js에서 프론트에서 입력받은 값을 ReviewAPI.java로 전달 05. ReviewAPI.java에서는 프론트에서 받은 값과 백엔드에서 처리해 줘야하는 값(등록일자,수정일자,사용여부)을 할당 후 ReviewService.java 호출 06. ReviewService.java에서는 MyBatis 프레임워크와 연동되는 ReviewMapper.java를 호출 07. ReviewMapper.java는 해당 메소드명과 일치하는 ID를 가진 SQL을 ReviewSQL.xml에서 찾아서 해당 쿼리를 실행 08. 쿼리 정상 수행후 ..

0. 선행학습 - HTML > CSS > JavaScript 1. 웹페이지를 구성하는 3 요소(3가지 언어) 1) HTML(Hyper Text Markup Language) - 웹페이지의 큰 뼈대 2) CSS(Cascading Style Sheets) - 색깔이나 글씨체와 같은 디자인 요소를 관리 3) Javascript - 객체지향 스크립트 언어로 웹페이지의 동작을 담당 #크로스 플랫폼(cross platform) 2. JavaScript의 개념 - 브라우저 위에서 동작하고, 브라우저를 제어하기 위해 동작하는 유일한 언어 JavaScript란 웹페이지를 동적으로, 프로그래밍적으로 제어하기 위해 고안된 언어이다. 액션을 취했을때 어떤 행동이 일어나게 하고 싶다면 Javascript를 써야한다. 자바스크립..

[HTML에 CSS를 결합시키는 2가지 방법] 1. 직관적이고 가장 이해하기 쉬운 방법 - 태그에 직접 CSS 속성(Style)을 부여하는 것 Hello World - 위 문장을 해석하면 'h1이라는 태그에 CSS 컬러를 red로 준다'가 된다. - Style 속성은 HTML 표준에 약속이 되어 있다. 어떤 약속이냐면, [Style 속성의 값으로는 CSS 구문이 오니까 해석해서 표시해라 + 그리고 그 CSS는 Style 속성이 위치하고 있는 태그에 적용된다]는 약속이 되어있는 것이다. 2. 두번째 방법 - Hello World Hello World #Result 결과는 역시 동일하다.

0. 선행학습 - CSS를 배우기 전에 꼭 HTML을 먼저 배워야 한다! 그래야 이후 진행되는 내용의 개념이 이해가 간다. 1. CSS란? - CSS는 HTML을 아름답게 꾸며주는 디자인 언어이다. - HTML는 웹이 생길 때부터 있던 태초의 언어라고 볼 수 있는데, HTML에 디자인 기능을 더하려니 비효율적이고 복잡해져서 아예 정보와 디자인을 분리해 HTML은 정보에 좀 더 집중할 수 있도록 하고, 디자인에 집중하는 새로운 문법과 새로운 체계로 만든 것이 CSS 언어인 것이다. 2. HTML과 CSS가 분리된 목적 - 디자인과 정보를 분리함으로써 가독성과 효율성이 몇 배 이상이나 높아지게 된다. 예를 들어 위 이미지를 보면 좌측과 우측의 결과값은 모두 아래와 동일하게 나타난다 #Result 같은 결과라..

히익~~ HTML도 아직 다 못 봤는데, 스터디 진도는 성큼성큼 어느새 이미 CSS... HTML 문법 요약 (스터디장님 갈무리) 1. 요소(Elements) - 태그 2. 속성(Attributes) - 모든 HTML 요소는 속성을 가질 수 있음 - 속성은 요소에 대한 추가 정보를 제공한다 - 속성은 항상 시작 태그에 지정됨 - 속성은 일반적으로 다음과 같은 이름/값 쌍으로 제공됨: name="value" CSS를 맞이하며.. 음.. CSS는 HTML을 더 풍성하게 꾸며주는 디자인 언어라고 한다(좀 더 공부해보고 난 뒤, 오늘 새로 만든 CSS 카테고리에 실습한 내용과 함께 개념 정리해봐야지!..) 생활코딩에서 [CSS 소개] 첫 강의를 보고는 우와 진짜.. 선대인(?)들의 지혜에 감탄이 절로 나온다. ..

1. 생활코딩 - https://opentutorials.org/course/2039 - HTML부터 CSS, JS까지 다양한 프로그래밍 언어를 영상을 통해 자세하게 알려주는 코딩 강의 사이트 2. W3 Schools - https://www.w3schools.com/html/default.asp - 각 프로그래밍 언어 샘플과 직접 써보고 문제풀이도 해볼 수 있는 방대한 예제 사이트 생활코딩 사이트에서 개념 잡고 W3 스쿨에서 예제 순서대로 따라 써보면서 용어랑 개념 잡아가는 중

[HTML Elements] - HTML Elements는 contents(내용)으로 정의된다 - HTML Elements는 시작 태그와 종료 태그 한쌍으로 구성된다 - HTML Elements는 중첩해서 쓸 수 있다 예를 들어 아래 코드 블럭을 보면 코드 안에 도 있고 도 있듯이... #Source What is HTML? HyperText Makeup Language 하이퍼텍스트 마크업 언어, 줄여서 HTML 끝! #Result [HTML Elements - Eng Tag] - 일부 HTML 요소는 종료 태그가 생략돼도 올바르게 표시된다 - 단, 아래에서 말할 빈 요소와 다르게 절대적인 것은 아니므로 종료 태그 쓰는 것을 습관화하자 사실 비주얼 스튜디오 코드는 시작 태그만 쓰면 종료 태그가 자동으로 ..

*HTML 구조와 각 요소의 역할 이해하기 [HTML Images] - HTML Images는 태그로 정의된다 - 여기에 src(원본 파일, source의 약자), alt(대체 텍스트), width(폭/가로) 및 height(높이/세로)의 속성을 지정한다 ex) [HTML Links] - HTML Links는 태그로 정의된다 - Link의 대상은 href 속성을 지정한다 ex) 링크 위에 노출되는 텍스트 #Source 귀여운 고양이 보고 가실게요 나만 없어 고양이, 사람들 다 있는데 나만 없어 Where to download it #Result

*HTML 구조와 각 요소의 역할 이해하기 [DOCTYPE html>] - DOCTYPE 선언은 HTML 문서에서 태그를 정의하기 전 가장 먼저 선언되야 한다 - DOCTYPE 선언은 브라우저가 웹 페이지를 올바르게 표시할 수 있도록 도와준다 - DOCTYPE 선언은 HTML 태그 앞에 페이지 맨 위에 한 번만 표기한다 - DOCTYPE 선언은 문서의 유형을 나타내며, 대소문자 구분이 없다 - HTML5에서의 DOCTYPE 선언은 아래 예제에서 확인할 수 있다 [HTML Headings] - HTML Headings는 부터 까지의 태그로 정의되며, 은 가장 중요한 제목을 정의한다 - 은 가장 덜 중요한 것을 정의하므로 순서대로 쓰면 아래 예제처럼 점점 아련해진다...★ [HTML Paragraphs] -..

*HTML은 특정 프로그램을 사용하지 않고 PC에 기본 설치되어있는 Text editor program(메모장)을 활용해서 쉽게 만들고 편집할 수도 있다. Step1: 새 메모장을 연다 Step2: 아래 샘플의 HTML 코드를 적어준다 (그냥 태그없이 아무 문장 하나를 적어도 상관없다) Step3: 파일형식을 모든 파일로 바꾸고 [파일명] 뒤에 .html(혹은 .htm) 확장자를 쓴 뒤 다른 이름으로 저장한다 이때 인코딩 값이 UTF-8로 되어있는지 확인하자 그래야 HTML 파일로 저장이 된다 #Source My First Heading My first paragraph. #Result 저장한 파일을 실행해 보면 메모장이 아닌 웹 브라우저에서 열리는 것을 확인할 수 있는데 비주얼 스튜디오에서 같은 코드를..