[6일차]20210319 프로그래머스 웹사이트 레이아웃

아침 시간 -> 과제 점검, 레이아웃 짜는 예시 공부(도움이 많이 됨 -> 오늘 한거 실습 폴더에 있음 )

오후 시간 -> 2명 팀별로 "프로그래머스"웹사이트 만들기

과제 : 주말동안 "프로그래머스" 웹사이트 만들기 ~ / 자바 script : 제어문 예습해오기 / 연산자 사칙연산 등등 공부해오기 / 변수의 타입까즤,,,,,,,,,

레이아웃 짤 때 tip -> 레이아웃의 전체 마진을 다 주기. 그리고 padding으로 줄이기 / 마진을 top 제외하고 양옆 아래를 주면 나중에 안좋음 .

가장 간단한 소스 를 잘 짜는게 중요한 거 같음. 공통 분모를 class 로 묶기 등등 오늘한거 잘 참고 ㄱ ㄱ ㄱ

학생 중 가장 잘한 분의 레이아웃 그림을 보고 썜이 만든 HTML & CSS

<!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="./commons/css/programmers_쌤_.css">
</head>
<body>
    <div id="wrap">
        <!-- start header -->
        <div class="w100">
            <div id="head_header">

            </div>
            <div id="head_visual" class="row">

            </div>
        </div>
        <!-- end header-->
        <!-- start position-->
        <div id="position" class="row mt30">
            <div class="position_header"></div>
            <div class="position_content1">
                position_content1
            </div>
            <div class="position_content2">
                position_content2
            </div>
        </div>
        <!-- end position-->
        <!-- start program-->
        <div id="program" class="row mt30">
            <div class="program_header"></div>
            <div class="program_content1 con_list">
                <ul>
                    <li>content1</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 class="row">
            a
        </div>
        <!-- end code-->
        <!-- start enterprise-->
        <div class="row">
            a
        </div>
        <!-- end enterprise-->
        <!-- start footer -->
        <div class="w100">
            a
        </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;
    background:#666;
    overflow:hidden;
}

.mt30{
    margin-top:30px;
}

#head_header{
    height:50px;
    background:#333;
}

#head_visual{
    height:300px;
    background:#eee;
}

.position_header{
    height:100px;
    background:#333;
}

.position_content1{
    width:600px;
    height:600px;
    float:left;
    box-sizing: border-box;
    padding:80px;
    background:#eee;
}

.position_content2{
    width:600px;
    height:600px;
    box-sizing: border-box;
    padding:80px;
    float:left;
    background:#eee;
}

.program_header{
    height:100px;
    background:#333;
}

.program_content1{
    width:600px;
    height:600px;
    background:#666;
    box-sizing: border-box;
    padding:60px;
    float:left;
}

.program_content2{
    width:600px;
    height:600px;
    background:#666;
    box-sizing: border-box;
    padding:60px;
    float:left;
}

.con_list > ul > li{
    padding:30px 0;
    width:100%;
    background:#fff;
    text-align:center;
    margin-top:30px;
}

#position_footer{
    height:150px;
    color:#fff;
    text-align:center;
    box-sizing: border-box;
    padding:60px 0;
}

간결....

=========================================================================

선생님이 하신거 이어서 해보기

<!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="./commons/css/programmers_쌤_.css">
</head>
<body>
    <div id="wrap">
        <!-- start header -->
        <div class="w100">
            <div id="head_header">

            </div>
            <div id="head_visual" class="row">  <!--class row는 왜들어갓찌-->

            </div>
        </div>
        <!-- end header-->
        <!-- start position-->
        <div id="position" class="row mt30">
            <div class="position_header"></div>
            <div class="position_content1">
                position_content1
            </div>
            <div class="position_content2">
                position_content2
            </div>
        </div>
        <!-- end position-->
        <!-- start program-->
        <div id="program" class="row mt30">
            <div class="program_header"></div>
            <div class="program_content1 con_list">
                <ul>
                    <li>content1</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 mt30">
            <div class = "code_content1 codebox">
                <ul>
                    <li>content1</li>
                    <li>content2</li>
                    <li>content3</li>
                </ul>
            </div>
            <div class = "code_content2 codebox">
                conde_content2
            </div>
        </div>
        <!-- end code-->
        <!-- start enterprise-->
        <div id = "enterprise" class="row mt30">
            <div class = "enterprise_visual">
                enter_visual
            </div>
        </div>
        <!-- end enterprise-->
        <!-- start footer -->
        <div id = "footers" class="w100 mt30">
            <div class = "footer1 row">
                footer1
            </div>
            <div class = "footer2 row">
                footer2
            </div>
        </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;
    background:#666;
    overflow:hidden;
}

