본문 바로가기

Frontend57

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.
02. Bootstrap, 버튼 (Buttons) ○ 기본 버튼 스타일 ① Bootstrap3 Basic Default Primary Success Info Warning Danger Link ② Bootstrap4 / Bootstrap5 Basic Primary Secondary Success Info Warning Danger Dark Light Link ○ 아웃라인 버튼 - Bootstrap4 / Bootstrap5 Primary Secondary Success Info Warning Danger Dark Light ○ 버튼 스타일 적용할 수 있는 태그 - , , : clss="btn" 사용가능 Link Button Button ○ 버튼 사이즈 ① Bootstrap3 : 4가지 사이즈 제공 Large Normal Small XSmall ② Boot.. 2022. 6. 23.
01. Bootstrap, 시작하기 (링크, 다운로드, 뷰포트 설정) ○ Bootstrap - HTML, CSS, and JavaScript framework - Bootstrap 3, 4, 5가 있다 - 웹페이지 개발시 frontend(UI)단을 구현하기 위한 무료 오픈소스 - 주로 CSS, 레이아웃, 반응형 웹 구현시 많이 사용한다 - 하나의 CSS로 휴대폰, 태블릿, 데스크탑까지 다양한 기기에서 작동 - 다양한 기능을 제공하여 사용자가 쉽게 웹사이트를 제작, 유지, 보수할 수 있도록 도와줌 ○ Bootstrap 사용 방법 ① viewport 설정 - 다운받은 부트스트랩을 사용하고 싶으면 태그에 뷰포트 반드시 설정해야 함 - 뷰포트 설정시, Desktop, Tablet, Mobile 등 모든 장비에서 웹사이트가 잘 보이게 됨 ② 사용방법1 : 직접 링크 (Include.. 2022. 6. 22.
22. JavaScript, 총정리 (회원가입) ○ JavaScript - JavaScript (또는 jQuery)를 사용하는 이유 ① Frontend(UI, View)단에서 서로 다른 문법(이종)간의 데이터를 교류하기 위해 ② 데이터의 유효성을 검증하기 위해 ○ JavaScript를 이용한 회원가입 폼 1) 회원가입 폼 회원가입 아이디 : 비밀번호 : 주민번호 : - 약관동의 : 2) JavaScript ① 에 접근해 보기 // 1) 의 컨트롤요소 접근시 name 사용(비추) alert(document.memfrm.uid.value); // 2) 의 컨트롤요소 접근시 id 사용(추천) alert(document.getElementById("uid").value); //text에 입력한 내용이 value // 3) tag name으로 접근 (본문에서 .. 2022. 6. 21.
21. JavaScript, style접근 ○ 자바스트립트에서 스타일 접근 - 참고 : jQuery에서 스타일 접근 대한민국 1) 순수 자바스크립트 접근 : document.getElementById("요소의 id").style - document.getElementById("요소의 id").style.스타일속성 - 스타일에 접근해서 수정하기 2) jQuery에서 스타일 접근 : $("요소의 식별자").css() → 추천 2022. 6. 21.
20. JavaScript, this ○ this - 자기자신의 요소를 가리킴 (참조: jQuery this / 비교: JAVA this ) - 폼 컨트롤 요소에서만 사용 가능 - CSS, HTML, jsp 등 여러 언어를 혼용할 때 JavaScript가 중개자 역할을 함 이때, this는 접근경로를 단순화 해주기 위해 사용함 ○ this로 요소 접근하기 - this : 자신의 요소 - this.value : 자신의 요소가 가지고 있는 실제 값 - this.form : 자신의 요소가 속해 있는 폼 this - value="버튼1" - front단에서는 id, 서버에 전송되면 name으로 접근하는 것이 일반적 function test1(){ //1) name접근 var f=document.myform; alert(f); //[object HT.. 2022. 6. 20.

티스토리툴바