-
2020.10.26 #TILTIL(today I learned) 2020. 10. 27. 00:00
오늘 학원에서 3가지의 section을 만들었다. 이제 시험도 끝나고 코딩에 집중할 수 있어서 너무 좋았다. 예제 더 많이 만들어보고싶다. 그리고 input요소와 visibility라는 css 명령어도 배웠다. visibility는 hidden; visible; inherit; 등의 속성값을 사용할 수 있는데 hidden은 display: none;과 비슷하지만 레이아웃에 영향을 끼치지 않는다는 차이점이 있다.
아 cursor라는 명령어도 배웠는데 마우스 커서의 모습을 바꿔준다. pointer; move; auto; text; 등의 값을 쓸 수 있다.
그리고 저녁시간에는 자바스크립트 기초 공부를 시작했다. JS가 무엇인지, 언어와 환경의 구분과 줄바꿈, 여백과 같은 기초적인 부분을 배웠다. 내일은 숫자와 문자를 공부할 것이다. 간략하게 JS는 웹브라우저를 프로그래밍적 제어하기 위하여 만들어진 언어이다. 그러나 언어가 발전하면서 웹브라우저 뿐만아니라 웹서버에서도 자바스크립트를 사용할 수 있게 됐는데 이때 사용되는 것은 node.js이다. 그래서 자바스크립트라는 언어를 배우면 웹브라우저 환경과 웹서버 환경에서 제어하는 언어로 사용이 가능하다는 큰 장점이 있다. 또한 이제는 Google Apps Script라는 앱 스크립트가 발명되면서 웹을 넘어 웹/앱에서 모두 자바스크립트를 사용할 수 있다.
1. 2020국제어린이마라톤 section
HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>2020어린이국제마라톤</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<section class="f_goods">
<div class="wrap_goods cf">
<h2>스페셜 굿즈<br>구매하기</h2>
<a href="#">
<div>
<h3>스트랩</h3>
<p>저소득가정 아동을<br>돕는 특별한<br>핸드폰 스트랩</p>
</div>
</a>
<a href="#">
<div>
<h3>숄더백</h3>
<p>6인의 아티스트가<br>디자인한<br>데일리 숄더백</p>
</div>
</a>
<a href="#">
<div>
<h3>칫솔</h3>
<p>아동을 지키고,<br>자연을 살리는<br>착한 칫솔 세트</p>
</div>
</a>
</div>
</section>
</body>
</html>
CSS
*{
margin: 0;
padding: 0;
font-family: "NanumBarunGothic";
}
.cf:after{
content: "";
display: block;
clear: both;
}
a{
text-decoration: none;
color: #000;
}
.f_goods{
width: 100%;
background-color: #f0f0f0;
border-bottom: 1px solid #bcbbbc;
}
.wrap_goods{
margin: 0 auto;
padding: 15px 10px 0;
width: 1120px;
}
.wrap_goods h2{
padding: 0 10px 0;
width: 280px;
height: 240px;
float: left;
position: relative;
box-sizing: border-box;
color: #ed1b23;
font-size: 28px;
background: url(../img/footer_arrow.png) no-repeat right 60px top 0;
}
.wrap_goods h2:after{
content: "";
display: inline-block;
width: 1px;
height: 85%;
background-color: #bcbbbc;
position: absolute; right: 20px; top:0;
}
.wrap_goods a{
padding: 0 10px 0;
display: block;
width: 280px;
height: 240px;
float: left;
position: relative;
box-sizing: border-box;
color: #ed1b23;
}
.wrap_goods a:after{
content: "";
display: inline-block;
width: 1px;
height: 85%;
background-color: #bcbbbc;
position: absolute; right: 20px; top:0;
}
.wrap_goods a:nth-child(4):after{
content: "";
display: none;
}
.wrap_goods a:nth-child(2){
background: url(../img/footer_strap.png) no-repeat right 40px bottom 0;
}
.wrap_goods a:nth-child(3){
background: url(../img/footer_shoulder.png) no-repeat right 40px bottom 0;
}
.wrap_goods a:nth-child(4){
background: url(../img/footer_toothbrush.png) no-repeat right 40px bottom 0;
}
.wrap_goods a h3{
font-size: 28px;
color: #000;
margin-bottom: 20px;
}
.wrap_goods a p{
font-size: 19px;
color: #212529;
line-height: 1.47;
letter-spacing: -0.38px;
}
결과
<목표>
<결과>
2. 탐앤탐스 footer
HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>TOM N TOMS</title>
<link rel="stylesheet" href="css/style.css">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
</head>
<body>
<footer>
<div class="f_wrap cf">
<div class="call">
<h3>고객만족센터</h3>
<p>02.3412.0781</p>
</div>
<div class="contents">
<div class="f_nav">
<ul class="cf">
<li><a href="#a">회사소개</a></li>
<li><a href="#a">채용안내</a></li>
<li><a href="#a">프랜차이즈</a></li>
<li><a href="#a">계열사소개</a></li>
<li class="no_be"><a href="#a">공지사항</a></li>
<li><a href="#a">고객만족센터</a></li>
<li><a href="#a">찾아오시는길</a></li>
<li class="no_be"><a href="#a">가맹점 전용 게시판</a></li>
</ul>
</div>
<div class="f_address">
<ul class="cf">
<li>서울특별시 강남구 논현로 163길 10 베드로빌딩 2F(구 : 신사동570-6)</li>
<li>대표 : 김도균</li>
<li>사업자등록번호 : 215-86-65050</li>
<li>개인정보 책임자 : 이동규</li>
<li>TEL. 02-3412-0781</li>
<li>FAX. 02-34412-1907</li>
</ul>
</div>
<div class="f_copyright">
<p>COPYRIGHT © 2015 TOM N TOMS COFFEE.ALL RIGHTS RESERVED.</p>
</div>
</div>
<div class="f_sns cf">
<h3>Follow us</h3>
<div class="sns_box">
<a href="#a"><img src="img/sns_instagram.png" alt="인스타그램 바로가기"></a>
<a href="#a"><img src="img/sns_facebook.png" alt="페이스북 바로가기"></a>
<a href="#a"><img src="img/sns_youtube.png" alt="유튜브 바로가기"></a>
<a href="#a"><img src="img/sns_blog.png" alt="블로그 바로가기"></a>
</div>
</div>
</div>
</footer>
</body>
</html>
CSS
*{
margin: 0;
padding: 0;
font-family: 'Noto Sans KR', sans-serif;
}
ul{
list-style: none;
}
a{
text-decoration: none;
color: #000;
}
.cf:after{
content: "";
display: block;
clear: both;
}
footer{
width: 100%;
background-color: #efefef;
}
.f_wrap{
padding: 90px 0 100px;
width:1430px;
margin: 0 auto;
color: #8a8a8a;
}
.call{
width: 400px;
height: 178px;
float: left;
}
.call h3{
font-weight: normal;
font-size: 16px;
line-height: 1;
color: #572a31;
}
.call p{
font-weight: 300;
margin: 20px 0 0;
font-size: 36px;
line-height: 1;
font-family: 'Roboto', sans-serif;
color: #572a31;
}
.contents{
width: 700px;
height: 178px;
float: left;
}
.f_nav{
width: 100%;
}
.f_nav ul{
width: 500px;
}
.f_nav ul li{
margin-bottom: 10px;
padding-right: 26px;
float: left;
position: relative;
}
.f_nav ul li:before{
content: "";
display: inline-block;
width: 2px;
height: 2px;
border-radius: 100%;
background-color: #572a31;
position: absolute; top: 50%; right: 13px;
}
.f_nav ul .no_be:before{
content: "";
display: none;
}
.f_nav ul li a{
font-size: 16px;
color: #572a31
}
.f_address{
margin: 30px 0 0;
width: 100%;
}
.f_address ul{
width: 600px;
}
.f_address ul li{
padding: 0 8px 0 0;
float: left;
font-size: 14px;
letter-spacing: -0.6px;
color: #8a8a8a;
}
.f_copyright{
margin: 20px 0 0;
width: 100%;
}
.f_copyright p{
font-size: 14px;
color: #8a8a8a;
}
.f_sns{
width: 300px;
float: left;
position: relative;
}
.f_sns h3{
font-weight: normal;
font-size: 16px;
line-height: 37px;
font-family: 'Roboto', sans-serif;
color: #666;
float: left;
position: absolute; right: 182px; top: 0;
}
.f_sns .sns_box{
float: left;
position: absolute; right: 0; top: 0;
}
결과
<목표>
<결과>
3. 삼성선물 section
HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>삼성선물</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<section class="research">
<div class="wrapbox">
<div class="r_header">
<h2>리서치</h2>
<a href="#a">더보기</a>
</div>
<div class="contents cf">
<div class="con1">
<a href="#a">
<h3>글로벌채권</h3>
<p>미국 대선 일주일전,<br>부양책 교착 속 대기모드</p>
<ul class="detail cf">
<li class="date">2020-10-26</li>
<li class="writer">허태오</li>
</ul>
<div class="btn_pdf">PDF</div>
</a>
</div>
<div class="con2">
<a href="#a">
<h3>외환</h3>
<p>[주간] 지지선 테스트와<br>임박한 미 대선</p>
<ul class="detail cf">
<li class="date">2020-10-26</li>
<li class="writer">전승지</li>
</ul>
<div class="btn_pdf">PDF</div>
</a>
</div>
<div class="con3">
<a href="#a">
<h3>원자재</h3>
<p>코로나 재확산 우려가<br>짓누른 시장</p>
<ul class="detail cf">
<li class="date">2020-10-26</li>
<li class="writer">김광래</li>
</ul>
<div class="btn_pdf">PDF</div>
</a>
</div>
<div class="con4">
<a href="#a">
<h3>주간전망</h3>
<p>[10월4주]경제-중국이<br>"미국 제로금리 시대"를<br>활용하는 방법</p>
<ul class="detail cf">
<li class="date">2020-10-26</li>
<li class="writer">최서영</li>
</ul>
<div class="btn_pdf">PDF</div>
</a>
</div>
</div>
</div>
</section>
</body>
</html>
CSS
*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
a{
text-decoration: none;
color: #000;
}
.cf:after{
content: "";
display: block;
clear: both;
}
section{
width: 100%;
background: url(../img/bg_research.png) no-repeat center;
}
.wrapbox{
padding: 80px 0;
width: 1200px;
margin: 0 auto;
}
.r_header{
width: 100%;
position: relative;
}
.r_header h2{
padding: 30px 0;
color: #0c1a3c;
font-size: 32px;
}
.r_header a{
padding: 10px;
line-height: 1;
font-size: 18px;
font-weight: bold;
vertical-align: middle;
position: absolute; right: 0; bottom: 10px;
}
.r_header a:after{
content: "";
display: inline-block;
margin-left: -1px;
width: 24px;
height: 24px;
vertical-align: middle;
transform: rotate(-90deg);
background: url(../img/arr_more.png) no-repeat center / 100%;
}
.contents{
width: 100%;
}
.contents> div{
margin-right: 15px;
padding: 40px 30px;
float: left;
width: 285px;
height: 330px;
box-sizing: border-box;
background-color: #fff;
}
.contents> div:hover{
border: 1px solid #067fd9;
box-shadow: 0 0 20px rgba(0,0,0,.2);
}
.contents> div a h3{
font-size: 13px;
color: #067fd9;
}
.contents> div a p{
height: 94px;
margin: 18px 0 48px;
font-weight: bold;
color: #010101;
font-size: 22px;
line-height: 1.4;
letter-spacing: -1.5px;
overflow: hidden;
text-overflow: ellipsis;
}
.contents> div a p:after{
content: "";
display: inline-block;
margin-left: 8px;
width: 16px;
height: 16px;
background: url(../img/ico_new.png) no-repeat center /100%;
}
.contents> div a ul{
width: 100%;
}
.contents> div a ul li{
float: left;
font-size: 14px;
color: #333;
}
.contents> div a ul .writer{
margin-left: 5px;
padding-left: 5px;
border-left: 1px solid #e4e8eb;
}
.btn_pdf{
margin: 30px 0 0;
padding: 0 8px;
width: 20px;
height: 24px;
line-height: 24px;
text-align: center;
font-size: 0.75rem;
font-weight: bold;
color: #e65338;
border: 1px solid #e65338;
}
* 오랜만에 box-shadow를 사용했음
결과
<목표>
<완성>
'TIL(today I learned)' 카테고리의 다른 글
2020.10.28 #TIL (0) 2020.10.29 2020.10.27 #TIL (0) 2020.10.28 2020.10.22 #TIL (0) 2020.10.22 2020.10.21 #TIL (0) 2020.10.22 2020.10.19 #TIL (0) 2020.10.20