-
2020.10.22 #TILTIL(today I learned) 2020. 10. 22. 19:46
오늘은 학원에서 section 위주로 마크업과 css를 만들었다. 같이할땐 쉬웠는데 역시 혼자하려니 조금 답답했다. 그리고 텍스트 말줄임표 생성하는 법을 배웠다.
text 말줄임표 만들기
1. 만들고자 하는 텍스트의 블록에 width 값이 설정되어 있어야함
2. text-overflow: ellipsis;
white-space: nowrap; 작성개인 공부로 이번주에 우리은행 시니어플러스 index페이지를 풀로 만드는 것이 목표이다 오늘은 header부분을 30% 만들었다 주말까지 해서 완성해야지
1. section 만들기
HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>NE_BOOKS</title>
<link rel="stylesheet" href="css/nebooks.css">
</head>
<body>
<section class="sec1">
<!-- 전체영역 100% -->
<article class="art1">
<!-- 가운데영역 1080px -->
<div class="tit_box cf">
<h2>학습자료 안내</h2>
<p>NE능률 도서의 모든 학습 자료가 한곳에!</p>
</div>
<div class="con_box cf">
<div class="go_box left1">
<a href="#">
<p>모든 자료를 보고 싶으신가요?</p>
<strong>학습자료실 바로가기</strong>
</a>
</div>
<div class="go_box right1">
<a href="#">
<p>찾으시는 교재가 있으신가요?</p>
<strong>스마트 검색 바로가기</strong>
</a>
</div>
</div>
</article>
</section>
<section class="sec2 cf">
<article class="art2 cf">
<div class="brand_box">
<h3>브랜드 SNS</h3>
<a href="#" class="eng_cafe">
<p>NE Build&Grow</p>
<strong>영어 선생님 카페</strong>
</a>
<a href="#" class="mom_cafe">
<p>NE 능률 플러스</p>
<strong>초등맘 카페</strong>
</a>
</div>
<div class="news_box">
<h3>뉴스/공지</h3>
<div class="notice_list_wrap">
<ul class="notice_list">
<li>
<a href="#">
[안내] ★교과서 / 자습서 / 문제집 구매 안내★
</a>
<span>2019.12.19</span>
</li>
<li>
<a href="#">
[안내] NE능률 교과서에 대한 학교 시험문제 관련 안내...
</a>
<span>2019.10.25</span>
</li>
<li>
<a href="#">
[안내] 나이스 교과서 주문시, 출판사 정보 표기 관련 안.....
</a>
<span>2019.09.23</span>
</li>
</ul>
</div>
</div>
<div class="custom_box">
<h3>고객센터</h3>
<div class="call_box">
<strong>1833-8368</strong>
<p>평일 : 9시 ~ 18시(점심 12:30 ~ 13:30)</p>
</div>
<ul>
<li><a href="#">1:1문의</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">문자상담</a></li>
</ul>
</div>
</article>
</section>
</body>
</html>
CSS
*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
a{
text-decoration: none;
color: #333;
}
.cf:after{
content: "";
display: block;
clear: both;
}
section{
width: 100%;
background-color: #f8f8f8;
}
.art1{
margin: 0 auto;
padding: 60px 0;
width: 1080px;
}
.art1 .tit_box{
margin: 0 0 20px;
}
.art1 .tit_box h2{
display: inline-block;
margin: 0 10px 0;
font-size: 23px;
letter-spacing: -0.45px;
vertical-align: middle;
}
.art1 .tit_box p{
display: inline-block;
vertical-align: middle;
}
.art1 .tit_box p:before{
content: "";
display: inline-block;
margin: 0 15px 0 0;
width: 1px;
height: 15px;
background-color: #ddd;
vertical-align: middle;
}
.art1 .go_box{
display: inline-block;
width: 516px;
height: 192px;
float: left;
}
.art1 .go_box.left1{
margin: 0 48px 0 0;
}
.go_box a{
padding: 54px 0 0 258px;
display: inline-block;
width: 100%;
height: 100%;
box-sizing: border-box;
text-align: center;
}
.go_box.left1 a{
background: url(../images/bg_box_data.png) no-repeat 0 50% #fff;
}
.go_box.right1 a{
background: url(../images/bg_box_smart.png) no-repeat 0 50% #fff;
}
.go_box p{
margin: 0 0 8px;
font-size: 14px;
color: #8a879a;
}
.go_box strong{
position: relative;
font-weight: bold;
font-size: 21px;
color: #4544b;
}
.go_box strong:after{
content: "";
position: absolute; left:50%; top: 40px;
margin: 0 0 0 -37px;
width: 74px;
height: 11px;
background: url(../images/i2.png) no-repeat 50% 50%;
}
.sec2{
width: 100%;
background-color: #fff;
}
.art2{
margin: 0 auto;
padding: 60px 0;
width: 1080px;
}
.art2 *{
box-sizing: border-box;
}
.art2> div{
float: left;
vertical-align: top;
}
.art2> div> h3{
font-size: 23px;
letter-spacing: -0.45px;
}
.brand_box{
padding: 0 35px 0 0;
width: 365px;
overflow: hidden;
}
.brand_box a{
float: left;
display: inline-block;
width: 158px;
padding: 16px;
margin: 13px 0 0;
border: 1px solid #5f5f6d;
border-radius: 3px;
font-size: 15px;
line-height: 18px;
color: #45444b;
letter-spacing: -0.45px;
background: url(../images/i3.png) no-repeat right 15px top 50%;
}
.brand_box a.eng_cafe{
margin-right: 12px;
}
.news_box{
width: 412px;
padding: 0 30px 0 40px;
}
.notice_list{
margin: 11px 0 0;
}
.notice_list li{
margin: 0 0 12px;
}
.notice_list li a{
overflow: hidden;
display: inline-block;
width: 260px;
vertical-align: middle;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 13px;
letter-spacing: -0.45px;
}
.notice_list li span{
font-size: 13px;
}
.custom_box{
width: 303px;
padding-left: 35px;
}
.call_box{
padding: 8px 0 10px 58px;
background: url(../images/i1.png) no-repeat 0 50%;
}
.call_box strong{
font-size: 33px;
color: #4544b;
letter-spacing: -0.45px;
}
.call_box p{
margin-left: 3px;
font-size: 12px;
color: #979797;
letter-spacing: -0.45px;
line-height: 18px;
}
.custom_box ul li{
float: left;
display: inline-block;
width: 84px;
height: 28px;
margin-right: 5px;
border: 1px solid #45444b;
border-radius: 2px;
text-align: center;
font-size: 12px;
}
.custom_box ul li a{
display: block;
line-height: 26px;
}
결과
'TIL(today I learned)' 카테고리의 다른 글
2020.10.27 #TIL (0) 2020.10.28 2020.10.26 #TIL (0) 2020.10.27 2020.10.21 #TIL (0) 2020.10.22 2020.10.19 #TIL (0) 2020.10.20 2020.10.16 #TIL (0) 2020.10.16