날아라쩡글이의 블로그입니다.

row와 col을 사용하지 않고 컨텐츠를 포함시키는 것은 잘못된 이용방법이다. row아래의 컨텐츠를 바로 포함시키는 것은 잘못된 사용이다. col을 row로 감싸지 않고 사용하는 것은 잘 못된 사용이다. row와 col사이에 컨텐츠를 포함시키는 것은 잘못된 사용이다. 코딩을 진행할때는 조각조각 나눠서 div로 감싸서 진행하기 시작한다. 같은 floor에 있을 경우에는 div로 나누고 좌우에 각기 있다면 div로 따로 감싸서 다른 열로 만들어 준다. 화면의 크기, 방향, 기기의 크기에 따라서 레이아웃의 구서잉 달라진다. breakPoint의 경우 뷰포트의 크기이 너비를 설정해주는 것이다. 컨테이너의 너비를 설정한다고 할 수 있다 뭔가를 감싸서 표현하는 --> 쿠팡의 경우 card를 사용하여 표시하고 car..

https://getbootstrap.kr/docs/5.1/getting-started/introduction/ 시작하기 세계에서 가장 인기있는 프레임워크인 Bootstrap으로 반응형, 모바일 우선 사이트를 jsDelivr와 스타터 페이지 템플릿을 통해 시작해보세요. getbootstrap.kr 스타터템플릿을 복사한다 이클립스에서 template을 검색하고 JSP Files의 template에서 new로 새롭게 등록하고 name을 설정 context는 newJsp로 선택한다 앞으로 JSP파일을 등록할 때 그부분을 선택하고 등록하면 된다. html에서 이부분을 등록하고 new라고 눌러줘야 부트스트랩을 사용할 수 있다. 사용자지정 사용자가 지정해서 선택할 수 있다. 레이아웃, 컨텐츠, 도우미, 유틸리티까지..

W3S의 부트스트랩을 이용하여, 다양한 화면이 구성되게 색상, table, 네비게이션 바, cards, 버튼, Alerts, Jumbtron, toast를 지원해준다. 정돈된 화면을 만들 수 있다. 폴더자체가 어떤 그룹이 되는 것이다. 주소의 표기법에는 2가지가 존재한다. 링크 작성시 작성하는 방법이다. 상대주소 표기법 "/"으로 시작하는 방법 빼고는 나머지로 작성하는 방법 현재 주소 표시창의 주소를 기준으로 이동할 주소를 작성한다. "/"으로 시작하지 않는다. 절대주소 표기법 "/"으로 시작하는 주소이다. 현재 주소표시창의 주소를 활용하지 않는다. 링크 1번과 2번의 방식은 정말 다른 방식이다. 상대주소 표기법의 방법 주소창의 주소 http:// localhost..

한페이지에 표시할 데이터 int rowsParpage = 10; 10개까지 표시할 부분을 final로 상수로 만든다. 10개 표현, 20개 표현 현재 표시할 page 번호 입력하기 메인페이지에서 cpno를 1로 링크의 값을 설정한다. 전체사원리스트에서 currentPageNo가 값을 받기위해 int currentPageNo = Integer로 getParemeter을 입력받는다.

input에서 해당값으로 출력을 원할 경우 value속성추가 option은 selected에 추가하되 3항 연산자를 이용한다. ? "selected" : ""으로 표현 checked도 삼항연산자로 작성한다 수정화면의 경우 조회가 이뤄지고, 수정작업후 리스트화면이 구현되면 된다. disable은 제출대상에서 제외된다. 그렇기 때문에 preparStatement로 값을 가져올 때, setObject로 설정하고, JDBCType을 NUMERIC로 설정해준다. null을 입력하는 것이라고 인식시킨다. 혹은 if문으로 null값인지 아닌지로 표현할 수 있지만 가독성을 위하여 설정한다. 수정하는 것은 어렵다. 수정을 하고 error가 난다면? stop - > clean - > tomcatClean - > 다시 st..

Java홈페이지의 에디션을 확인하면 Java SE = standard : 데스크탑에서 실행되는 응용프로그램 개발과 관련된 자바의 기술사용시 사용 Java EE = 서버에서 실행되는 프로그램 개발과 관련된 자바의 기술이 정의 Java ME = micro edition : 핸드폰과 관련된 기술 가 존재한다 Java EE를 확인하면, javaservlet.package가 존재한자. 자바의 web관련된 package이다 class interfaces는 이렇게 존재한다. 메소드를 확인해보면 destory()와 init(servletConfig), service(ServletRequest req, ServletResponse res)를 주로 사용한다. destroy()의 메소드는 폐기전의 실행이되며, _jspPes..

