$$config title: [프론트엔드] 메인페이지 keywords: - IT - ... $$ # 초안 ![원본이미지](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fcho7wQ%2FbtrHqEggZoc%2FJ7KO6aPuWMFgKxQBI9vqx1%2Fimg.png) [링크](https://codepen.io/denist2322/pen/VwXjJVb) # html ```html

Dolphin

로그인 회원가입

돌핀

대표이사 : 돌핀 | 사업자등록번호:버언호 | 통신판매업 신고

(주)돌핀 | 주소: 대전시 서구 둔산동 어딘가

공부를 위해 만든 페이지 입니다.

안전거래센터 신고하기

``` # CSS ```css /* 폰트 */ @font-face { font-family: 'BMJUA'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_one@1.0/BMJUA.woff') format('woff'); font-weight: normal; font-style: normal; } html > body, html > body input, html > body select, html > body textarea, html > body pre, html > body button { font-family:"BMJUA"; color: #333; text-underline-position: under; line-height:1.3; } /* 노말라이즈 */ body, ul, li { margin:0; padding:0; list-style:none; } a { color:inherit; text-decoration:none; } /* 라이브러리 */ .con { width:1200px; margin-left:auto; margin-right:auto; } .inline-grid { font-size:0; } .inline-grid > * { font-size:1rem; display:inline-block; vertical-align:top; box-sizing:border-box; } /* 커스텀 */ .logo-bar{ display:inline-block; width: 100%; margin-top:20px; } .logo-bar > div{ float:right; } .logo-bar > ul{ float: left; margin: 0; padding: 0; list-style: none; font-size:4rem; font-weight:bold; } /* 로그인, 회원가입 */ .logo-bar a{ text-decoration: none; padding: 10px 10px; font-weight:bold; } /* 메뉴 */ .menu-bar { margin-top:20px; } .menu-box-1 > ul > li { width:calc(100% / 4); font-size:1.5rem; } .menu-box-1 > ul > li > a { display:block; text-align:center; font-weight:bold; border:0 solid black; border-width:0 1px; } .menu-box-1 > ul > li:hover > a { color:brown; } .menu-box-1 > ul > li:first-child > a { border-left-width:2px; } .menu-box-1 > ul > li:last-child > a { border-right-width:2px; } /* 메인이미지 */ .top-image-bar { margin-top:20px; } .top-image-bar > img { width:100%; } /* 바텀 */ .bottom{ height:100%; width:100%; background-color:#d2d2d2; } .text1 > p { margin : 10px; } .text1 > p > a{ text-decoration:underline; } ``` # 참고할 수 있는 사이트 - 쇼핑몰 footer 작성 [링크](https://celltong.tistory.com/entry/HTMLCSS-%EA%B0%84%EB%8B%A8%ED%95%9C-%EC%87%BC%ED%95%91%EB%AA%B0-%EB%A7%8C%EB%93%A4%EA%B8%B0-%EC%8B%A4%EC%8A%B5-3%ED%95%98%EB%8B%A8-%EC%98%81%EC%97%AD) - 색상 코드표 [링크](https://blog.naver.com/PostView.naver?blogId=902grim&logNo=221239546743) - CSS 내비게이션바 양쪽 정렬 [링크](https://zetawiki.com/wiki/CSS_%EB%82%B4%EB%B9%84%EA%B2%8C%EC%9D%B4%EC%85%98%EB%B0%94_%EC%96%91%EC%AA%BD_%EC%A0%95%EB%A0%AC)