21.08.10 수업일지

임경욱·2021년 11월 25일

화면 구현

HTML의 레이아웃

(1) Header - 주로 로고나 회사명, 사이트 맵, 로그인/회원가입 버튼, 검색 버튼 등이 위치
(2) Navigation - 본문의 주요 메인 메뉴 지정
(3) Section - 해당 페이지의 콘텐츠 영역

CSS의 문법

Bootstrapk

Tip Bootstrapk에서 script의 작성시 jquery가 필요

반응형 Table
table 클래스를 table-responsive 클래스로 감싸서 작은 기기에서는 수평 스크롤을 할 수 있는 반응형 테이블

등을 활용 화면이 좁아질때 스크롤 바가 생긴다. 예시)

...

form
Tip 최적의 여백을 위해 .form-group 으로 라벨과 콘트롤을 감싸세요

placeholder="이메일을 입력하세요" data 입력 방법을 알려주는것 (input창에 뛰어 입력시에 없어지는 글)

중요!!

작성시에 안에 이 있다면 글자만 클릭해도 체크 됨

Form group 과 input group 을 직접 같이 쓰면 안됩니다
- 대신, input group 을 form group 내에 넣도록 하세요.

form-inline
좌측 정렬된 인라인-블록 콘트롤
.sr-only이용하여 라베을 숨길수 있다.

.form-horizontal(수평폼)

Inputs
폼 콘트롤인 텍스트 기반 입력 필드(HTML5 의 모든 타입을 지원)

Textarea
여러 줄의 텍스트를 지원
필요에 따라 rows 속성으로 변경하시오.

에시)

체크박스(여러개 선택가능) 와 라디오(여러개 중 한개만 선택가능)
disabled 속성 - 비활성화 값으로 설정가능

select
옵션으로 만들어지는 선택창

콘트롤 크기조절
input-lg(또는 sm)

열 크기조절
col-xs-2, col-xs-3

Tip btn-block은 부모의 크기 까지 커진다.사이즈가

Helper class

닫기 아이콘
× - 특수문자에서의 "x"

tip 들어가있는 영역 만큼 닫는다.

Carets, float 등이 있다.

center-block
가운데로 보내는 방법이다.
margin-left: auto;
margin-right: auto;

자바스크립트(bootscrepk)

data-** 속성의 값을 불러오는법(중요)

예시)

로 Email data를 입력한다면 console.log($('#p').data("email")) 로 출력을 하게 되면 email의 값이 출력된다. 하지만 data 입력시에는 무조건 소문자로 입력한다. (에러 발생이 될수있다.)

Data 속성

모달

이벤트
e.preventDefault - 이벤트가 시작되기 전에 액션의 실행을 중지하는 기능
tabindex - tab을 누를시에 넘어가는것
data-dismiss="modal"은 모달 창을 지워주는것
요즘은 모달창 사용 안함
애니메이션 제거 .fade 클래스로 제거

tip 순서 없는 목록

Hello Universe