BackCoder

[ 반응형 웹 ] viewport / @media - media query => 기기별로 세팅 1. 사용 : 1개 html 파일만으로도, 자동 크기 세팅 해주는 기능 - meta 태그 - 검색엔진을 사용하는 기능인데, 이걸 사용해서 View Port 를 활성화 시킨다 html 브라우저 => pc, 노트북, 패드, 스마트폰, 워치 ( 브라우저에서도 크기에 따라 세팅 ) [ viewport 설정 ] - scalable : 확대축소 yes가능 no불가능 세트로 initial maximum 설정 필요 (1: 원본 / 2 : 두배 ) ..

[ 배치규칙 display / position / float / overflow ] block / inline / inline-block / none : 요소들을 배치하는 방식 - 기본 default 값 : block => 블록 형식으로 구성 - 각 태그들이 다 자기 블록을 가짐 - inline으로 잡으면, 최대한 한줄에 나란히 배치해서 보여주려고 조절함. (적당히 자기가 조절하면서 배치함. width 무시 ) ex.) 같은 크기의 태그일때도, inline 으로 display 잡으면 한줄에 두개 잡히고 block 형식으로 잡으면, 줄 구분 하면서 잡힘 - display : inline-block; : 섞은 형식 - display : none; : 안보이게 감..

[ 개발 방법 ] 웹페이지 => 개발자도구 => Elements => 각 태그별 픽셀 확인 [크기지정 단위] px : 16px 기본 - 직접 고정값으로 크기를 준다. % : 100% 기본 - 상대값이다 => 이걸 이용하면 창 크기에 상관없이 %로 주어지므로, 형식을 유지하며 적용 가능 em : 1em 기본 (배수) [크기지정 요소들] font-size : 16px; width / height : 200px; border margin padding --- [ Box모델 ] : 태그는 기본적으로 다 Box 형태로 이루어져 있다. => 이 Box 의 속성을 이용해서 위치조정 / 꾸미기 가능 border-width:20px; 두께 border-style:solid..

: CSS 꾸미기 적용 할껀데, 어디에 있는 어느 태그에 적용시킬꺼야? [#] 아이디속성 #special{color:green;} - 아이디 걸어둔 그 태그에만 적용 [.] 클래스속성 . target{color : blue;} - class 속성의 걸어둔 태그들에만 적용 ( 몇개의 태그만 적용하고 싶은 것에 class 걸어두고 사용 ) [*] 모두 *{color : red;} - 모든 태그에 적용 [body] body{color:pink;} - body 전체에 적용 [여러개] 쉼표 h6 , a {color:blue;} - 쉼표로 여러개 선택 적용 가능 [포함관계] 부모태그 > 자식태그 h1 > a {color:orange;} - h1 에 "직계..

[ CSS ] Cascading Style Sheet : html요소에 보여줄 방식 - 배치, 색상, 선, 크기 등 설정 (1) 부분만 적용 CSS ( inline 방식 ) 이렇게 해당 태그에 직접 적용하면 => 해당하는 h1 에만 적용 ( 로컬 개념 ) (2) Head에서 Style 태그 사용 - 안에서 설정 : 앞으로 h1 태그는 이 스타일로 할게 (3) 자체 css 파일 사용 a.css 파일 태그명 { scc속성:값; scc속성:값; } h1{color:red; font-size:20px; } css 파일에서 태그 style 설정해 두고, => html 파일에서 이렇게 "링크" 시켜서 사용 => 프로젝트할 때, CSS 를 쉽게 통일시킬 수 있다. 각 html 에서 모두 a.css 링크해서 사용하는 ..

(MVC패턴) 1. 게시판 글 목록, 게시글 내용 등을 db에서 '받아올때' 는 MVC 패턴을 사용한다. ( db에서 받아옴 => Model에 담음 => html뿌림 ) ( ThymeLeaf문법 사용 ) model.addAttribute("boards", boardlist); 2. 게시판 작성한 글을 DB에 '올릴때' 는 @PostMapping과 name=" " 속성을 사용한다. ( html에서 사용자입력=> name연결고리 => Post => DTO에 담음 => db에 저장 ) 제목 @PostMapping("writeboard") public String saving(BoardDTO dto) { Board board = dto.toEntity(); boardDAO.savi..

( HTML 4 + CSS + JS ) - 기본구조 - html은 대소문자 구분 X [ 1.Text | 2.Link | 3.Input | 4.Table | 5.List | 6.Media ] 1. Text 태그 [영역 구분] 블록형식 (전체영역) -한줄 바꿔가면서 구분 인라인형식(해당되는 영역만) - 줄바꿈 X - 왼쪽 오른쪽으로 구분하고자 할 때 사용 [semantic 의미적 구분] - 이건 종류 정하는 의미있는 태그 검색창 부분 카테고리바 section본문/article요소/aside광고/ 정책이나 저작권 회사 - 의미적으로만 구분 (실제적 효과 X) - 영역표시 용도 2. Link 태그 구글 여기 [ id ="x" | a href = "#x" ] 그 사건은 바로 ..

HTML은 눈에 보이는 화면 페이지의 뼈대를 만들어주는 언어다. HTML5 버전으로 새롭게 태어나며 엄청난 편의를 제공, 많은 사랑을 받고 있다. 학생시절만 해도, 무슨 사이트만 들어가면 플러그인 설치하라는 팝업이 미친듯이 떳었는데 HTML5 가 등장하면서 태그들을 통합시키고 통합된 태그로 오디오, 동영상들도 모두 화면에 뿌릴 수 있게 만들어줬다. 추가적인 플러그인 설치는 없어졌고, 웹은 크게 깔끔해졌다. 이런 업그레이드된 HTML으로 만든 화면을 Web 에 올리려면 => 웹서버가 필요하다. HTML만 올리는게 목표라면 Apache 등 여러 WS 를 사용하면 된다. (정적리소스) 근데 HTML만 올리면 끝인게 아니라, HTML 하고 Java 에서 만든 로직이 섞인 동적 리소스를 올려야한다면? 즉, Ser..

1. WS (Apache / NGINX) - html / css / javascript 같은 Static 정적 요청 받아서 전달만 해줌 - 클라이언트쪽에서 렌더링 실행 ( 받아서 화면에 띄움 ) 즉 로직이 없는, "화면의 모양새" 만 전달해주는 서버 2. WAS ( TomCat / Jetty ) - 기본적으로 WS 역할 포함 (정적리소스 제공가능) - 프로그램 코드를 실행해서 Application 로직을 실행하는 Servlet / JSP / SpringMVC / RestAPI / 같이 로직을 가진 요청을 받아서 웹 서버에서 작업을 수행해주고 실행 결과를 응답해서 보내주는 서버 => 그렇다면 WS 기능까지 포함한 WAS만 쓰면 되지않을까? ..

select * from member where id = ? => 쿼리문 특정 부분 (?) 을 변수로 주고, 바꾸면서 사용할 상황 => PreparedStatment + 파싱 컴파일 생략으로 속도도 빠르다 connection con = null; PreparedStatement ps = con.prepareStatemente( "select * from member where id = ?" ); ( 아직 미정인 부분을 "?" 로 줘놓고 사용 ) - 여러개도 물론 가능하다. ( INDEX 사용 ) String sql = "insert into member values(?,?,?,?,?,now())"; PreparedStatement pt = con.prepareSt..