[웹] 인프런메인페이지 구조짜기 - CSS(1)

뼈대를 다 만들었으니 이제 디자인을 입히려고 한다.

 

CSS 요소나 태그명들이 인프런과 다를 수 있다.

 

반응형이나 기타 다른 부분은 제외하고 전체창일떄 보여지는 화면을 css 로 짜려고 한다.

 

 

CSS

 

/* 초기화 */

* {

margin:0;

padding:0;

}

html, body {

height:100%;

font-size:100%;

color:#515151;

}

li {

list-style: none;

}

a {

text-decoration:none;

color:#515151;

}

.hidden {

height:0;

width:0;

visibility: hidden;

}

.clear::before {

content:'';

display:block;

clear: both;

}

/* header */

header {

background: #eeeeee;

width:100%;

height:94px;

position: absolute;

}

.header-container {

max-width: 1170px;

margin: 0 auto;

}

nav {

width:75%;

font-size:1.1rem;

float:left;

}

.gnb {

float: right;

}

.gnb li {

float:left;

}

.gnb li>a, .top-menu li a {

display:block;

height:94px;

line-height:94px;

padding:0 16px;

font-weight: 600;

}

.gnb li>a:hover {

color:#02A1D2;

}

.gnb li ul {

display: none;

}

.top-menu {

width:25%;

float:right;

padding-left:12%;

box-sizing: border-box;

}

.top-menu li {

float:left;

}

.top-menu li a {

padding: 0 20px;

font-size:0.9rem;

}

/* banner */

.banner-area {

width:100%;

height:550px;

background: url('https://d81pi4yofp37g.cloudfront.net/wp-content/uploads/home2_01.png') center center no-repeat #f1f1f1;

}

.banner-contents {

max-width: 1170px;

margin:0 auto;

padding-top:70px;

}

.banner-contents .container {

width:540px;

height:350px;

text-align: center;

padding:30px;

}

.container .member-txt {

padding-top:70px;

}

.container form {

margin-top:10px;

padding:6px 20px;

}

.container input[type=text] {

border:none;

background:white;

width:80%;

height:65px;

text-align: center;

vertical-align: bottom;

font-size:1rem;

}

.container input[type=submit] {

border:none;

background: white;

height:65px;

width:15%;

color:#00bd48;

margin-left:-6px;

font-size:11px;

font-weight:600;

cursor: pointer;

}

.container input[type=submit]:hover {

background: #00bd48;

color:white;

}

.container h3 {

margin:20px 0 10px 0;

}

.container .slide-area {

width:450px;

height:120px;

margin:30px auto;

padding:10px;

text-align: center;

}

.slide-area {

position: relative;

}

.slide-area ul{

width:340px;

margin:auto;

position: relative;

z-index: 1;

}

.slide-area ul li {

float:left;

margin:0 10px;

}

.slide-area ul li a {

display: block;

width:65px;

height:65px;

background:#666666;

color:white;

}

.arrow {

font-size:4rem;

width:100%;

position: absolute;

top:0;

left:0;

z-index: 0;

}

.arrow .arrow-left {

float:left;

}

.arrow .arrow-right {

float:right;

}

.arrow a {

color:white;

}

.arrow a:hover {

color:#00bd48;

}

 

 

- 가볍게 사용될 코드들만 우선 초기화를 진행

- 상단 메뉴 및 레이아웃 배치는 float / position 등을 사용하였다.

- 배너의 이미지는 background:url() 로 깔려있다.

 

결과화면

 

 

코드 가독성을 위해서 https://carbon.now.sh 에서 이미지화 시켜서 업로드하고있는데

 

git : https://github.com/kangyongseok/inflearn_main_clone_coding

 

code-reading 블로그에 방문해 주셔서 환영합니다.
댓글은 모두 환영하니 많이 달아주세요.