분류 전체보기169 01. JSP (JSP 기본문법, 지시자, 스크립트릿, 표현식) ○ JSP (JavaServer Pages) - 자바 서버 페이지 - 서버 사이드 스크립트 언어 - HTML내에 자바 코드를 삽입하여 웹 서버에서 동적으로 웹 페이지를 생성하여 웹 브라우저에 돌려줌 - JAVA EE ○ .jsp페이지에서 사용 가능한 문법 - HTML Tag - CSS - JavaScript - JSP ○ JSP 기본문법 - 주석 : - 작성 영역 선언 : - JSP Directive(지시자) ① : 현재 JPS 페이지에 대한 정보, 페이지 처음에 꼭 넣어주어야 함 ② : 현재 JSP 파일에 다른 JSP(또는 HTML) 문서를 포함시킴 ③ : 사용할 태그 라이브러리(EL, JSTL 등) 선언 ○ 지시자 - language="" : 생략가능 - contentType="" : 필수요소 - p.. 2022. 6. 27. 07. Bootstrap, 그리드 시스템 (Grid System) ○ Container - 12개의 칼럼을 지원하는 시스템 - 한줄(row)는 총 12칸으로 구성 ○ 동일한 열 너비 - 단위 없는 클래스를 원하는 수만큼 추가하면 모든 열의 너비가 동일 1 / 2 2 / 2 1 / 3 2 / 3 3 / 3 ○ 열 너비 설정 - 한 열의 너비를 설정하면 형제 열은 자동으로 크기를 조정 1 / 3 2 / 3 3 / 3 1 / 3 2 / 3 3 / 3 ○ 반응형 클래스 - 6개의 기본 그리드 계층 ① .col (xs) : 항상 가로로 배치 ② .col-sm-* : 576px 이하에서 세로로 표시 시작 ③ .col-md-* : 768px 이하에서 세로로 표시 시작 ① .col-lg-* : 992px 이하에서 세로로 표시 시작 ② .col-xl-* : 1200px 이하에서 세로로.. 2022. 6. 26. 06. Bootstrap, 컨테이너 (container) ○ Container - Bootstrap에서 가장 기본적인 레이아웃 요소 - 기본 그리드 시스템을 사용할 때 필요 - 내용을 정렬하는데로 사용 - 종류 ① .container : 좌우여백 있음 ② .container-fluid : 좌우여백 없음 container Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure d.. 2022. 6. 25. 05. Bootstrap, 모달창 (Modal) ○ 모달(Modal) VS 팝업(Popup) ① 팝업 - 부모창과 자식창이 서로 독립적 관계 - 현재 화면에 다른 화면을 하나의 창으로 보여줌 - wondow.open() 함수 사용 ② 모달 - 부모창과 자식창이 한몸으로 구성되어 있음 - 화면 위에 하나의 작은 화면을 더 만들어 부가적인 일들을 처리 - 모달은 새로운 태그는 아니고, 이벤트에 따라 의 display를 조절해주는 것 - 팝업창은 모바일에서 뜨지 않거나 문제가 생기는 경우가 많아 최근에는 모달을 주로 사용함 ○ 모달(Modal) ① Bootstrap3 Open Modal × Modal Header Some text in the modal. Close ② Bootstrap4 Open modal Modal Heading × Modal body... 2022. 6. 24. 04. Bootstrap3, Input (text, password, textarea, checkbox , radio, select) ○ Text, Password Name: Password: ○ Textarea Comment: ○ Checkbox Option 1 Option 2 Option 3 Option 1 Option 2 Option 3 ○ Radio Option 1 Option 2 Option 3 Option 1 Option 2 Option 3 ○ Select Select list (select one): 1 2 3 4 Mutiple select list (hold shift to select more than one): 1 2 3 4 5 ○ Input 크기 Default input input-lg input-sm 2022. 6. 24. 03. Bootstrap, 표 (table) ○ 기본 테이블 Firstname Lastname Email John Doe john@example.com Mary Moe mary@example.com July Dooley july@example.com ○ 줄무늬 테이블 - 얼룩말처럼 흰색과 회색 배경이 교대로 ○ 테두리가 있는 테이블 ○ 마우스 올린 셀의 배경색이 변하는 테이블 (hover table) - 마우스를 올리지 않은 상태는 기본 테이블과 스타일 동일 ○ 셀 높이가 좁은 테이블 (Condensed Table) ○ 셀 색상 - , 에서 사용가능 Success Danger Info Info Active Primary Success Danger Info Warning Active Secondary Light Dark 2022. 6. 23. 이전 1 ··· 5 6 7 8 9 10 11 ··· 29 다음
