PART 1 HTML 편
CHAPTER 01 HTML 소개
1.1 웹의 개요
__1.1.1 웹이란?
__1.1.2 웹의 동작 원리
1.2 실습 환경 구축
1.3 HTML의 개요
__1.3.1 HTML 문서의 구조
__1.3.2 웹 페이지의 제목
1.4 HTML의 주석문
[연습문제]

CHAPTER 02 HTML의 기본 태그
2.1 텍스트
__2.1.1 글 제목 -

~

2.1.2 단락 -

2.1.3 줄바꿈 -

2.1.4 HTML 특수 문자
2.2 이미지
2.2.1 이미지 삽입 -
2.2.2 URL 주소와 경로
2.3 오디오와 비디오
2.3.1 오디오 -

2.4.2 순서 목록 -

2.5 하이퍼링크
프로젝트 2-1 : 데이터 센터 소개 페이지 만들기
프로젝트 2-2 : 랙돌 고양이 소개 페이지 만들기
프로젝트 2-3 : 에버랜드 이용 안내 페이지 만들기
[연습문제]

CHAPTER 03. 폼 양식과 테이블
3.1 폼 양식이란?
3.2 입력 요소 -
3.2.1 텍스트 입력 창
3.2.2 비밀번호 입력 창
3.2.3 라디오 버튼
3.2.4 체크 박스
3.2.5 파일
3.2.6 버튼
3.2.7 태그의 속성
3.3 선택 박스 - <br /> 3.5 표<br /> 3.5.1 표 삽입 - <table<tr> <th> <td><br /> 3.5.2 셀의 병합<br /> 프로젝트 3-1 : 열차 시간표 만들기<br /> 프로젝트 3-2 : 기상청 일기예보 표 만들기<br /> 프로젝트 3-3 : 회원가입 폼 만들기<br /> 프로젝트 3-4 : 답글쓰기 폼 만들기<br /> [연습문제]<br /> <br /> Part 2. CSS 편<br /> CHAPER 04 C </div> </div> <div class="tab-container" id="tab2"> <ul class="tab"> <li><a href="#tab1" class="ko" onclick="scrollToElement('tab1');">도서목차</a></li> <li><a href="#tab2" onclick="scrollToElement('tab2');" class="active ko">서평</a></li> </ul> </div> <div class="row mt40 mb40" id="tab2"> <div class="col-md-12"> </div> </div> </div> </div> </div> <div class="hidden-xs hidden-sm mt80"></div> <div class="hidden-lg hidden-md mt80"></div> <script> function openModal() { var inputVal = $("#inputVal").val(); var inputIdx = $("#idx").val(); //alert(inputVal); $("#myModal input[name='aa']").val(inputVal); $("#myModal input[name='idx']").val(inputIdx); $("#myModal").modal("show"); } </script> <style> .modal{background-color:transparent;text-align:center}.modal.fade .modal-dialog{transform:translate(0,0)}@media screen and (min-width:768px){.modal:before{display:inline-block;vertical-align:middle;content:" ";height:100%}}.modal-dialog{display:inline-block;text-align:left;vertical-align:middle}.modal-content{margin:auto;width:100%;max-width:500px} </style> <style type="text/css"> .form-control, input[type=color], input[type=date], input[type=datetime-local], input[type=datetime], input[type=email], input[type=month], input[type=number], input[type=password], input[type=search], input[type=tel], input[type=text], input[type=time], input[type=url], input[type=week], select, textarea { border: 1px solid #ddd; -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; border-radius: 0; font-size: 14px; color: #7a7a7a; -webkit-box-shadow: none; height: 50px; -moz-box-shadow: none; -ms-box-shadow: none; box-shadow: none; background: #fff; -moz-transition: .2s ease-in; -o-transition: .2s ease-in; -webkit-transition: .2s ease-in; transition: .2s ease-in; appearance: auto; -webkit-appearance: auto; -moz-appearance: auto; text-indent: 0.01px; text-overflow: ''; } </style> <div id="myModal" class="modal fade" role="dialog"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="modal-title ko f14">조사참여하기</h4> </div> <form id="frm1" action="./detail_update.php" method="post" enctype="multipart/form-data" autocomplete="off"> <div class="row" style="padding:20px;"> <div class="col-md-12"> <div class="form-group"> <input type="hidden" name="aa" class="form-control" value=""> <input type="hidden" name="idx" class="form-control" value=""> <input type="hidden" name="mb_id" class="form-control" value=""> </div> <div class="form-group"> <select class="form-control" name="area" id="area" required> <option value='시도'>시도</option><option value='강원'>강원</option><option value='경기'>경기</option><option value='경남'>경남</option><option value='경북'>경북</option><option value='광주'>광주</option><option value='대구'>대구</option><option value='대전'>대전</option><option value='부산'>부산</option><option value='서울'>서울</option><option value='세종'>세종</option><option value='울산'>울산</option><option value='인천'>인천</option><option value='전남'>전남</option><option value='전북'>전북</option><option value='제주'>제주</option><option value='충남'>충남</option><option value='충북'>충북</option> </select> </div> <div class="form-group"> <select class="form-control" name="add_1" id="add_1" required> <option value=''>선택하세요</option> </select> </div> <div class="form-group"> <select class="form-control" name="add_2" id="add_2" required> <option value=''>선택하세요</option> </select> </div> <div class="form-group"> <select class="form-control" name="add_3" id="add_3" required> <option value=''>선택하세요</option> </select> </div> <div class="form-group"> <select class="form-control" name="add_5" id="add_5" required> <option value=''>학년</option> </select> </div> <div class="form-group"> <select class="form-control" name="add_6" id="add_6" required> <option value='1반'>1반</option><option value='2반'>2반</option><option value='3반'>3반</option><option value='4반'>4반</option><option value='5반'>5반</option><option value='6반'>6반</option><option value='7반'>7반</option><option value='8반'>8반</option><option value='9반'>9반</option><option value='10반'>10반</option> <option value="전체">전체</option> <option value="학부모">학부모</option> </select> </div> <div class="form-group"> <input type="text" class="form-control" name="school_name" id="name" placeholder="이름(한글 또는 영문)" required> </div> <button type="submit" id="submit" class="btn btn-primary btn-block ko f14" style="padding: 10px 0px;">조사참여하기</button> </form> </div> </div> </div> </div> </div>  <style type="text/css"> /* 모바일기기 1 / @media only screen and (max-width: 320px) { .footer-col.footer-3 h3 { text-transform: uppercase; font-size: 16px; } } / 모바일기기 2 / @media only screen and (min-width: 321px) and (max-width: 768px){ .footer-col.footer-3 h3 { text-transform: uppercase; font-size: 16px; } } / 태블릿 / @media only screen and (min-width: 769px) and (max-width: 1200px){ .footer-col.footer-3 h3 { text-transform: uppercase; font-size: 35px; } } / 데스크탑 / @media only screen and (min-width: 1201px) { .footer-col.footer-3 h3 { text-transform: uppercase; font-size: 35px; } } </style> <footer id="footer"> <div class="container"> <div class="row" style="padding-bottom:20px;"> <div class="col-md-6 col-md-offset-3 text-center"> <div class="footer-col footer-3 mb40"> <h3 class="ko">희망도서 선정 설문조사</h3>  </div> </div> </div> </div> </footer> <div class="hidden-sm hidden-xs" style="position: fixed; right: 4%; bottom: 11.5%; text-align: center; z-index:9999"> <a href="https://open.kakao.com/o/gKRN0K8e" target="_blank"> <img src="http://tsls.co.kr/img/ka.png" width="45"> </a> </div>  <div class="hidden-lg hidden-md" style="position: fixed; right: 4%; bottom: 14%; text-align: center; z-index:9999"> <a href="https://open.kakao.com/o/gKRN0K8e" target="_blank"> <img src="http://tsls.co.kr/img/ka.png" width="45"> </a> </div> <div style="position: fixed; right: 4%; bottom: 5%; text-align: center; z-index:9999"> <button type="button" id="btn-top"> <i class="fa fa-arrow-up" aria-hidden="true"></i><span class="sound_only"></span> </button> </div>  <script src="http://tsls.co.kr/theme/theme_1/js/jquery.min.js"></script>  <script src="http://tsls.co.kr/theme/theme_1/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>  <script src="http://tsls.co.kr/theme/theme_1/js/jquery.easing.1.3.min.js" type="text/javascript"></script>  <script type="text/javascript" src="http://tsls.co.kr/theme/theme_1/js/jquery.sticky.js"></script>  <script src="http://tsls.co.kr/theme/theme_1/js/jquery.flexslider-min.js" type="text/javascript"></script>  <script src="http://tsls.co.kr/theme/theme_1/js/jquery.stellar.min.js" type="text/javascript"></script> <script src="http://tsls.co.kr/theme/theme_1/js/jquery.backstretch.js"></script>  <script src="http://tsls.co.kr/theme/theme_1/js/waypoints.min.js"></script>  <script src="http://tsls.co.kr/theme/theme_1/js/jquery.counterup.min.js" type="text/javascript"></script>  <script src="http://tsls.co.kr/theme/theme_1/js/wow.min.js" type="text/javascript"></script>  <script src="http://tsls.co.kr/theme/theme_1/owl-carousel/owl.carousel.min.js" type="text/javascript"></script>  <script src="http://tsls.co.kr/theme/theme_1/js/jquery.magnific-popup.min.js" type="text/javascript"></script>   <script src="http://tsls.co.kr/theme/theme_1/js/jquery.magnific-popup.min.js" type="text/javascript"></script> <script type="text/javascript" src="http://tsls.co.kr/theme/theme_1/rs-plugin/js/jquery.themepunch.tools.min.js"></script> <script type="text/javascript" src="http://tsls.co.kr/theme/theme_1/rs-plugin/js/jquery.themepunch.revolution.min.js"></script> <script type="text/javascript" src="http://tsls.co.kr/theme/theme_1/js/revolution-custom.js"></script> <script src="http://tsls.co.kr/theme/theme_1/slide/responsive-slider.js"></script> <script src="http://tsls.co.kr/theme/theme_1/js/raphael-min.js"></script> <script src="http://tsls.co.kr/theme/theme_1/morris/morris.min.js"></script> <script src="http://tsls.co.kr/theme/theme_1/js/jquery.socialfloating.js"></script>  <script src="http://tsls.co.kr/theme/theme_1/js/jquery.selectric.min.js"></script> <script src="http://tsls.co.kr/theme/theme_1/js/custom.js" type="text/javascript"></script> <script> $(document).ready(function() { $('.btn-number').click(function(e) { e.preventDefault(); fieldName = $(this).attr('data-field'); type = $(this).attr('data-type'); var input = $("input[name='" + fieldName + "']"); var currentVal = parseInt(input.val()); if (!isNaN(currentVal)) { if (type == 'minus') { if (currentVal > input.attr('min')) { input.val(currentVal - 1).change(); } if (parseInt(input.val()) == input.attr('min')) { $(this).attr('disabled', true); } } else if (type == 'plus') { if (currentVal < input.attr('max')) { input.val(currentVal + 1).change(); } if (parseInt(input.val()) == input.attr('max')) { $(this).attr('disabled', true); } } } else { input.val(0); } }); $('.input-number').focusin(function() { $(this).data('oldValue', $(this).val()); }); $('.input-number').change(function() { minValue = parseInt($(this).attr('min')); maxValue = parseInt($(this).attr('max')); valueCurrent = parseInt($(this).val()); name = $(this).attr('name'); if (valueCurrent >= minValue) { $(".btn-number[data-type='minus'][data-field='" + name + "']").removeAttr('disabled') } else { alert(`최소 ${minValue}개 이상 주문하셔야 합니다.`); $(this).val($(this).data('oldValue')); } if (valueCurrent <= maxValue) { $(".btn-number[data-type='plus'][data-field='" + name + "']").removeAttr('disabled') } else { //alert(`최대 ${maxValue}개까지 주문 가능합니다.`); alert(`주문개수를 초과 하였습니다. 관리자에게 문의주세요.`); $(this).val($(this).data('oldValue')); } }); }); </script> <script> $("#area").change(function() { var url = "./detail_ajax.php"; var area = $(this).val(); var params = "mode=1&area=" + area; $.ajax({ type: "POST", url: url, data: params, success: function(data) { $("#add_1").html(data); } }); }); $("#add_1").change(function() { var url = "./detail_ajax.php"; var area = $("#area").val(); var add_1 = $(this).val(); var params = "mode=2&area=" + area + "&add_1=" + add_1; $.ajax({ type: "POST", url: url, data: params, success: function(data) { $("#add_2").html(data); } }); }); $("#add_2").change(function() { var url = "./detail_ajax.php"; var area = $("#area").val(); var add_1 = $("#add_1").val(); var add_2 = $(this).val(); var params = "mode=3&area=" + area + "&add_1=" + add_1 + "&add_2=" + add_2; $.ajax({ type: "POST", url: url, data: params, success: function(data) { $("#add_3").html(data); } }); }); / $("#add_2").change(function() { var add_2 = $(this).val(); if (add_2 == "초등학교") { $("#add_5").html("<option value='1학년'>1학년</option><option value='2학년'>2학년</option><option value='3학년'>3학년</option><option value='4학년'>4학년</option><option value='5학년'>5학년</option><option value='6학년'>6학년</option><option value='전체'>전체</option><option value='학부모'>학부모</option>"); } else { $("#add_5").html("<option value='1학년'>1학년</option><option value='2학년'>2학년</option><option value='3학년'>3학년</option><option value='6학년'>6학년</option>"); } }); / $("#add_2").change(function() { var add_2 = $(this).val(); if (add_2 == "초등학교") { $("#add_5").html("<option value='1학년'>1학년</option><option value='2학년'>2학년</option><option value='3학년'>3학년</option><option value='4학년'>4학년</option><option value='5학년'>5학년</option><option value='6학년'>6학년</option><option value='전체'>전체</option><option value='학부모'>학부모</option>"); } else { $("#add_5").html("<option value='1학년'>1학년</option><option value='2학년'>2학년</option><option value='3학년'>3학년</option><option value='전체'>전체</option><option value='학부모'>학부모</option"); $("#add_6").show(); $("#name").val('').hide(); } }); $("#add_5").change(function() { var add_5 = $(this).val(); var school_name = ""; if (add_5 == "전체" || add_5 == "학부모") { $("#add_6").hide(); $("#name").val('').hide(); school_name = add_5; } else { $("#add_6").show(); $("#name").val('').show(); } $("input[name='school_name']").val(school_name); }); var selectElement = $("#add_6"); var inputElement = $("#name"); selectElement.on("change", function() { if (selectElement.val() === "전체" || selectElement.val() === "학부모") { inputElement.hide(); inputElement.removeAttr("required"); inputElement.val(""); // 입력된 값을 초기화 } else { inputElement.show(); inputElement.attr("required", ""); } }); / $("#add_5").change(function() { var add_5 = $(this).val(); if (add_5 == "전체" || add_5 == "학부모") { $("#add_6").hide(); $("#name").val('').hide(); } else { $("#add_6").show(); $("#name").val('').show(); } }); / / $(document).ready(function() { $('input[name=school_name]').on('input', function() { var regex = /[^a-zA-Z가-힣ㄱ-ㅎㅏ-ㅣ\x20]/gi; if ($(this).val().match(regex)) { $(this).val($(this).val().replace(regex, '')); } }); }); */ </script> </body> </html>

도서명	HTML/CSS 입문 예제 중심 : HTML/CSS 기초에서 반응형 웹까지
저자	황재호
출판사	인포앤북 주식회사
출판일	2020-11-25
정가	25,000원
ISBN	9791196440930
수량

도서상세보기

~