본문 바로가기

풀스택 개발 학습 과정138

[HTML + CSS] CSS 4 - float / flex 를 이용한 콘텐츠 배치 Float 이용 배치 Float을 이용한 Layout-2 (1) float을 적용한 예 Box-1 Box-2 Box-3 Box-4 Box-5 (2) float을 적용한 예2 Box-1 Box-2 Box-3 Box-4 Box-5  Flex 를 이용한 배치 Flex을 이용한 Layout (1) flex을 적용한 예 1 Box-1 Box-2 Box-3 Box-4 Box-5 (2) flex-direction : row(default), column, r.. 2024. 2. 25.
[자바스크립트] 데이터 타입, 변수선언, Scope 자바스크립트란- 사이에 코드를 입력해야 한다.  - head 태그 사이나 bady 태그 사이 어느 곳에 있어도 괜찮다.- 단, script 에서 dom에 접근하려면 dom이 완성된 이후에 접근해야 한다. alert() : 경고창 자바스크립트 시작 <script> 와 </script> 사이에 코드를 입력해야 한다. head 태그 사이나 bady 태그 사이 어느 곳에 있어도 괜찮다. 단, script 에서 dom에 접근하려면 dom이 완성된 이후에 접근해야 한다.  데이터 타입자료형종류내용문자열대한민국", '대한민국'숫자형정수, 실수, 모두포함된 숫자 boolean 형true, false (0을 제외한 모든 숫자가 tru.. 2024. 2. 25.
[HTML + CSS]CSS 3 - Position Position종류내용기본값 : static / relative형제들에게 영향을 주지 않는다. top, left 이동시 원래 자리를 기준으로 이동한다.absoliute형제들에게 영향을 준다. 브라우저 기준으로 이동한다. Position을 이용한 배치 하나 둘 셋 넷 다섯 코드 결과 Position 수정종류내용position : static  top, bottom, left, right 적용 안됨position :  relativetop, bottom, left, right 적용 되지만, 아래 태그들은 영향을 받지 않는다. position : absolute- top, bottom, left, right 적용 되지만, 아래 태그들도 영향을 받는다.- 부모중에서 relativ.. 2024. 2. 25.
[HTML + CSS] CSS 2 - 텍스트 스타일, 배경색과 이미지, Display, Float 텍스트 관련 스타일Font종류역할font-family 글꼴지정 - 대중적인 글꼴 사용, 웹 폰트 사용(구글 폰트 등)font-size 글꼴 크기 지정font-style글꼴 꾸밈(이탤릭체, 볼드체) 지정font-weight굵기(100~900까지 100씩 늘어나도록, 400 : 디폴트), bold, bolder 등font-varient영문기준 소문자 크기의 대문자로 표현 Text종류역할color글꼴 색상 지정text-decoration글꼴 꾸밈(overline, underline, line-throug, none)text-transform영문자일 경우 대소문자 지정text-shadow글꼴 그림자 지정white-space공백 처리 방법 지정line-spacing, word-spacing자간 조정text-ali.. 2024. 2. 25.
[HTML + CSS] CSS 1 - CSS 선택자 종류 css 를 배우기 전 우리가 글 형식을 꾸미던 방식은 태그 안에서 style 이라는 옵션을 사용하여 형식을 꾸미는 것이었다. 일부 글자만 스타일을 적용하고자 할때 사용 하지만 해당 방식은 css의 우선순위를 가져가 디자인이 제대로 이용되지 않는다는 단점이 존재하였다. 태그 아래에  http://meyerweb.com/eric/tools/css/reset/  v2.0 | 20110126 License: none (public domain): CSS 의 형식을 모두 초기화하는 css 이다. 모두가 사용할 수 있도록 공개해 놓았다.html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acr.. 2024. 2. 17.
[HTML + CSS] HTML 태그 - 2 영역 분할 태그브라우저 내에서 공통된 역할을 담당하는 요소들을 집합시켜 다른 요소와 구별하고그룹화된 요소를 브라우저의 특정 위치에 배치시키도록 하기 위한 태그영역분할 태그블럭 요소- 위에서 아래로 쌓이는 구조이다.- 경계가 있다. (boder-box)- 너비와 높이가 적용된다. (css를 이용해 너비와 높이 그리고 위치를 조정할 수 있다.)- div 태그 : 영역분할에 사용되는 대표적인 태그- 너비와 높이가 있다.(인라인 요소는 너비와 높이를 조정할 수 없다.) - 외에도 sementic 태그인 header, footer, section, article hn,p, ol, ul, dl 등이 있다.인라인 요소- 왼쪽에서 오른쪽으로 쌓이는 구조이다.- 경계 속성이 없다.- 인라인 요소는 너비와 높이를 줄 수 .. 2024. 2. 17.
[HTML + CSS] HTML 태그 - 1 FRONTRND1) HTML (HyperText Markup Language) : 웹문서의 구조 2) CSS (Cascading Style Sheet) : 웹문서의 표현 3) JavaScript : 웹문서의 로직담당 (동적인 기능)html : https://www.javatpoint.com/html-5-tags HTML 5 Tags - javatpointHTML 5 tags with examples, forms, input, text, anchor, image, heading, marquee, textarea, paragraph, title, quotes, code etc.www.javatpoint.comHTML텍스트 콘텐츠 태그텍스트 콘텐츠를 표기하는 태그hn 태그 - Heading제목을 표기하는 태그.. 2024. 2. 15.
[자바 - 오라클] JPQL (Java Persitence Query Language) ** 잊지 않기! 사용 테이블-- ============ JPQL_TESTDROP TABLE test_user;DROP SEQUENCE testuser_seq;CREATE TABLE test_user( userid NUMBER PRIMARY KEY , username VARCHAR2(250) NOT NULL , pwd VARCHAR2(200) NOT NULL , email VARCHAR2(200) NOT NULL);CREATE SEQUENCE testuser_seq;SELECT * FROM test_user; 패키지 :  com.kdigital.jpql_test.entity;lombok 사용하여 생성자,  Setter, Getter, ToString 생성userid 는 SEQUENC.. 2024. 2. 14.
[자바] ENUM ENUM 이란- 클래스처럼 보이게 하는 상수- 서로 관련있는 상수들끼리 모아 상수들을 대표할 수 있는 이름으로 타입을 정의하는 것- Enum 클래스 형을 기반으로 한 클래스형 선언  STS4 에서 ENUM의 파일 위치 예제 1. season; 은 넣어도 되고 안넣어도 되지만 기본 형태는 넣지 않은 형태이다.public enum Season { SPRING, SUMMER, FALL, WINTER} public class SeasonTest { public static void main(String[] args) { Season data = Season.SPRING; System.out.println(data); }}SPRING 을 함수처럼 사용하여 SPRING이 출력 된다.enum 클래스는 한 패키.. 2024. 2. 13.