조회작업의 경우 응답의 컨텐츠를 html으로 보낼 수 있지만, insert,update,delete의 작업의 경우 재요청하는 응답을 보내야한다. 총 2번의 응답과 요청이 이뤄진다고 할 수 있다. 재요청의 URL의 응답으로 어떤작업인지가 제일 중요하다. 이전까지는 post방식으로 클라이언트에게 서버로 요청파라미터를 전달하였다. form태그 안에 폼의 입력요소를 추가하고 form태그의 메소드 속성을 post로 설정하여 form태그안에서 submit타입의 버튼을 클릭해서 값을 제출하였다. 무한대로의 입력이 가능하고 데이터를 제한하지 않는다. 서버에 제한은 둘 수 있지만, http상에서는 제한을 두지않는다. getParameter로 값을 읽어올 수 있다. 값을 키값의 쌍값으로 body부로 전달하는 방법 요청을 ..

Apache.org에서 Tomcat을 다운받고 설치하였고, 글씨를 encoding으로 UTF-8으로 변경을 전부 해주었다. 모듈의 path는 localhost:8080 / sample / home.jsp로 webserver주소와/ 웹프로젝트의 식별자로 배포된이름 / jsp의 이름을 설정해주었다. http란 hyper text transfer protocal로 브라우져가 요청 주체가 되었고, 클리아이언트 역활을 한다. 웹서버는 tomcat으로 제공주체, 분석처리, html으로 응답을 제공한다. 정적 html content는 요청하는 클라이언트가 상관없이 시간은 상관없이, 같은 내용이 나온다. 동적 html content는 요청하는 클리어언트에 따라서 로그인, 사용자, 시간, 그리고 각기 다른 내용의 htm..

tomcat 웹 어플리케이션 서버 (Web Application Server) (WAS) 클라이언트의 요청을 분석해서 적정할 웹어플리케이션을 실행시킨다. 웹어플리케이션 실행결과로 생성된html 컨텐츠를 클라이언트에게 응답으로 보낸다. tomcat은 서블릿 /JSP엔진 혹은 서블릿/JSP컨테이너 이다. 객체 생성 후 라이프 스타일로 관리한다. 생성, 유지, 폐기 시킨다. 웹 페이지 는 주소를 의미한다. 서버로 들어오기 위해서는 클라이언트가 url주소를 입력해야한다. (링크를 클릭) 해당 url서버로 전달하고 응답한다. 자원, 프로그램, 해당page로 응답을 보내기도 한다. 웹 브라우져 클라이언트의 역활을 수행한다. url을 서버로 전송해서 웹페이지를 요청하거나 웹어플리케이션의 실행을 요청한다. 웹 서버 서..

Header Left Right Content Footer

float는 살짝 띄운다고 생각하면 된다. 그림과 글자를 같이 나타내야하는 경우가 존재한다. 글자는 사진 바로 옆에서 시작하지 않는다. text는 사진의 바로 옆에서 시작되고, 이미지에 가로막혀서 올라가지 못한다. 이미지의 아래에 위치하면 위치할 수 있다. overflow 테두리를 피해서 div가 생기기 때문에 overflow를 이용해서 테두리를 감쌀 수 있다. overflow란 내범위를 넘쳐나다라는 의미이다. 그렇기 때문에 스크롤이 생길 수 있다. 부모쪽 너비와 폭이 가변적으로 생성될 수 있다. float를 overflow로 설정해주어야 가변적으로 변화시킬 수 있다. 높이를 설정할 수 있다.

position은 엘리먼트의 위치를 설정하는 값이다. position속성을 따로 지정하지 않으면 기본값이 static이다. 블록 엘리먼트는 아래쪽으로 순서대로 배치되고, 인라인 엘리먼트는 오른쪽으로 순서대로 배치된다. 엘리먼트의 위치를 지정할 수 없다. https://lionpower.tistory.com/66?category=903520 css문법 (font나머지~ transition초반) float나머지 요소는 항상 수직으로 쌓이려고한다. float의 경우 수평정렬로 만들어지며, float:right 는 우측부터 3, 2, 1의 형태로 배열되고, float:left의 경우 좌측부터 1, 2, 3의 형태로 쌓이게 된다. 해 lionpower.tistory.com position을 확인하는 것이 더 좋다..

속성선택자 는 브라켓[]으로 설정한다. a[herf] a태그 중에서의 href의 속성을 가지는 엘리먼트를 선택해서 스타일을 적용한다. href을 가지고 있는 속성들은 전부 다 찾아 내기 때문에 따로 a를 작성하지 않고 [herf]으로 표현해도 가능하다. [title='google'] title의 속성이 google인 엘리먼트를 선택해서 스타일을 적용한다. [href^='www'] 앞의 꺽쇠란 시작하는 이라는 의미를 가지고 있다. www으로 시작하는 속성이 선택되게 된다. [href$='kr'] $이란 끝나는 이라는 의미를 가지고 있다. href 속성의 값이 'kr'으로 끝나는 엘리먼트를 선택해서 스타일을 적용한다. [title*='홈페이지'] title속성값에 "홈페이지"라는 텍스트를 포함하고 있는 엘리..

