네발로 코딩하는 포메라니안

1. SpringBoot 프로젝트 생성하기 1. New > Spring Starter Project 2. 프로젝트 설정 Pacakge는 three depth (__.__.__)형식으로 적는 걸 권장한다. Next를 누르면 오른쪽 화면이 나오며, 여기서 사용할 라이브러리는 추가하면 된다. 2. View 실행시켜보기 1. html 실행 static 폴더에 .html파일을 생성해서 실행하면 된다. 2. JSP 실행 보통 Spring을 Rest 즉, 데이터 주고 받는 용으로만 쓰고 Front는 다른 Framework를 쓰기 때문에 아래와 같은 설정은 default로 되어있지 않다. 1) pom.xml에 JSP 관련 라이브러리 추가 javax.servlet jstl org.apache.tomcat.embed to..

1. v-for와 v-bind v-bind:는 : 약식으로 사용함 좋아하는 색상을 선택하세요. {{value.value}} 선택한 색상 : {{checkedList}} 결과 화면

*본 블로그에서는 웹 용 JS를 말함. 일반 JS는 바닐라 JS라고 부르기도 하며, 웹에서와 다른 부분이 존재 1. JS란? - 객체 지향 - 개발자가 별도의 컴파일 작업을 수행하지 않는 인터프리터 언어 - 명령형, 함수형, 프로토타입 기반 객체지향 프로그래밍을 지원하는 멀티 패러다임 프로그래밍 언어 2. HTML에 적용 1. 외부 스크립트 적용 - html 문서 내에 //js파일 document.querySelector(".b1").textContent = "바뀜"; 2. 내부 스크립트 적용 - html내에 사이에 js 작성

1. Semantic Tag란? - HTML4에서는 를 통해 화면을 구성 - HTML5에서는 "의미있는 태그"를 만들어 사용함 - 웹페이지 가독성을 높이고, 웹페이지 자체를 거대한 DB처럼 사용하기 위함 - 태그 이름만 다르고, 기능적인 차이는 없음 2. 암묵적 규칙 - 지키지 않아도 Error가 나지는 않지만, 권장되는 규칙 semantic tag 설명 header 헤더(문서의 머리 부분)을 의미 nav 문서 간의 이동을 담당하는 navbar를 의미 aside 본문 이외의 내용을 의미 section 본문의 여러 내용(article)을 포함하는 태그 article 본문의 주 내용을 의미 footer 문서의 밑 부분인 제작정보, 저작권 등을 표시

1. 개요 - 화면에 출력될 element들에 디자인 요소를 추가하는 속성들 속성 의미 속성 의미 cursor 마우스 모양을 변경 background-image 배경을 이미지로 지정 classification 리스트의 글머리 기호를 변경 background-attachment 배경 이미지를 고정하거나 scroll여부를 지정 display element가 화면에 출력되는 방식을 조정 background-repeat 배경 그림의 반복 여부 지정 background-color 배경색 지정 background-position 배경 그림의 위치를 지정 background 배경 관련 속성 한번에 지정 2. display - {display : none | block | inline | ... } 3. backgro..

1. 개요 - text의 글꼴, 굵기, 크기, 스타일 등을 지정 속성 의미 font-family 글꼴 지정 font-size 글자 크기 지정 (px, cm, % 등) font-style 글자 스타일 지정 font-variant 소문자를 작은 대문자로 변경 font-weight 글자 굵기 지정 font font에 관련된 속성을 한번에 지정할 수 있는 단축형 속성 2. font-family - font명에 white-space가 있으면, " "로 감싼다. text *추천 사이트 1. 눈누 : 상업용 폰트 제공 https://noonnu.cc/ 눈누 상업용 무료한글폰트 사이트 noonnu.cc 3. font-style - 속성 값 normal = 기본 italic = 이탤릭체로 oblique = 기울임꼴로 4..

1. CSS란? - Cascading Style Sheets의 약자 - 마지막에 작성한 규칙, 구체적인 규칙 (p보다는 p #idName)이 우선 적용 - 구성 선택자 { 속성: 값; 속성: 값; } 2. 스타일 시트 적용 1. 외부 스타일 시트 적용 (권장) - html문서의 2. 내부 스타일 시트 적용 - html문서의 3. 인라인 스타일 적용 - 외부 or 내부 시트보다 우선 적용 test 3. 박스 모델 1. 속성 값의 개수에 따른 적용 - 값이 1개 일 때 = 모든 면에 적용 - 값이 2개일 때 = {(top & bottom), (right & left)}에 적용 - 값이 3개일 때 = {top, (left & right), bottom}에 적용 - 값이 4개 일 때 = {top, right, ..

1. 포맷팅 Element - 텍스트에 특별한 의미를 부여하는 요소 tag명 설명 웹 문서나 포스트에서 참고 내용을 표시 공백, 줄바꿈등 입력한 그대로 화면에 표시 소스 코드 실행이 아닌 출력을 하고 싶을 때 사용 특정 문자열을 강조, 하이라이팅으로 표시됨 구분선 , 특정 문자열을 강조, 굵은 글씨로 표시됨 , 취소선, 밑줄 2. 목록형 Element - 목록 tag는 하나 이상의 하위 tag를 포함 tag명 설명 번호 없는 목록을 표시, 항목 앞에 심볼이 표시됨 ordered list, 번호 있는 목록을 표시 type 1 숫자(기본값) a 영어 소문자 A 영어 대문자 i 로마숫자 소문자 I 로마숫자 대문자 목록 항목으로 혹은 태그 하위에 사용 용어의 정의와 설명에 대한 내용을 목록화해서 표시 용어 목록..

1. HTML이란? - Hypertext Markup Language의 약자 - tag = 현재 문서가 HTML문서임을 정의 - 시작tag와 종료tag들의 집합으로 이루어진 문서 - 웹페이지의 "구조"를 담당 2. Web과 HTML의 작동원리 1. 클라이언트의 요청(URL) 2. 서버는 클라이언트의 요청을 분석하여 결과값(HTML)을 전송 3. 클라이언트는 전달받은 HTML을 Web Browser(내장된 엔진이 tag를 해석해서 화면에 나타냄)에 표시 3. HTML문서의 구성 - html, head, body tag로 구성 1. head 태그 - , , , , tag 포함 가능 - : 문서의 제목으로, 브라우저의 제목에 내용이 나타남 - : 문서의 작성자, 날짜, 키워드, 인코딩 정보 등 화면에 나타나지..

0. 클래스형 뷰란? Django의 views.py에서 함수형(def), 클래스형(class)를 모두 제공하고 있다. 클래스형 뷰의 장점은 아래와 같다. 이미 구현되어 있는 기능을 상속으로 받아와서 쓸 수 있다. 코드가 길어지거나 개발하는 웹 or 앱의 규모가 큰 경우 코드를 깔끔하게 볼 수 있다. 이때, Django에 이미 구현해서 제공하는 기능들을 제네릭 뷰라고 한다. 1. 프로젝트 시작하기 Project 시작하기 1) 가상환경 켜기 $ python -m venv myvenv $ source myvenv/Scripts/activate 2) 가상환경에 django 설치 $ pip install django 3) project 만들기 $ django-admin startproject staticproje..