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

자격증 시험공부와 동영상강의 그리고 오프라인 강의수강을 병행하다보니 메인페이지 하나 짜는데 너무 기간이 오래 걸리는것같아서 좀 빠르게 진행하고 원래 목적인 javascript 를 적용하는걸 진행해야겠다는 생각이 들었다.

 

그래서 오늘은 contents 부분을 css로 디자인을 입혀보았다.

 

상당히 단순한구조라 강의박스 하나만 잡아주면 나머지는 자동으로 잡힌다.

 

아이콘들은 https://fontawesome.com/ 에서 cdn 을 이용하여 적용하였다.

 

 

 

CSS

 

/* contents */

.contents-area {

width:100%;

}

.contents-area .contents {

max-width: 1170px;

margin:0 auto;

}

.quick-banner {

height:159px;

margin:30px 0;

}

.quick-banner ul li {

float:left;

width:31%;

}

.quick-banner ul li:nth-child(2) {

margin:0 3.5%;

}

.quick-banner ul li a {

display:block;

background: yellow;

height:159px;

}

.lecture-area h3 {

border-bottom:1px solid #eeeeee;

margin-bottom:10px;

}

.lecture-area h3::after {

content:'';

display:block;

border-bottom:2px solid #02A1D2;

width:100px;

margin-top:10px;

}

.lecture-area ul {

height:400px;

}

.lecture-box {

height:auto;

width:23%;

margin:0 1%;

float:left;

box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

}

.lecture-box .lecture-img {

height:170px;

background: #666666;

}

.lecture-box .lecture-img a {

display:block;

height:170px;

}

.lecture-box .cont-detail {

margin:15px;

}

.lecture-box h4 a {

color:#353535;

font-size:1.1rem;

}

.lecture-box h4 a:hover {

color:#02A1D2;

}

.lecture-box .lec-info {

padding: 20px 0;

height:28px;

}

.lec-info .star {

float:left;

color:#ffc000;

}

.lec-info .price {

float:right;

font-weight:600;

color:#02A1D2;

}

.lecture-box .join-people {

font-weight:600;

}

 

 

원래 인프런 메인페이지의 컨텐츠 내용은 조금씩 상이한 부분이 있다.

 

원래 목적은 이 메인페이지를 이용하여 javascript 를 어떻게 적용할 수 있을지에 대한 내용을 하기 위해서 이니까...

 

 

 

결과물

 

 

빠르게 큰틀을잡고 크로스브라우징이라던지 슬라이드와 상단의 메뉴가 스크롤시 고정되면서 로고가 나타나는것 등을 진행하려고 한다.

 

더불어 검색엔진 최적화도 같이 다뤄볼 예정이다.

 

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

 

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