HTML+CSS

[HTML/CSS] 팀끼리 프로그래머스 사이트 만들어보기

져니져니95 2021. 3. 19. 17:40

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

'HTML+CSS'의 다른글

  • 현재글[HTML/CSS] 팀끼리 프로그래머스 사이트 만들어보기

관련글

티스토리툴바