신입개발자를 희망하는 오시리엔

DOCTYPE html> 다단 배치 /* float 요소를 배치할 수 있는 전용 공간 - ::before 는 공간 시작 지점을 의미하는 가상 선택자 - ::after 는 공간 마지막 지점을 의미하는 가상 선택자 */ .float-container::after { content:""; display: block; /* width:100%도 가능 */ clear: both; } .float-container > .float-left { float: left; } .float-container > .float-right { float: right; } .float-container > .col-2, .float-container > .col-3, .float-container > .col-4, .float-c..

DOCTYPE html> Flex layout /* flexible 레이아웃 스타일 -영역은 display가 flex이거나 inline-flex여야 한다. */ .flex-container { display: flex; } .inline-flex-container { display: inline-flex; } .flex-container.auto-width>*, .inline-flex-container.auto-width>* { flex-grow: 1; } .flex-container.vertical, .inline-flex-container.vertical { flex-direction: column; } .flex-container.align-center, .inline-flex-container.a..

DOCTYPE html> 카드 레이아웃 .row { margin: 5px 0px; } .title { font-size: 20px; } .card { /* border: 1px solid #2d3436; */ box-shadow: 0 0 0 1px #2d3436; } 카드 레이아웃 가게이름 - 당산점 4.9 | 리뷰 152 | 사장님댓글 23 요기서결제 | 17,000원 이상 배달 3,800원 할인 50~60분

DOCTYPE html> 이미지 디자인 /* 이미지 디자인 */ .image.image-circle { border-radius: 50%; } .image.image-round { border-radius: 4px; } .image.image-border, .image.image-hover:hover { /* border: 1px solid #2d3436; */ box-shadow: 0 0 0 1px #2d3436; } .image.image-blur { opacity: 0.6; } .image.image-blur:hover { opacity: 1; } .image.image-lift { box-shadow: 0 0 2px 0px #2d3436; } .image.image-leaf { border-top..

DOCTYPE html> 홈페이지 레이아웃 main { width:1000px; margin: 0 auto; font-size: 16px; } /* 헤더는 좌/중/우 3개로 구분하여 작성 - 좌 - 로고 등을 배치 - 중 - 검색창이나 타이틀을 배치 - 우 - ??? */ header { display: flex; flex-wrap: nowrap; min-height: 80px; } header > .logo { width:25%; } header > .title { flex-grow: 1; } header > .etc { width:25%; } header > .logo, header > .title, header > .etc { display: flex; justify-content: center; ..

DOCTYPE html> 홈페이지 레이아웃 main { width:1000px; margin: 0 auto; font-size: 16px; } /* 헤더는 좌/중/우 3개로 구분하여 작성 - 좌 - 로고 등을 배치 - 중 - 검색창이나 타이틀을 배치 - 우 - ??? */ header { display: flex; flex-wrap: nowrap; min-height: 80px; } header > .logo { width:25%; } header > .title { flex-grow: 1; } header > .etc { width:25%; } header > .logo, header > .title, header > .etc { display: flex; justify-content: center; ..

DOCTYPE html> 홈페이지 레이아웃 /* 좌측/우측 메뉴가 적용되도록 스타일 수정 - 1차 메뉴 항목의 정렬 방식을 flex로 변경 - 1차 메뉴 항목에 .menu-right를 추가하고 좌측 여백을 자동으로 변경 - 좌측 여백이 자동이 되면 가능한 최대의 여백을 부여하여 오른쪽에 붙인다 */ .menu { display: flex; } .menu > li.menu-right { margin-left: auto; } 타이틀/검색창 Home 게시판 로그인 회원가입 메뉴1 메뉴2 메뉴3 메뉴4 메뉴5 컨텐츠 이용약관 | 개인정보취급방침 | 인재채용문의 | 훈련비 게시 | 강사채용 KH정보교육원 ｜ 사업자등록번호 : 851-87-00622 ｜ 서울 강남 제2014-01호 ｜ 대표자 : 양진선 ｜ 책임자 ..

DOCTYPE html> 인증번호 보내기 $(function () { //처음에 로딩아이콘 숨김 $(".btn-send").find(".fa-spinner").hide(); $(".cert-wrapper").hide(); //인증번호 보내기 버튼을 누르면 //서버로 비동기통신을 보내 인증 메일 요청 $(".btn-send").click(function () { var email = $("[name=memberEmail]").val(); if (email.length == 0) return; $(".btn-send").prop("disabled", true); $(".btn-send").find(".fa-spinner").show(); $(".btn-send").find("span").text("이메일 발..

DOCTYPE html> 주소로 지도 찾기 #map { width:100%; height: 300px; } /* info window */ .outer { font-size: 20px; padding: 0.5em; } .outer > .inner { width: 100%; text-align: center; } $(function(){ //마커와 인포윈도우를 기억해 두기 위한 배열 var memory = { markerList: [], infowindowList: [] }; //var container = document.getElementById('map'); //var container = document.querySelector("#map"); var container = $("#map")[0]; ..

DOCTYPE html> 카카오 지도 다루기 2 #map { width:100%; height: 300px; } /* info window */ .outer { font-size: 20px; padding: 0.5em; } .outer > .inner { width: 100%; text-align: center; } $(function(){ //var container = document.getElementById('map'); //var container = document.querySelector("#map"); var container = $("#map")[0]; var options = { //지도의 중심 좌표(위도-latitude, 경도-longitude) center: new kakao.map..