.mt30{
    margin-top:30px;
}

#head_header{
    height:50px;
    background:#333;
}

#head_visual{
    height:300px;
    background:#eee;
}

.position_header{
    height:100px;
    background:#333;
}

.position_content1{
    width:600px;
    height:600px;
    float:left;
    box-sizing: border-box;
    padding:80px;
    background:#eee;
}

.position_content2{
    width:600px;
    height:600px;
    box-sizing: border-box;
    padding:80px;
    float:left;
    background:#eee;
}

.program_header{
    height:100px;
    background:#333;
}

.program_content1{
    width:600px;
    height:600px;
    background:#666;
    box-sizing: border-box;
    padding:60px;
    float:left;
}

.program_content2{
    width:600px;
    height:600px;
    background:#666;
    box-sizing: border-box;
    padding:60px;
    float:left;
}

.con_list > ul > li{
    padding:30px 0;
    width:100%;
    background:#fff;
    text-align:center;
    margin-top:30px;
}

#position_footer{
    height:150px;
    color:#fff;
    text-align:center;
    box-sizing: border-box;
    padding:60px 0;
}

/* 여기서부터 내가 함 */

.codebox{
    width: 600px;
    height: 600px;
    background:darkorchid;
    padding:20px;
    box-sizing: border-box;
    float:left;
}

.code_content1>ul>li{
    padding:40px 0;
    width:100%;
    background:brown;
    text-align: center;
    margin-top:70px;
    
}

.code_content2{
    width: 600px;
    height: 600px;
    background:crimson;
}



.enterprise_visual{
    height:400px;
    padding:100px;
    box-sizing: border-box;
    text-align: center;
    background:burlywood;
}


#footers{
    text-align: center;
    padding:30px;
    box-sizing: border-box;
}

.footer1{
    height:100px;
    background:chartreuse;
    padding:20px;
    box-sizing:border-box;
}

.footer2{
    height: 300px;
    background:chocolate;
    padding:20px;
    box-sizing:border-box;
}

===========================================================================

CSS ->

Row 에 적용된 overflow:hidden를 뺴면

이렇게 나옴. 왜지??????

overflow:hidden > 버그 ?

뭔가 삐져나오면 잡음?

상위 엘리먼트 가 하위 앨리먼트 height 지정 시, 같이 넓어져야하는데 그렇지 못해서 (요즘 이렇게 바꼇다고(?)) overflow:hidden을 사용.. 사실 이해잘 안가지만 하면서 적용해바야할듯함.

gnb > a 와 다름

