복습하는 블로그

실습예제(1)을 부트스트랩을 활용하여 다시 작성하기 bxkkim.tistory.com/152?category=435238 07_반응형 웹(실습예제(1)) #responsive_web.html #center.html display속성 inline, lnline-block : 다른 요소 배치 가능 → 부모 요소에 text-alingn : center; block : 다른 요소 배치 불가능 → 자기 자신이 크기를 정하고, margin : 0.. bxkkim.tistory.com 상세정보 버튼을 눌렀을 때 보이도록 하기 Responsive Web Home Service About 홈페이지 제작 개발사 Corporation 개발기간 기본 개발 14일(옵션에 따라 변동) 금액 9,000,000 ~ 옵션 PC페이지(..

• Bootstrap에서는 기본적으로 12칼럼으로 나누어서 기능을 제공하고 있다고 생각하면 쉽다. • 이를 테이블의 형식대로 row 클래스와 각종 col-* 클래스들로 자유롭게 구성이 가능하며 반응형으로 동작한다. • Bootstrap에서는 아래의 규칙대로 이러한 그리드 시스템을 구축하라고 권고하고 있다. • Bootstrap의 그리드 시스템에서 사용하고 있는 칼럼의 클래스 종류는 기본적으로 4가지가 있으며, 각각의 종류 뒤에는 12칼럼 중 몇개의 칼럼을 사용할지 명시하여 사용하면 된다. .col-xs-* 항상 가로로 배치 .col-sm-* 768px 이하에서 세로로 표시 시작 .col-md-* 992px 이하에서 세로로 표시 시작 .col-lg-* 1200px 이하에서 세로로 표시 시작 md-1 md-..

#bootstrap.html 참고사이트 https://www.w3schools.com EXAMPLES → BOOTETRAP → Learn Bootstrap 4 → Try it Yourself 버튼 색상 변경 클릭 클릭 클릭 클릭 클릭 클릭 클릭 클릭 버튼 크기 변경 클릭 클릭 클릭 테이블 111 222 333 111 222 333 111 222 333 111 222 333 111 222 333 111 222 333

display : flex 속성은 부모요소에게 주어야한다! #modal.html 모달창 만들기 로그인 로그인

#flex.html 1 2 3 4 5 6 7 container와 item들이 부모와 자식 관계일 대 container에 display:flex속성을 줌으로써 레이아웃을 변경할 수 있다. .container { display: flex; } container 속성 1) flex-direction : container안에서 item들의 정렬과 배치 방향을 설정하는 속성 display:flex를 정의했을 때 디폴트는 row속성이다. row / row-reverse / column / column-reverse .container { flex-direction: row | row-reverse | column | column-reverse; } 2) flex-wrap : item들의 너비의 합이 containe..

#responsive_web.html #center.html display속성 inline, lnline-block : 다른 요소 배치 가능 → 부모 요소에 text-alingn : center; block : 다른 요소 배치 불가능 → 자기 자신이 크기를 정하고, margin : 0 auto; 사용 테스트문구 버튼

미디어쿼리(Media Query) 화면크기 마다 다른 CSS를 적용하는 것 (화면 사이즈를 인식) 3개의 반응형 분기점 1) pc : 1024px ~ 2) 테블릿 가로, 테블릿 세로 : 768px ~ 1023px 3) 모바일 가로, 모바일 세로 : ~ 768px 미디어쿼리 작성법 css 900px 이전까지는 배경색이 노랑색이다. 900px을 넘어가면 배경색이 초록색이다. 테스트1 테스트2 테스트3 테스트4 최대넓이 700px 까지 최대넓이 700px 초과 시

반응형 레이아웃 min-width 요소의 최소 너비 지정 min-height 요소의 최소 높이 지정 max-width 요소의 최대 너비 지정 max-height 요소의 최대 높이 지정 반응형 웹을 만들기 위한 viewport단위 viewport : 사용자에게 보여지는 웹페이지의 영역으로 화면이 바뀔 때마다 화면에 맞춰 스타일이 바뀌게 되는 웹 형태 css작업을 할 때 주로 px(픽셀)단위를 사용하지만 유동단위인 %를 사용하면 좀 더 유연한 사용이 가능하다. 뷰포트를 기준으로 하는 단위를 사용하여 반응형 웹을 좀 더 쉽게 구현할 수 있다. vw(Viewport Width) 1vw = 뷰포트 너비의 1% vh(Viewport Height) 1vh= 뷰포트 높이의 1% #responsive_1.html 반응형..

유효성 조건 1. 아이디 : 영어소문자+숫자 4~12글자(영어소문자로 시작) 2. 이름 : 한글 2~4글자 3. 비밀번호 : 영어대 /소문자+숫자 6~18글자 4. 이메일 : 영어소문자+숫자 4~12글자@영어소문자+정수+기호(. - 두개 포함).영어소문자+2~6글자 ex) test1234@kh.or.kr도 허용 5. 전화번호 : 숫자2~3개-숫자3~4개-숫자4개(-기호도 포함) 유효성 검사는 해당값이 변하는 경우 체크한다. 유효성검사가 모두 성공하면 enroll.html로 post방식으로 전송한다. 1) position 속성에 대한 이해 position : 페이지의 요소들을 자유롭게 배치해주는 속성 (top, left, right, bottom) relative 이전 요소와 자연스럽게 연결해 배치, 위치..

유효성 검사 조건 1. 아이디 : 영어소문자로 시작하여 영문+숫자 4글자~12글자 2. 비밀번호 : 영어소문자,대문자,숫자를 사용하여 8~12 글자 3. 비밀번호 확인 : 비밀번호와 같은지 체크 4. 이름 : 한글(최소 1글자) 5. 주소 : 영어 및 공백사용불가 6. 전화번호: 전화번호 1 : 010만가능 전화번호 2 : 숫자 3~4 글자 전화번호 3 : 숫자 4 글자 7. 이메일 : 영어+숫자 4~12글자뒤에 @ 뒤에@포함 → 유효성 모두 만족하면 join.html페이지로 post방식으로 전송 form태그 참고 회원가입 아이디 비밀번호 비밀번호 확인 이름 주소 전화번호 - - 이메일 내가 작성한 script는 조건마다 if와 else를 통해서 true이면 테두리와 글자를 없애고, false이면 테두리..