2020.03.19
블록체인 기반 핀테크 및 응용 SW 개발자 양성과정 여섯째날
오늘은 팀끼리 프로그래머스 사이트 만들어보기를 했다ㅎㅎ
3명이서 팀이였는데 다들 실력이 비슷해서 머리 맞대서 열심히 만들어보았다!!!
미세한 부분까지 흡사하게 만들기 위해 많이 노력했다ㅎㅎ
여기서 포인트는 position:absolute;를 사용해서 가운데 정렬을 해줬다는 것이다!!!
position을 사용하였더니 화면 비율을 바꿔도 원본사이트와 똑같이 위치에 변함이 없었음!!
요걸 사용해보았고, 배웠다는 것이 오늘의 큰 수확이었다!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./index3.css">
</head>
<body>
<div id="wrap">
<!-- start header -->
<div id="header" class="w100">
<div id="head_header">
<div id="logo">
<img src="https://programmers.co.kr/assets/bi-programmers-light-0d164d49b51a123bab5cca11106145d6fac5a5ac04b8646780369c2a5bc0dd79.png"
alt="">
</div>
<div id="menu">
<ul class="menu menu1">
<li>탑프로그래머스</li>
<li>실력 체크</li>
<li>개발자 채용</li>
<li>테크 피드</li>
<li>코딩테스트 연습</li>
<li>프로그래밍 강의</li>
</ul>
</div>
<ul class="menu menu2">
<li>계정만들기</li>
<li>로그인</li>
<li>기업회원</li>
</ul>
</div>
<div id="head_visual" class="row">
<ul>
<li>
<h3>
기술 중심 개발자 채용 플랫폼
<span>
개발자 채용의 끝은,</br>
결국 코드니까
</span>
</h3>
<p>
이력서보다, 당신의 코드가 우선시되는</br>
프로그래머스만의 채용 프로그램을 만나보세요.
</p>
<a href="#">시작하기</a>
</li>
</ul>
<img src="https://programmers.co.kr/packs/img-root-catch-1-9e73217e96a367e6690c57fb02d98a7a.png" alt="">
</div>
</div>
<!-- end header-->
<!-- start position-->
<div id="position" class="row mt30">
<div class="position_header">
<ul>
<li>채용프로그램
<span><a href="#">더보기</a></span>
</li>
<li class="pos2">
</li>
</ul>
</div>
<div class="position_content1">
<img src="https://grepp-programmers.s3.amazonaws.com/image/origin/production/competition/109596/7b87afd1-5fab-4d45-a8e5-0a9aede3a0d6.png"
alt="">
<dl>
<dt>
2021 Dev-Matching: 웹 백엔드 개발자(상반기)
</dt>
<dd>
접수 : 21년03월 08일 11:00 - 04월 02일 17:00
<p>
테스트 : 21년04월 03일 16:00 - 04월 03일 18:00
</p>
</dd>
</dl>
</div>
<div class="position_content2">
<img src="https://grepp-cloudfront.s3.ap-northeast-2.amazonaws.com/programmers_imgs/competition-imgs/2021/dm_fe1/2021-dm-fe__prgm__img-banner.png"
alt="">
<dl>
<dt>
2021 Dev-Matching: 웹 프론트엔드 개발자(상반기)
</dt>
<dd>
접수 : 21년02월 15일 11:00 - 03월 05일 17:00
<p>
테스트 : 21년03월 06일 13:00 - 03월 06일 16:00
</p>
</dd>
</dl>
</div>
</div>
<!-- end position-->
<!-- start program-->
<div id="program" class="row mt30">
<div class="program_header">
<ul>
<li>채용 중인 포지션
<span><a href="#">포지션 더보기</a></span>
</li>
</ul>
</div>
<div class="program_header2">
<ul>
<li><a href="#">Java</a></li>
<li><a href="#">Spring</a></li>
<li><a href="#">Node.js</a></li>
<li><a href="#">Django</a></li>
<li><a href="#">React.JS</a></li>
<li><a href="#">Vue.js</a></li>
<li><a href="#"> JavaScript</a></li>
<li><a href="#">Python</a></li>
<li><a href="#"> Kotlin</a></li>
<li><a href="#">C++</a></li>
<li><a href="#">Android</a></li>
<li><a href="#">iOS</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>
</div>
<div class="program_content1 con_list">
<ul>
<li class="company company1">
<img src="https://grepp-programmers.s3.amazonaws.com/production/company/logo/2793/26x18_%EC%97%90%EB%B2%84%EC%8A%A4%ED%95%80%EB%A1%9C%EA%B3%A0_.png" alt="">
<h5>
iOS Android.Engineer
</h5>
<p>
에버스핀
</p>
<a href="#">안드로이드 앱</a>
<a href="#">아이폰 앱</a>
<a href="#">시스템 소프트웨어</a>
<a href="#">C</a>
<a href="#">iOS</a>
<a href="#">iOS</a>
</li>
<li>content2</li>
<li>content3</li>
<li>content4</li>
</ul>
</div>
<div class="program_content2 con_list">
<ul>
<li>content1</li>
<li>content2</li>
<li>content3</li>
<li>content4</li>
</ul>
</div>
</div>
<!-- end program-->
<!-- start position_footer-->
<div id="position_footer" class="w100 mt30">
position_footer
</div>
<!-- end position_footer-->
<!-- start code-->
<div id="code" class="row">
<div class="code_header">
</div>
<div class="code_content1">
<ul>
<li>content1</li>
<li>content2</li>
<li>content3</li>
</ul>
</div>
<div class="code_content2">
<img src="https://programmers.co.kr/packs/img-root-feature-1-67a799d828e0b4c52d7ceb4aef4eb8f4.png"
alt="">
</div>
</div>
<!-- end code-->
<!-- start enterprise-->
<div id="enterprise" class="row">
<div class="enterprise_header">
</div>
<div class="enterprise_visual">
<ul>
<li>content1</li>
<li>content1</li>
<li>content1</li>
<li>content1</li>
<li>content1</li>
<li>content1</li>
<li>content1</li>
<li>content1</li>
<li>content1</li>
<li>content1</li>
<li>content1</li>
<li>content1</li>
<li>content1</li>
<li>content1</li>
<li>content1</li>
<li>content1</li>
<li>content1</li>
<li>content1</li>
<li>content1</li>
<li>content1</li>
</ul>
</div>
</div>
<!-- end enterprise-->
<!-- start ionin footer -->
<div id="ionin_footer" class="w100">
ionin footer
</div>
<!-- end ionin footer-->
<!-- start footer -->
<div id="footer" class="row">
footer
</div>
<!-- end footer-->
</div>
</body>
</html>
/* CSS Style Sheet */
*{
margin:0;
padding:0;
}
a{
text-decoration:none;
color:#666;
}
ul,li{
list-style:none;
}
.w100{
width:100%;
background:#000;
}
.row{
width:1200px;
margin: 0 auto;
overflow:hidden;
}
.mt30{
margin-top:30px;
}
#header{
background:#0C151C;
position: relative;
}
#head_header{
height:50px;
}
#logo>img{
width: 182px;
height: 34px;
}
#head_visual{
height:450px;
background:#0C151C;
margin:0 auto;
}
#head_visual>ul{
width: 500px;
height: 300px;
float:left;
margin-top: 50px;
}
#head_visual>ul>li>h3{
font-size: 14px;
color:cornflowerblue
}
#head_visual>ul>li>h3>span{
display: block;
font-size: 40px;
color: #fff;
margin-top: 15px;
}
#head_visual>ul>li>p{
font-size: 20px;
color: #fff;
margin-top: 60px;
margin-bottom: 50px;
}
#head_visual>ul>li>a{
width: 210px;
height: 42px;
background-color: #0078ff;
color: #fff;
padding: 10px 60px;
border-radius: 5px;
}
#head_visual>img{
width:500px;
height: 300px;
padding: 100px;
}
#menu{
position: absolute;
left:50%;
top:0;
transform: translate(-50%,0);
}
.menu2{
position: absolute;
right: 0;
top:0;
}
.menu>li{
color: #fff;
display: inline-block;
padding:10px;
}
.position_header{
height:50px;
position: relative;
}
.position_header>ul>li{
font-size: 20px;
color: #263747;
float: left;
font-weight: bold;
}
.pos2{
position: absolute;
right: 0;
}
.position_header>ul>li>span>a{
width: 66px;
height: 32px;
font-size: 14px;
padding:3px 6px;
border:1px solid #0078ff;
margin-left: 10px;
color: #0078ff;
border-radius: 5px;
}
.position_content1{
width:585px;
height:450px;
float:left;
box-sizing: border-box;
padding:0 20px;
margin: 0 auto;
border:2px solid #ececec;
overflow:hidden;
margin-right: 15px;
border-radius: 10px;
}
.position_content1>img{
width: 1000px;
height: 280px;
margin-left:-220px;
}
.position_content1>dl>dt{
font-size: 20px;
font-weight: bold;
margin-top: 20px;
}
.position_content1>dl>dd{
font-size: 14px;
margin-top: 25px;
}
.position_content2{
width:585px;
height:450px;
box-sizing: border-box;
padding:0 20px;
float:left;
border:2px solid #ececec;
overflow:hidden;
margin-left: 15px;
border-radius: 10px;
}
.position_content2>img{
width: 1000px;
height: 280px;
margin-left:-220px;
}
.position_content2>dl>dt{
font-size: 20px;
font-weight: bold;
margin-top: 20px;
}
.position_content2>dl>dd{
font-size: 14px;
margin-top: 25px;
}
.program_header{
height:40px;
margin-top: 50px;
}
.program_header>ul>li{
font-size: 20px;
color: #263747;
float: left;
font-weight: bold;
}
.program_header>ul>li>span>a{
width: 66px;
height: 32px;
font-size: 14px;
padding:3px 6px;
border:1px solid #0078ff;
margin-left: 10px;
color: #0078ff;
border-radius: 5px;
}
.program_header2>ul>li{
display: inline-block;
}
.program_header2>ul>li>a{
background-color: #eeebff;
color:#0078ff;
height: 10px;
padding:10px 20px;
line-height:50px;
font-weight: bold;
font-size:14px;
border-radius: 5px;
}
.program_content1{
width:600px;
height:600px;
box-sizing: border-box;
float:left;
}
.company>img{
width:80px;
height: 60px;
float: left;
}
.program_content2{
width:600px;
height:600px;
box-sizing: border-box;
float:left;
}
.con_list > ul > li{
box-sizing: border-box;
width:600px;
height:auto;
padding:20px;
background:#fff;
text-align:center;
border:1px solid #ececec;
}
#position_footer{
height:150px;
color:#fff;
text-align:center;
box-sizing: border-box;
padding:60px 0;
}
.code_header{
height:200px;
background:#333;
}
.code_content1{
width:600px;
height:600px;
background:#666;
box-sizing: border-box;
padding:60px;
float:left;
}
.code_content1>ul>li{
padding:60px 0;
width:100%;
background:#fff;
text-align:center;
margin-top:30px;
}
.code_content2>img{
width:600px;
height:600px;
background:#666;
box-sizing: border-box;
padding:60px;
}
.enterprise_header{
height:200px;
background:#333;
}
.enterprise_visual{
width:100%;
height:600px;
background:#666;
box-sizing: border-box;
padding:50px;
}
.enterprise_visual > ul > li{
width:150px;
height:50px;
background:#fff;
text-align:center;
margin-top:30px;
margin-right:30px;
float: left;
}
#ionin_footer{
height:150px;
color:#fff;
text-align:center;
box-sizing: border-box;
padding:60px 0;
}
#footer{
height:400px;
color:#fff;
text-align:center;
box-sizing: border-box;
padding:60px 0;
}
'HTML+CSS' 카테고리의 다른 글
[HTML/CSS] 프로그래머스 사이트 만들어보기 (0) | 2021.03.19 |
---|---|
[HTML/CSS] 경일게임아카데미 사이트 거의 완성 (0) | 2021.03.18 |
[CSS] position (relative, absolute, fixed) 용어정리 (1) | 2021.03.18 |
[HTML/CSS] 사이트 레이아웃 조금씩 제작해보기 (0) | 2021.03.17 |
[HTML/CSS] 경일게임 아카데미 사이트 상단페이지 만들기 반복중 (0) | 2021.03.16 |