margin은 감싸고 있기 때문에 겹치게 되면 한쪽px로 가게된다. 박스의 형태 정의하기 박스모델 모든 html의 엘리먼트(태그) 박스처럼 다루어진다. 화면 디자인, 화면의 레이아웃을 구성할 때 html의 엘리먼트를 박스처럼 다루게 되는데, 이를 박스모델이라고 한다. 구성 html의 모든 엘리먼트는 margin, border, padding, content로 구성된다. margin 테두리 (border)의 바깥여백, 다른 엘리먼트와의 경계 border 엘리먼트의 테두리, padding 과 contents를 감싸고 있다. padding 테두리와 contents사이의 여백, contents를 감싸고 있다. contents 박스 모델이 가지는 실제 내용 box-sizing이 content-box인 경우 wid..

보호되어 있는 글입니다.

필터선택자 : : 필터 선택자는 중간에 :를 삽입한다. 그리고 몇번째 순서의 선택을 할 것인지 입력을 하면된다. 다른 부분들은 선택자 2를 선택했지만, 필터선택자의 경우 선택자 1중에서 선택자 2를 선택하라라는 의미로 선택자 1을 선택하는 것이라고 볼 수 있다. tbody tr:nth-child(2n) tbody중에서 자손선택자중 tr로 되었고 2의 곱셈행들을 가르킨다. tbody td:last-child tbody중에서 자손선택자중 td로 되어있고, 마지막행들을 가르킨다. li:first-chile li중에서 첫번째 것이 찾아진다. first-chile는 장남을 찾는 것이다. li엘리먼트 중에서 부모 엘리먼트의 첫번째 자식 엘리먼트를 선택하는 것이다. .box:first-child div중에서 1번을 ..

자손, 자식, 동생, 동생들(형제) 선택자 태그 선택자 : 전체적으로 박스를 만들고, 위에, 아래에 따로 따로 값을 설정한다. 자손 선택자 : 공백 공백을 둔다. 선택자와 선택자 상이에 빈 공백이 있으면 첫번째 선택자를 고르고 두번째 선택자를 고른다. 첫번째 선택자 안에 두번째 선택자를 선택한 것이다. 자손1에서 모든 자손2를 선택한다 가장많이 선택하는 선택자이다. 자식 선택자 : > 사이에 > 꺽쇠가 포함된다. 예를 들어 .box-4 > p라면 클래스 box-4 바로 아래의 p를 선택한다고 할 수 있다. 클래스 box-4보다 작은 바로 아래의 p라고 생각하자. > 꺽쇠를 이용해서 바로 아래의 자식을 지정할 수 있다. 하나만 선택하고 싶을때 그것이 바로 자식 선택자이다. 형제들 선택자 동생 선택자 : +..

style 태그 선택자로 스타일 적용하기 태그명안에다가 css를 정의하면 된다. 태그 선택자로 스타일 적용하기 h3{color : red;} p{background-color:yellow;} 아이디 선택자로 스타일 적용하기 # first-message{color:blue; font-weight:bolder;} 클래스 선택자로 스타일 적용하기 . top{font-weight: bolder; color:blue;} 한번에 여러가지 선택자로 스타일 적용하기 태그와 태그 선택하기 h1, h3 {} 태그와 아이디 선택하기 #first-message , p {} 태그와 클래스 선택하기 p, .top {} 클래스와 아이디 선택하기 #first-message, .top {} 무한정 조합이 가능하다. script 선택하..

개발자들이 제일 많이 사용하는 태그인 입력폼이다. 인스타에 올리거나 검색하는 것을 의미한다. form태그 폼 요소들을 포함하는 태그이다. 폼 요소 : 일반 텍스트를 입력하는 필드 : 비밀번호를 입력하는 필드 : 숫자만 입력되는 필드 : 년-월-일을 입력하는 달력이 표시되는 필드 : 시:분:초를 입력하는 필드 : 복수개의 선택이 가능한 체크박스를 생성 : 한 개만 선택이 가능한 라디오버튼을 생성 : 첨부파일을 첨부하는 필드 : 입력요소의 값을 리셋시키는 버튼을 생성 : 입력요소에 입력된 값을 서버로 전송하는 버튼을 생성 : 화면에 표시되지 않은 폼요소를 생성 속성에 따라서 타입이 달라진다., 나열된 것 외에도 많은 타입이 많다.많이 사용하지는 않는다. 셀렉트 박스를 생성한다 여러라인의 텍스트를 입력할 수 ..

span 인라인 엘리먼트 텍스트의 일부 혹은 다른 인라인 엘리먼트를 포함하는 컨테이너 엘리먼트 이다. id, class, style 속성이 주로 사용된다. 텍스트의 일부분을 다르게 표시할 때 사용된다. 자바스크립트에서 조작하기 쉽게 하기 위해서 사용한다. 스타일의 일부분을 수정하고 싶을 때 사용하는 것이 span이다. css에 .currency{color:red;} .small-description{font-size: 12px;} .thin-description{font-size: 10px;} .normal-description{font-size: 14px;} 을 입력했다. class의 이름만 위에서 골라서 작성하면 된다.