gnb a {

widht:450px;

left:50%;

gnb 안에 있는 모든 a (바로 하위 아니어도 )

gnb{

width:

transform: traslateX(-50%) 옆으로 가는거

**ul>li4>a1**

Ctrl + , -> auto save 눌러서 onafterdelay

======================================팀으로 "프로그래머스 웹사이트 만들어봄 =====

점심먹고 5:30pm까지 한 작업물

<!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="./commons/programmers_쌤_.css">
</head>
<body>
    <div id="wrap">
        <!-- start header -->
        <div id = "header" class="w100">

            <div id="head_header">
                <h1 id ="logo">
                    <a href="#"><img src = "./images/programmers_logo.png" width="180"></a>
                </h1>
                <div id ="gnb">
                    <ul class="l_gnb">
                        <li><a href="">Menu1</a></li>
                        <li><a href="">Menu2</a></li>
                        <li><a href="">Menu3</a></li>
                        <li><a href="">Menu4</a></li>
                    </ul>
                    <ul class="r_gnb">
                        <li><a href="">Menu1</a></li>
                        <li><a href="">Menu2</a></li>
                    </ul>
                </div>
                <div id = "gnb2">
                    <ul>
                        <li><a href="">menu1</a></li>
                        <li><a href="">menu2</a></li>
                        <li><a href="">menu3</a></li>
                    </ul>
                </div>
            </div>
            <div id="head_visual" class="row"> 
                <div class = "head_visual_l topbox">
                    <h6>기술 중심 개발자 채용 플랫폼</h2>
                    <h1>개발자 채용의 끝은, <br>결국 코드니까</h1>
                    <h4>이력서보다, 당신의 코드가 우선시되는 <br>
                        프로그래머스만의 채용 프로그램을 만나보세요
                    </h4>
                    <a href=""><span>시작하기</span></a>
                </div>
                <div class = "head_visual_r topbox">
                    <img src="images/programmers_pic.png" height="350">
                </div>
            </div>
        </div>
        <!-- end header-->
        <!-- start position-->
        <div id="position" class="row mt30">
            <div class="position_header">
                <h4>채용 프로그램</h4>
                <a href = "" >
                    <span>더보기</span>
                </a>
                <button class="btn_next">></button><button class="btn_prvs" disabled="disabled"><</button>
            </div>

            <div class="position_content">
                <div class="position_content1 p_box">
                    <div id = "posi_cent_top">
                        <img src = "./images/prg1.png" height='230'  >
                    </div>
                    <div id = "posi_cent_bottom" >
                        <h4> <a href="">2021 Dev-Matching:웹 백엔드 개발자(상반기)</a> </h4>
                        <h6> 접수 : 21년 03월 08일
                            <br> 테스트 : 21년 04월 03일 </h6>
                        <span><img src="./images/icons.png"> </span>
                    </div>

                </div>
                <div class="position_content2 p_box">
                    <div id = "posi_cent_top2">
                        <img src = "./images/prg2.png" height='230'  >
                    </div>
                    <div id = "posi_cent_bottom2">
                        <h4><a href = "">2021 Dev-Matching:웹 프론트엔드 개발자(상반기)</a> </h4>
                        <h6> 접수 : 21년 02월 15일 11:00 - 03월 05일 17:00
                            <br> 테스트 : 21년 03월 06일 13:00 - 03월 06일 16:00</h6>
                    </div>
                </div>
            </div>
        </div>
        <!-- end position-->
        <!-- start program-->
        <div id="program" class="row mt30">
            <div class="program_header"></div>
            <div class="program_content1 con_list">
                <ul>
                    <li>content1</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 mt30">
            <div class = "code_content1 codebox">
                <ul>
                    <li>content1</li>
                    <li>content2</li>
                    <li>content3</li>
                </ul>
            </div>
            <div class = "code_content2 codebox">
                conde_content2
            </div>
        </div>
        <!-- end code-->
        <!-- start enterprise-->
        <div id = "enterprise" class="row mt30">
            <div class = "enterprise_visual">
                enter_visual
            </div>
        </div>
        <!-- end enterprise-->
        <!-- start footer -->
        <div id = "footers" class="w100 mt30">
            <div class = "footer1 row">
                footer1
            </div>
            <div class = "footer2 row">
                footer2
            </div>
        </div>
        <!-- end footer-->
    </div>
</body>
</html>

/* CSS Style Sheet */
*{
    margin:0;
    padding:0;
}

a{
    text-decoration:none;
    color:#666;
}

ul,li{
    list-style:none;
}

h1{
    font-size:40px;
}

h4{
    font-size:20px;
}

h6{
    font-size:14px;
}

.w100{
    width:100%;
    background:#000;
}

.row{
    width:1200px;
    margin: 0 auto;
    background:#666;
    overflow:hidden;
}

.mt30{
    margin-top:30px;
}

/*********************************************************/

#head_header{
    height:46px;
    background:#333;
    padding:6px 16px;
}

#logo{
    display:inline-block;

}

#gnb{
    position:absolute;
    width:800px;
    left:50%;
    transform: translateX(-25%);
    display:inline-block;
}

#gnb2{
    display: inline-block;
    float:right;
}

#gnb2>ul>li{
    float:left;
}

.l_gnb>li{
    float:left;
}

.r_gnb>li{
    float:left;
}


#head_visual{
    height:450px;
    background:darkslategray;
    padding:56px 0 40px 0; 
    box-sizing: border-box;
}

.head_visual_l{
    display:inline-block;
    float:left
}

.head_visual_l>h6{
    color:#0078FF;
    margin-bottom:16px;
}

.head_visual_l>h1{
    margin-bottom:32px;
    color:#E9ECF3;
}

.head_visual_l>h4{
    margin-bottom:40px;
    color:#E9ECF3;
    line-height:33px;
    letter-spacing: 0.009em;
}

.head_visual_l>a>span{
width:210px;
height:43px;
padding: 7px 13px;
box-sizing: border-box;
display:inline-block;
background-color:#0078FF;
text-align: center;
color:white;
font-size:16px;
font-weight:bold;
line-height: 25px;
border-radius: 5px;
}

.head_visual_r{
    display: inline-block;
    float:left
}

.topbox{
    background:chocolate;
    width:568px;
    height:350px;
    padding:0 16px;
}


#position{
    width:1200px;
    height: 463px;
}

.p_box{

    color:white;
}

.position_header{
    height:33px;
    background:#ececec;
    margin-bottom:16px;
    color:#263747;
    font-weight:bold;

}

.position_header>h4{
    display:inline-block;
    height:33px;
    width:140px;
    padding:3px;
    box-sizing: border-box;
    line-height:1.2;
    margin:left;
    
}

.position_header>a{
    display: inline-block;

}   

.position_header>a>span{
    width:39px;
    height:33px;
    color:#0078FF;
    background:white;
    border:1px solid #0078ff;
    border-radius: 5px;
    font-weight:normal;
    margin-left:24px;
    padding:5px;
    font-size:14px;
    box-sizing: border-box;


    
}

.position_header>button{
    width:56px;
    height:30px;
    float:right;
    background-color:transparent;
    border: 0.0625rem solid #CDD7E0;
    margin-top:2px;
    border-radius: 5px;
    font-weight:bold;
    font-size:20px;
    color:#CDD7E0;
}

.position_header>.btn_next{
    margin-left:10px;
    margin-right:40px;
    border: 0.0625rem solid #5F7F90;
    color:#5F7F90;
}


.position_content{
    margin:0 auto;
    width:100%;
    height:406px;
    background:white;
    padding:8px 0 0 8px;
}

/* 쌤 질문이 **************************요 
.p_box{
    position content 크기 두개 똑같이 바꾸려고 했는데 css 가 안먹혔어여..
*/

.p_box{
    border:1px solid #ececec;
    display: inline-block;
    float:left;
    width:564px;
    height: 406px;
    box-sizing:border-box;
    border-radius: 5px;
}

#posi_cent_top>img{
    position:relative;
    left:-40%;
}

.position_content1{
    margin-right:24px;
    overflow: hidden;
}



#posi_cent_bottom{
    color: #98A8B9;
    padding:16px;
}

#posi_cent_bottom>h4{
    width:530px;
    height:32px;
    margin-bottom:16px;
    color:#263747;
    display:block;
}

#posi_cent_bottom>h4>a{
    color:#263747;

}

#posi_cent_bottom>h4>a:hover{
    color:#0078FF;
    text-decoration: underline;

}

#posi_cent_bottom>h4>{
    color:#263747;

}

#posi_cent_bottom>h6{
    width:530px;
    height:52px;
    display:block;
    font-size:14px;
    line-height:1.6;
}


.position_content2{
    background:white;
    overflow: hidden;

}

#posi_cent_top2>img{
    position:relative;
    left:-40%;
}


#posi_cent_bottom2{
    color: #98A8B9;
    padding:16px;
    background: white;
}

#posi_cent_bottom2>h4{
    width:530px;
    height:32px;
    margin-bottom:16px;
    display:block;
}

#posi_cent_bottom2>h6{
    width:530px;
    height:52px;
    display:block;
    font-size:14px;
    line-height:1.6;
}

.posi_cent_bottom2>h4>a:hover{
    color:red;
    text-decoration: underline;
}

.posi_cent_bottom2>h4>a:visited{
    color:grey;
}

/*#####################################################*/


.program_header{
    height:100px;
    background:#333;
}

.program_content1{
    width:600px;
    height:600px;
    background:#666;
    box-sizing: border-box;
    padding:60px;
    float:left;

}

.program_content2{
    width:600px;
    height:600px;
    background:#666;
    box-sizing: border-box;
    padding:60px;
    float:left;
}

.con_list > ul > li{
    padding:30px 0;
    width:100%;
    background:#fff;
    text-align:center;
    margin-top:30px;
}

.program_content1>img{
    width:562px;

}







#position_footer{
    height:150px;
    color:#fff;
    text-align:center;
    box-sizing: border-box;
    padding:60px 0;
}

/* 여기서부터 내가 함 */








.codebox{
    width: 600px;
    height: 600px;
    background:darkorchid;
    padding:20px;
    box-sizing: border-box;
    float:left;
}

.code_content1>ul>li{
    padding:40px 0;
    width:100%;
    background:brown;
    text-align: center;
    margin-top:70px;
    
}

.code_content2{
    width: 600px;
    height: 600px;
    background:crimson;
}





.enterprise_visual{
    height:400px;
    padding:100px;
    box-sizing: border-box;
    text-align: center;
    background:burlywood;
}


#footers{
    text-align: center;
    padding:30px;
    box-sizing: border-box;
}

.footer1{
    height:100px;
    background:chartreuse;
    padding:20px;
    box-sizing:border-box;
}

.footer2{
    height: 300px;
    background:chocolate;
    padding:20px;
    box-sizing:border-box;
}

느낀점 : 웹퍼블리셔분들 존경 스럽당..

질문

~~1. html 에 mt 30 쓰는 이유?~~

~~<div id = "progrma" class = "row mt30"> 뜻~~

-> mt30 은 class 이름으로 그냥 주신거 -> css 에도 써야함

'블록체인 기반 핀테크 및 응용 SW개발자 양성과정 일기' 카테고리의 다른 글

[7일차]20210322 JavaScript 기초 / 조건문/반복문/제어문/등등.. (0)	2021.03.22
20210320 Javascript 기초 예습 (0)	2021.03.21
[5일차]20210318 Position:absolute; Postition:relative; Position:fixed (0)	2021.03.18
[4일차] 20210317 웹사이트 화면만 html 로 60% 만들기 (4)	2021.03.17
20210316 3일차 웹사이트 container/box/ul/li /class etc. (0)	2021.03.16

GOOD DAY

[6일차]20210319 프로그래머스 웹사이트 레이아웃

**ul>li4>a1**

Ctrl + , -> auto save 눌러서 onafterdelay

'블록체인 기반 핀테크 및 응용 SW개발자 양성과정 일기' 카테고리의 다른 글

티스토리툴바

[6일차]20210319 프로그래머스 웹사이트 레이아웃

ul>li*4>a*1

Ctrl + , -> auto save 눌러서 onafterdelay

'블록체인 기반 핀테크 및 응용 SW개발자 양성과정 일기' 카테고리의 다른 글

'블록체인 기반 핀테크 및 응용 SW개발자 양성과정 일기' Related Articles

티스토리툴바

**ul>li4>a1**