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

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호 ｜ 대표자 : 양진선 ｜ 책임자 ..

/* 자주 사용하는 디자인 코드를 모아놓은 파일 */ @charset "UTF-8"; * { box-sizing: border-box; font-family: 'Noto Sans KR', sans-serif; } /* 컨테이너(Container) - 화면의 단위 - 가운데 정렬되도록 구현 - 내부에 행(row)을 배치하여 원하는 화면을 구성 */ .container { margin-left: auto; margin-right: auto; } /* 자주 사용할 것으로 예상되는 폭을 클래스로 지정 - 최소 300px, 최대 1200px까지 100px 단위로 설정 - 100부터는 비율(%)로 설정 */ .w-100 { width:100%; } .w-300 { width:300px; } .w-400 { widt..

DOCTYPE html> 메뉴 만들기 /* 메뉴는 계층형 구조를 가지는 가장 대표적인 도구 list tag를 이용하여 구현(ol, ul, li) 1차메뉴 - 2차메뉴 - 3차메뉴 - 3차메뉴 - 2차메뉴 - 3차메뉴 - 3차메뉴 - 3차메뉴 - 2차메뉴 1차메뉴 - 2차메뉴 - 3차메뉴 - 3차메뉴 - 2차메뉴 - 3차메뉴 - 3차메뉴 - 3차메뉴 - 2차메뉴 ul.menu - li - a - ul - li - a - li - a - li - a - li - a - ul - li - a - li - a - li - a */ /* 디자인 초기화 */ ul.menu, ul.menu ul { list-style: none; margin: 0px; padding: 0px; } ul.menu a { color: ..

Font Awesome Font Awesome The internet's icon library + toolkit. Used by millions of designers, devs, & content creators. Open-source. Always free. Always awesome. fontawesome.com Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers cdnjs offers a large collection ..