웹 공부중... 내 코딩 정리노트

http://wwuu12366.dothome.co.kr/php/login/login.php 로그인 wwuu12366.dothome.co.kr 컨텐츠 영역 로그인 회원가입 입력폼 이메일 비밀번호 로그인

컨텐츠 영역

real_escape_string(trim($_POST['youEmail'])); $sql .= "WHERE youEmail = '{$youEmail}'"; } if($type == "nickCheck"){ $youNickName = $connect -> real_escape_string(trim($_POST['youNickName'])); $sql .= "WHERE youNickName = '{$youNickName}'"; } $result = $connect -> query($sql); $jsonResult = "bad"; //데이터 유무 확인 if($result -> num_rows == 0){ $json..

http://wwuu12366.dothome.co.kr/php/login/join.php 회원 가입 wwuu12366.dothome.co.kr 컨텐츠 영역 회원가입 회원가입은 1인당 1개의 이메일 계정을 이용할 수 있습니다. 개인정보를 수집 및 이용하며, 회원의 개인정보를 안전하게 취급하고, 교육을 목적으로 사용됩니다. 개인정보 수집 및 이용에 대한 안내 목적 : 가입자 개인 식별, 가입 의사 확인, 가입자와의 원활한 의사소통, 가입자와의 교육 커뮤니테이션 항목 : 아이디(이메일주소), 비밀번호, 이름, 생년월일, 휴대폰번호 보유기간 : 회원 탈퇴 시까지 보유(탈퇴일로부터 즉시 파기합니다.) 개인정보 수집에 대한 동의를 거부할 권리가 있으며, 회원 가입시 개인정보 수집을 동의함으로 간주합니다. 약관에 동..

http://wwuu12366.dothome.co.kr/php/quiz/quiz.php PHP 사이트 wwuu12366.dothome.co.kr HTML 컨텐츠 영역 코딩 퀴즈 코딩 공부를 퀴즈를 재밌게 해봅시다! 과목 선택 javascript jquery html css . 해설 보기 다음 문제 정답 확인 해설보기 닫기 CSS /* quiz */ .quiz__inner { text-align: left; } .quiz__body .title { background: #fff; padding: 40px; border-radius: 10px; font-size: 40px; } .quiz__num { font-size: 40px; } .quiz__ask { font-size: 24px; } .quiz__de..

align-items justify-content flex-direction flex-basis flex-grow flex-shrink flex-wrap flex align-self

Flexbox는 모던 웹을 위하여 제안된 기존 레이아웃보다 더 세련된 방식의 니즈를 부합하기 위한 CSS3의 새로운 레이아웃 방식입니다. flexbox에서 사용하는 속성은 부모요소와 자식요소를 나누어집니다. 전체적인 정렬이나 흐름에 관한 속성은 flex container에서 정의하고 자식 요소의 크기나 순서와 관련된 속성은 flex item에서 정의합니다. 이를 분리해서 적용하는 것이 flex-box에서 가장 중요합니다. - flex container 속성 : flex-direction, flex-wrap, justify-content, align-items, align-content - flex item 속성 : flex, flex-grow, flex-shrink, flex-basis, order 그리..

.layer_bg { display: none; position: fixed; left: 0; top: 0; z-index: 900; width: 100vw; height: 100vh; background: rgba(0,0,0,0.8); } .layer { display: none; position: relative; z-index: 1000; left: 25vw; top: -70vh; width: 50vw; height: 50vh; border: 3px solid #000; background: #fff; } .layer p { padding: 30px; text-align: left; line-height: 1.6; font-size: 16px; } .layer h2 { padding: 20px; c..

HTML 해설보기 닫기 SCRIPT //레이어 팝업 $(".comment").click(function(){ $(".layer").show(); $(".layer_bg").show(); }); $(".layer .close").click(function(){ $(".layer").slideUp(300); $(".layer_bg").hide(); }); 팝업 CSS 보기 :

HTML 소스보기 HTML CSS JavaScript 닫기 CSS * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'NexonLv1Gothic'; } a { text-decoration: none; color: #fff; transition: all 0.2s; } li { list-style: none; } img { width: 100%; vertical-align: top; } body { width: 100%; height: 100vh; background-image: url(../img/img_slide01.jpg); background-size: cover; background-position: center center; over..