Skip to content

Instantly share code, notes, and snippets.

@crongro

crongro/a.html

Last active March 21, 2017 13:01
Show Gist options
  • Save crongro/f06847fced77b56a7d43e024e168571d to your computer and use it in GitHub Desktop.
Save crongro/f06847fced77b56a7d43e024e168571d to your computer and use it in GitHub Desktop.
Download ZIP
kakaocorp.com_html 제작중
Raw
a.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>카카오</title>
<link rel="stylesheet" href="main.less.css">
</head>
<body>
<section class="container">
<aside class="left">
<div class="map">
<ul>
<li>SITEMAP</li>
<li>ENGLISH</li>
</ul>
</div>
<nav class="menu">
<h2>KAKAO</h2>
<ul>
<li><a href="">카카오</a></li>
<li><a href="">투자정보</a></li>
<li><a href="">인재영입</a></li>
<li><a href="">새소식</a></li>
<li><a href="">고객문의</a></li>
<li><a href="">정책</a></li>
</ul>
</nav>
<div class="left-footer"></div>
</aside>
<section class="main-content">
<section class="content">
<div class="title-photo">
<img src="http://www.kakaocorp.com/images/operating/temp_mov_151001.jpeg" alt="">
</div>
<div class="company-info">
<article class="news card">
<h3 class="title">NEWS</h3>
<div class="line"></div>
<div class="article-content">
<h4>카카오, '카카오톡 주문하기' 오픈</h4>
<div class="content-body">-쉽고편리한주문이핵심...카카오톡내에서모든과정이뤄져-프랜차이즈브랜드는카카오톡을통한이용자접점확보및효과적마케팅가능-주문을시작으로구매,예약등다양한비즈니스기능순차적으로추가해나갈것2017.03.21]카카오(대표임지훈)는카카오톡으로다양한프랜차이즈브랜드의</div>
</div>
</article>
<article class="news card no-title">
<div class="article-content">
<h4>카카오, 영지 전략 게임 ‘에잇킹덤즈 for Kakao’ 군주 정보 공개!</h4>
<div class="content-body">5일간의CBT통해 총12종의 군주 선보일 예정[2017-03-17]카카오(대표 임지훈)는17일,영지 전략 게임 신작‘에잇킹덤즈for Kakao’의 주인공‘군주’와 관련된 정보를 공개했다.‘에잇킹덤즈for Kakao’는 슈퍼노바일레븐(대표 김대진)의 전략 게임 전문가들이 개발 중인 </div>
</div>
</article>
<article class="stock card"></article>
</div>
<div class="main-service">
<div class="service-item"></div>
<div class="service-item"></div>
<div class="people"></div>
</div>
</section>
<section class="right">
<div class="service-item"></div>
<div class="service-item"></div>
<div class="kakao-story-link"></div>
<div class="notice-list"></div>
</section>
</section>
</section>
</body>
</html>
Raw
main.less
body, div, section, ul, li, h1, h2, h3, h4, header, nav, footer, p {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
a {
text-decoration: none;
}
@base-height: 800px;
@kakao-color: #ffcd00;
@outline-border: 1px solid #cabfbf;
html {
font-size: 16px;
}
.left, .main-content, .content, .right {
float: left;
}
ui.card {
@margin-base: 1.2rem 0;
padding: 1.5rem 1rem;
box-sizing: border-box;
.title {
font-size: 0.8rem;
margin: 1rem 0;
}
.line {
width: 20px;
border: 1px solid #9d8f8f;
margin: @margin-base;
}
.content-body {
margin: @margin-base;
line-height: 1.6rem;
font-size: 0.8rem;
}
}
aside.left {
width: 200px;
.map {
padding: 10px;
text-align: center;
ul {
margin-top: 25px;
li {
display: inline-block;
font-size: 0.6rem;
}
}
}
.menu {
text-align: center;
margin-top: 200px;
h2 {
color: @kakao-color;
}
ul {
margin-top: 25px;
li {
margin-bottom: 1rem;
font-size: 0.8rem;
}
}
}
}
.main-content {
width: 75%;
min-width: 700px;
border-left: @outline-border;
border-right: @outline-border;
.content {
width: 66.66666%;
.title-photo {
height: 390px;
img {
width: 100%;
height: 390px;
}
}
.company-info, .main-service {
float: left;
width: 50%;
height: 500px;
box-sizing: border-box;
}
.company-info {
border-right: @outline-border;
}
.main-service {
}
}
.right {
border-left: @outline-border;
box-sizing: border-box;
width: 33.33333%;
height: @base-height;
}
}
@media (max-width:901px) {
.left {
display: none;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment