[5일차]20210318 Position:absolute; Postition:relative; Position:fixed

오늘 수업

아침 : position 개념 이해 + 질문 + 자습

오후 : 레이아웃 개념 + 1:1개인 상담 + 자습

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

padding:0;

margin:0;

}

#box1{

width:200px;

height:200px;

background:red;

margin-left:50px;

}

#box2{

width:200px;

height:200px;

background:blue;

}

</style>

</head>

<body>

</div>

</div>

</body>

</html>

->>>>>>>>>>>>>>>>>>>>>>>>

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

padding:0;

margin:0;

}

#box1{

width:200px;

height:200px;

background:red;

position:absolute;

}

#box2{

width:200px;

height:200px;

background:blue;

}

</style>

</head>

<body>

</div>

</div>

</body>

</html>

-> 파랑색이 사라짐

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

padding:0;

margin:0;

}

#box1{

width:200px;

height:200px;

background:red;

position:absolute;

left:50px;

}

#box2{

width:200px;

height:200px;

background:blue;

}

</style>

</head>

<body>

</div>

</div>

</body>

</html>

->>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

padding:0;

margin:0;

}

#box1{

width:200px;

height:200px;

background:red;

}

#box2{

width:100px;

height:100px;

background:blue;

}

</style>

</head>

<body>

</div>

</body>

</html>

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

padding:0;

margin:0;

}

#box1{

width:200px;

height:200px;

background:red;

margin:left:50px;

}

#box2{

width:100px;

height:100px;

background:blue;

}

</style>

</head>

<body>

</div>

</body>

</html>

==================fixed vs relative 차이

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

padding:0;

margin:0;

}

#box1{

width:200px;

height:700px;

background:red;

margin-left:50px;

}

#box2{

width:100px;

height:1000px;

background:blue;

left:10px;

position:fixed;

}

#box3{

width:80px;

height:800px;

background:yellow;

}

</style>

</head>

<body>

</div>

</div>

</div>

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

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

padding:0;

margin:0;

}

#box1{

width:200px;

height:700px;

background:red;

margin-left:50px;

}

#box2{

width:100px;

height:1000px;

background:blue;

left:10px;

position:relative;

}

#box3{

width:800px;

height:800px;

right:0px;

background:yellow;

top:0px;

position:fixed;

}

</style>

</head>

<body>

</div>

</div>

</div>

<!--dddd

세개 가장 많이 씀

position:absolute;

position:relative; -> abolute는 브라우저 전체 기준점으로 ㅗ앗다갓다 / relative.분모 엘리먼트의 위치에 따라 움직임. ex) 경일 홈페이지 contents.바뀌는거 클릭 버튼같은 곳에

position:fixed; 항상 따라 붙는 거

absolute쓸때 좋은 점 ; 높낮이 처리할 때.

ddddd-->

</body>

</html>

1. relative : 원래 내 위치 기준으로

- 다른 요소의 위치에 영향을 미치지 않음

하위요소가 상위 요소를 기준으로 움직임.

2. absolute : 다른 요소를 기준으로 ( 내 조상중에서만 선택 가능 )

포지션이 지정되어있는 가장 가까운 조상이 기준

-> 절대적인. 3차원으로 붕~ 뜬다고 생각하기

3. fixed : 뷰포트 기준으로

- 원래 자리를 남기지 않음

[출처] [HTML/CSS] position 속성 : relative, absolute, fixed|작성자 덮밥이

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

padding:0;

margin:0;

}

#box2{

width:400px;

height:200px;

background:green;

margin-left:50px;

}

#box1{

width:200px;

height:200px;

background:black;

position:relative;

top:10px;

left:10px;

}

</style>

</head>

<body>

</div>

===============================ㄷ ㅏ 시ㅣㅣㅣㅣㅣㅣㅣㅣㅣㅣㅣ---==================

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

margin:0;

padding:0;

}

#box1{

width:500px;

height:500px;

background:greenyellow;

border: 2px solid darkolivegreen;

box-sizing:border-box;

margin:50px;

}

#box2{

width:200px;

height:200px;

background:hotpink;

border:2px solid black;

box-sizing:border-box;

position:relative;

left:30px;

top:30px;

}

</style>

</head>

<body>

</div>

</body>

</html>

<!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>

    <style>

        *{

            margin:0;

            padding:0;

        }




        #box1{

            width:500px;

            height:500px;

            background:greenyellow;

            border: 2px solid darkolivegreen;

            box-sizing:border-box;



            margin:50px;

            






        }



        #box2{

            width:200px;

            height:200px;

            background:hotpink;

            border:2px solid black;

            box-sizing:border-box;



            position:relative;

            left:30px;

            top:30px;

            



        }




    </style>




</head>

<body>



    <div id =  "box1">

        <div id = "box2">

            z

        </div>



    </div>



    

</body>

</html>

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

position은 ㅇㅣ해하기 어려워서 더 연습 필요함

*다른 팀 (허인영님 구글 드라이브 에있씀)

btn 쓸 떄

a_btn 이렇게 이름 만들면 편함 이름 만들때 고민

<dl>

<dt>

</dt>

<dd>

</dd>

</dl>

장점 - 쓸데없는 emliment 안쓸수잇음

notice 하나만 줘도 관리하기 굳

html 가독성은 떨어지지ㅏㅁㄴ Css 의 가독성은 좋음.

<ul>

</ul>

ul 뒤 뭐가 없으면 굳이 ul,li 안써도됨 div 써도 괜춘

<ul>

<li>

<ul>

</ul>

</li>

</ul>

margin: 30px auto 20px auto 요론것도 가능

html 을 먼저 작성 하고 css를 보고 수정하면서 하면 좋음

----------------------------------------------------------------------------------------------------------------------------

밑에 박스 relative & absolute 사용해서 바메뉴 만듬

<!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/같이한거.css">

</head>
<body>
    <div id = "wrap">
        <div id = "header">
            <h1 id ="logo">
                <a href = "#"><img src = "./commons/images/logo.png"/></a>
            </h1>
            <div id ="gnb">
                <ul>
                    <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>
        <div id = "visual">
            <img src ="./commons/images/visual1.png">
                <div id = "visual_bottom_box">
                    <ul id = "visual_bottom_centerbox">
                        <li><a href = "#">AR/VR특화과정</a></li>
                        <li><a href = "#">너도 될 수있어!</a></li>
                        <li><a href = "#">KDT혁신교육기관</a></li>
                        <li><a href = "#">취업률 1위</a></li>
                        <li><a href = "#">3년우수훈련기관</a></li>                    
                    </ul>
                </div>
        </div>    
        <div id = "container">
            <ul class = "big_box">
                <li class = "box box1">
                    <h2>
                        <span>Game Architecture</span>
                        게임 기획
                    </h2>
                    <p>
                        게임기획자를 위한 정석 Class
                    </p>
                    <a href = "#">바로가기</a>
                </li>
                <li class = "box box2">
                    <h2>
                        <span>Game Programming</span>
                        게임 프로그래밍
                    </h2>
                    <p>
                        게임프로그래밍을 위한 정석 Class
                    </p>
                    <a href = "#">바로가기</a>
                </li>
                <li class = "box box3">
                    <h2>
                        <span>Game Artworks</span>
                        게임 원화
                    </h2>
                    <p>
                        게임 원화를 위한 정석 Class
                    </p>
                    <a href = "#">바로가기</a>
                </li>
                <li class = "box box4">
                    <h2>
                        <span>Progamer Coaching</span>
                        프로게이머 코칭
                    </h2>
                    <p>
                        프로게이머 데뷔 Class
                    </p>
                    <a href = "#">바로가기</a>
                </li>
                <!--############################################-->
                <li class = "box box5">
                    <h2>
                        <span>AR/VR</span>
                        AR/VR
                    </h2>
                    <p>
                        증강현실/가상현실 Class
                    </p>
                    <a href = "#">바로가기</a>
                </li>
                <li class = "box box6">
                    <h2>
                        <span>Block Chain</span>
                        블록체인
                    </h2>
                    <p>
                        블록체인 Class <br><br>
                    </p>
                    <a href = "#">바로가기</a>
                </li>
                <li class = "box box7 ">
                    <h3>
                        공지사항
                    </h3>
                    <h5>
                        <a href = "#">- 3월 블록체인반 모집 임박</a>
                        <dd>03-03</dd>
                    </h5>
                    <h5>
                        <a href = "#">- 4월 VR/AR반 모집 안내</a>
                        <dd>03-03</dd>
                    </h5>
                    <h5>
                        <a href = "#">- 4월 게임 프로그래밍반 모집</a>
                        <dd>03-03</dd>
                    </h5>
                    <h5>
                        <a href = "#">- 2월 기획반 모집 마감안내!</a>
                        <dd>03-02</dd>
                    </h5>
                </li>
                <li class = "box box8 ">
                    <h3>
                        상담/문의
                    </h3>      <!---여기부터 ~~~~~~~~다시-->
                    <p>
                    <img src="./commons/images/customer_tel.png"></p>
                    
                    <img src="./commons/images/customer_kakao.png">
                    <button type = "button" class ="btn" >
                        <img src="./commons/images/customer_kakao_btn.png">
                    </button>
                </li>
            </ul>
            <!--############################################-->
            <div id="big_box2">
                <div id="box9">
                    <h3>
                        취업자인터뷰
                        <span><a href=""><img src="./commons/images/btn_more.gif"></a></span>
                    </h3>
                    <span>
                        <img src="./commons/images/contentt.png">
                    </span>
                    <p><a href="#">퀘*트게임즈 김대혁, 문희진" 정말 발전하고자 하는 
                        열정적인 마음을 가지고 스스로 노력하고자 하는 사람이 
                        왔으면 좋겠습니다. " 드루와 던전 퀘*트게임즈에 ...</a>
                    </p>
                    <p>
                        퀘*트게임즈<br>
                        김대혁, 문희진 훈련생
                    </p>    
                </div>
                <div id="box10">
                    <h3>
                        수강후기
                        <span><a href=""><img src="./commons/images/btn_more.gif"></a></span>
                    </h3>
                    <ul class="review">
                        <li>
                            <p>슬기로운 경일생활</p>
                            <span>aaa</span>
                        </li>
                        <li>
                           a 
                        </li>
                        <li>
                          a
                        </li>
                        <li>
                           a 
                        </li>
                        <li>
                            a
                        </li>
                        <li>
                            a
                        </li>
                    </ul>
                </div>
                <div id="box11">
                    <h3>
                        포트폴리오
                        <span><a href=""><img src="images/btn_more.gif"></a></span>
                    </h3>
                    <iframe width="560" height="420" src="https://www.youtube.com/embed/TzLsPrkRKt4" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                </div>
            </div>
        </div>
        <div id="big_box3">
            <div class="boox box12">
                <h2>
                    <span>Game Architecture</span>
                    게임 기획
                </h2>
                <a href="#"><img src="./commons/images/1569645756_71182_1.jpg"style="width:348px;height:198px;"></a>
                <p>
                    <span>제2회 경일게임아카데미 ★시네마 데이★</span>
                    <a href="#">- 게임 AR/VR 정규 과정</a><br><br>
                    <a href="#">- KDT 혁신교육기관</a><br><br>
                    <a href="#">- 게임개발자가 되는 가장 확실한 솔루션!</a>
                </p>
            </div>
            <div class="boox box13">
                <h2>
                    <span>Useful Information</span>
                    유용정보
                </h2>
                <a href="#"><img src="./commons/images/222.jpg"style="width:348px;height:198px;"></a>
                <p>
                    <span>NC소프트 신화섭 기획자 인터뷰</span>
                    <a href="#">- 서드도어 이성재 기획자 인터뷰</a><br><br>
                    <a href="#">- 1부) 블록체인? 그거 비트코인 아니야?</a><br><br>
                    <a href="#">- 경일인들의 놀이터 각종 꿀팁이 가능한 카페가 있다!</a>
                </p>
            </div>
            <div class="boox box14">
                <h2>
                    <span>Column</span>
                    교수칼럼
                </h2>
                <a href="#"><img src="./commons/images/333.png"style="width:348px;height:198px;"></a>
                <p>
                    <span>게임프로그래머 취업트렌드를 알려주마</span>
                    <a href="#">- 왜 블록체인인가? (박재덕 대표)</a><br><br>
                    <a href="#">- 멘토링별 학생 유형과 개발자의 자세 (권순우 멘토)</a><br><br>
                    <a href="#">- "학생이 미래다" 게임원화 이진호교수님 인터뷰</a>
                </p>
            </div>
        </div>       
        <div class="footer">
            <div id="footer2">
                <div id="gnb2">
                    <ul>
                        <li><a href=""  class="mt0">학교소개</a></li>
                        <li><a href="">교육과정</a></li>
                        <li><a href="">공지사항</a></li>
                        <li><a href="">상담신청</a></li>
                        <li class="last"><a href="" >개인정보처리방침</a></li>
                    </ul>
                </div>
                <div id = "logo2">
                    <p><img src="./images/logo_bottom_2018.png"></p>
                </div>
            </div>

        </div> 
    </div>
</body>
</html>

CSS

*{
    margin:0;
    padding:0;
}

a{
    text-decoration:none;

}

ul,li{
    list-style:none;
}

#wrap{
    width:100%
}

#header{
    width:1200px;
    height:100px;
    margin:0 auto;
}

#logo{
    margin:20px 0 0 0;
    float:left;
}

#gnb{
    float:right;
}

#gnb>ul>li{
    float:left;
    display:inline-block;
}

#gnb>ul>li>a{
    display:inline-block;
    width:180px;
    margin:40px 0;
    font-weight:bold;
    font-size:19px;
    color:#004385}

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

#visual{
    position:relative;
}

#visual>img{
    display:block;
}

#visual_bottom_box{
    width:1920px;
    height:50px;
    background:rgba(0, 1, 1, 0.5);

    position:absolute;
    bottom:0;
}

#visual_bottom_centerbox{
    margin:0 auto;
    width:1200px;
    height:50px;
    text-align: center;
}



#visual_bottom_centerbox>li{
    display:inline-block;
}

#visual_bottom_centerbox>li>a{
    display:inline-block;
    height:50px;
    color:white;
    padding:15px 40px;
    box-sizing:border-box;
    font-size:18px;
}


#container{
    width:1200px;
    margin:30px auto 0 auto;
    height:920px;
}

.big_box{
    width:50%;
    float:left;
}

.box{
    width:50%;
    height:230px;
    border:1px solid #ececec;
    box-sizing:border-box;
    float:left;
    padding:20px;
}

.box>h2{
    font-size:23px;
    color:#2d2d2d;
}

.box>h3{
    color:#2d2d2d;
}

.box>h2>span{
    font-size:12px;
    display:block;
    color:#4689e1;
}

.box>p{
    width:50%;
    margin:40px 0 0 0;
    font-size:13px;
}

.box>a{
    display:block;
    margin:30px 0 0 0;
    width:100px;
    height:30px;
    background:#6da6ea;
    color:white ;
    border-radius: 15px;
    line-height: 30px;
    text-align: center;
}

.box1{
    background:url('../../images/main_con_ic_01.png') no-repeat;
    background-position:180px 100px;
}

.box2{
    background:url('../../images/main_con_ic_02.png') no-repeat;
    background-position:180px 100px;
}

.box3{
    background:url('../../images/main_con_ic_04.png') no-repeat;
    background-position:180px 100px;
}

.box4{
    background:url('../../images/main_con_ic_05.png') no-repeat;
    background-position:180px 100px;
}

.box5{
    background:url('../../images/main_con_ic_06.jpg') no-repeat;
    background-position:180px 100px;
}

.box6{
    background:url('../../images/main_con_ic_07.jpg') no-repeat;
    background-position:180px 100px;
}


.box>h5{
    color:grey;
    height:10px;
    margin-top:30px;
    float:left;
    font-size:12px;
    width:90%;
    
}

.box>h5>dd{
    float:right;
    font-size:12px;
}

a:link{
    text-decoration:none;
}

.btn{
    border:white;
    margin-left: 65px;

}

.box8>h3{
    margin-bottom:0px;
    height:10px;

}

a:visited{
    text-decoration:none;
    color: grey;
}

.box7>h5>a{
    color:grey;

}

.box8>p{
    margin-bottom:30px;
}

#big_box2{
    width: 50%;
    display:inline-block;
}

#box9,#box10,#box11{
    border:1px solid #ececec;
    box-sizing:border-box;
    padding:20px;

    
}
#box9{
    width:50%;
    float:left;
    height:415px;
}


#box10{
    width:50%;
    float:left; 
    height:415px;
    background-color: #fafafa;
}

#box11{
    width:100%;
    height:505px;
    float:left;
}

#box9>span{
    border:1px solid #ececec;
    display:block;
    margin-top: 20px;
}

#box9>p{
    text-align:center;
    margin-top: 20px;

    font-size:12px;
    color:gray;
}
#box9>p>a{
    color:gray;
}

#box9>h3>span{
    float:right;
}

.review{
    margin-top: 20px;
}

.review>li{
    width:260px;
    height:45px;
    background-color: #fff;
    margin: 5px auto 5px auto;
    border: 1px solid #ececec;
}
#box10>h3>span{
    float:right;
}

.review>li>p{
    float: left;
    display: block;
}

.review>li>span{
    float: right;
    display: block;
}

#box11>h3>span{
    float:right;
}

#box11>iframe{
    margin-top: 20px;
}

#big_box3{
    width:1200px;
    height: 510px;
    margin: 0 auto;
}

.boox{
    width:390px;
    height:430px;
    border: 1px solid #ececec;
    float:left;
    margin:30px 0 0 0;
    padding:20px;
    box-sizing: border-box;
}

.box12{
    background-color: #fafafa;
    background:url('../images/main_bbs_ic_01.png') no-repeat;
    background-position: 300px 12px;
}

.box13{
    margin:30px 15px 0 15px;
    background:url('../images/main_bbs_ic_02.png') no-repeat;
    background-position: 300px 12px;
}

.box14{
    background-color: #fafafa;
    background:url('../images/main_bbs_ic_03.png') no-repeat;
    background-position: 300px 12px;
}

.boox>h2>span{
    font-size:12px;
    display:block;
    color:#4689e1;
}

.boox>h2{
    margin-bottom:20px;
}

.boox>p{
    color:#666;
    font-size:12px;

}

.boox>p>span{
    display:block;
    text-align:center;
    margin: 10px auto 20px auto;

}

.footer{
    width: 100%;
    height: 200px;
    padding:20px 0;
    margin-top:30px;
    background-color: #323232;

}

#footer2{
    margin: 0 auto;
    width:1200px;
    height:130px;

}

#gnb2{
    float:left;
    display:block;
}

#gnb2>ul>li{
    float:left;
    display:inline-block;
    
}

#gnb2>ul>li>a{
    display:inline-block;
    font-size:12px;
    padding:0 10px;
    margin-left:18px;
    font-weight:bold;
}

#gnb2 > ul > li > a:hover{ /* a 태그에 마우스가 올라갈떄 어떻게 css가 바꿀거냐?*/
    color:#fff;
}

#gnb2 > ul > li:after {
    content:" | ";
    color:#555;
    font-size:11px;
}

.mt-l5{
    margin-left:5px !important;
}

#gnb2 > ul > li:last-child:after{
    content:"";
}

#logo2{
    float:left;
}

.boox>p>a{
    color:#666;
}

여기저기 도움 받으면서 겨우 했ㄷ ㅏ. 혼자 하면 엄청 오래 걸릴 거 같다.

========================오후시간 : 레이아웃 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>Programmers</title>


</head>
<body>
    <div id = "wrap">
        <div id = "header">
            <h1 ic= "logo"></h1>
            <ul class = "top_middle_menu">
                <li>탑프로그래머스</li>
                <li>실력 체크</li>
                <li>개발자 채용</li>
                <li>테크 피드</li>
                <li>코딩테스트 연습</li>
                <li>프로그래밍 강의</li>
            </ul>
            <ul class = "top_right_menu">
                <li>계정 만들기</li>
                <li>로그인</li>
                <li>기업 회원</li>
            </ul>
            <div id = "header_left_box">
                <p>
                    <span>기술 중심 개발자 채용 플랫폼</span>
                    개발자 채용의 끝은, <br> 결국 코드니까
                </p>
                <p>
                    이력서보다, 당신의 코드가 우선시되는 <br> 프로그래머스만의 채용 프로그램을 만나보세요
                </p>
                <p>
                    <a href = "#">시작하기</a>
                </p>
            </div>
        </div>
        <div id = "1st_container">
            <div class = "1st_container_top_box">
                <p>
                    채용 프로그램 <img src = "commons/images/quick_btn.gif">
                </p>
                <p>
                    <a href = "#">더보기</a>
                </p>
                <p>
                    <a href = "#"><img src = ""></a>
                </p>
                <p>
                    <a href = "#"><img src = ""></a>
                </p>
            </div>
            <ul class = "1st_container_left_box">
                <li>
                    <a href = "#" ><img src = ""></a>
                </li>
                <li>
                    <a href = "#">2021 Dev-Matching: 웹 백엔드 개발자 (상반기)</a>
                </li>
                <li>
                    접수:21년 03월08일 11:00 - 04월 02일 17:00
                </li>
                <li>
                    테스트:21년 04월 03일 13:00 - 04월 03일 15:00
                </li>
                <li>
                    <img src = "">
                </li>
                <li>
                    <img src = "">
                </li>
                <li>
                    <img src = "">
                </li>
                <li>
                    <img src = "">
                </li>
                <li>
                    <img src = "">
                </li>
                <li>
                    <img src = "">
                </li>
                <li>
                    <img src = "">
                </li>
                <li>
                    <img src = "">
                </li>
            </ul>
            <ul class = "1st_container_right_box">
                <li>
                    <a href = "#" ><img src = ""></a>
                </li>
                <li>
                    <a href = "#">2021 Dev-Matching: 웹 프론트엔드 개발자 (상반기)</a>
                </li>
                <li>
                    접수:21년 02월15일 11:00 - 03월 05일 17:00
                </li>
                <li>
                    테스트:21년 03월 06일 13:00 - 03월 06일 15:00
                </li>  
            </ul>  
            <ul>
                <li>
                    
                </li>
            </ul>
        </div>
        <div id = "2nd_container">
            <div id = "2nd_container_top_box">
                <h3>채용 중인 포지션</h3>
                <a href = "#">포지션 더보기</a>
            </div>
            <div id = "2nd_container_top_box2">
                <ul>
                    <li>Java</li>
                    <li>Spring</li>
                    <li>Node.js</li>
                    <li>Django</li>
                    <li>ReactJS</li>
                    <li>Vue.js</li>
                    <li>JavaScript</li>
                    <li>Python</li>
                    <li>Kotlin</li>
                    <li>C++</li>
                    <li>Android</li>
                    <li>iOS</li>
                    <li>서버/백엔드</li>
                    <li>프론트엔드</li>
                    <li>웹 풀스택</li>
                    <li>안드로이드 앱</li>
                    <li>아이폰 앱</li>
                </ul>
            </div>
            <div class = "2nd_container_box_home">
                <div class = "box1 box">
                    <a href = "#"><img src = ""></a>
                    <ul>
                        <li>[모바일 본부] 서버 개발자</li>
                        <li>OGQ</li>
                        <li>서버/백엔드</li>
                        <li>웹 풀스택</li>
                        <li>Rabbit MQ</li>
                        <li>AWS RDS</li>
                        <li>AWS EC2</li>
                        <li>HTML</li>
                    </ul>
                </div>
                <div class = "box1 box">
                    <a href = "#"><img src = ""></a>
                    <ul>
                        <li>[모바일 본부] 서버 개발자</li>
                        <li>OGQ</li>
                        <li>서버/백엔드</li>
                        <li>웹 풀스택</li>
                        <li>Rabbit MQ</li>
                        <li>AWS RDS</li>
                        <li>AWS EC2</li>
                        <li>HTML</li>
                    </ul>
                </div>
                <div class = "box1 box">
                    <a href = "#"><img src = ""></a>
                    <ul>
                        <li>[모바일 본부] 서버 개발자</li>
                        <li>OGQ</li>
                        <li>서버/백엔드</li>
                        <li>웹 풀스택</li>
                        <li>Rabbit MQ</li>
                        <li>AWS RDS</li>
                        <li>AWS EC2</li>
                        <li>HTML</li>
                    </ul>
                </div>
                <div class = "box1 box">
                    <a href = "#"><img src = ""></a>
                    <ul>
                        <li>[모바일 본부] 서버 개발자</li>
                        <li>OGQ</li>
                        <li>서버/백엔드</li>
                        <li>웹 풀스택</li>
                        <li>Rabbit MQ</li>
                        <li>AWS RDS</li>
                        <li>AWS EC2</li>
                        <li>HTML</li>
                    </ul>
                </div>
                <div class = "box1 box">
                    <a href = "#"><img src = ""></a>
                    <ul>
                        <li>[모바일 본부] 서버 개발자</li>
                        <li>OGQ</li>
                        <li>서버/백엔드</li>
                        <li>웹 풀스택</li>
                        <li>Rabbit MQ</li>
                        <li>AWS RDS</li>
                        <li>AWS EC2</li>
                        <li>HTML</li>
                    </ul>
                </div>
                <div class = "box1 box">
                    <a href = "#"><img src = ""></a>
                    <ul>
                        <li>[모바일 본부] 서버 개발자</li>
                        <li>OGQ</li>
                        <li>서버/백엔드</li>
                        <li>웹 풀스택</li>
                        <li>Rabbit MQ</li>
                        <li>AWS RDS</li>
                        <li>AWS EC2</li>
                        <li>HTML</li>
                    </ul>
                </div>
                <div class = "box1 box">
                    <a href = "#"><img src = ""></a>
                    <ul>
                        <li>[모바일 본부] 서버 개발자</li>
                        <li>OGQ</li>
                        <li>서버/백엔드</li>
                        <li>웹 풀스택</li>
                        <li>Rabbit MQ</li>
                        <li>AWS RDS</li>
                        <li>AWS EC2</li>
                        <li>HTML</li>
                    </ul>
                </div>
                <div class = "box1 box">
                    <a href = "#"><img src = ""></a>
                    <ul>
                        <li>[모바일 본부] 서버 개발자</li>
                        <li>OGQ</li>
                        <li>서버/백엔드</li>
                        <li>웹 풀스택</li>
                        <li>Rabbit MQ</li>
                        <li>AWS RDS</li>
                        <li>AWS EC2</li>
                        <li>HTML</li>
                    </ul>
                </div>
            </div>
            <div id = "3rd_container">
                <img src = "#">
                <span>나에게 꼭 맞는 채용 기회</span>
                <p>개발자를 위한 다양한 필터 옵션으로 나를 위한 포지션을 찾아보세요.</p>
                <p>
                    <a href = "#">포지션 더보기</a>
                </p>
            </div>
            <div id = "4th_container">
                <p>
                    <a href = "#"><img src = "#">
                        <p>프로그래머스 설문조사</p> 
                        <a href = "#">프로그래머스 2021 <br> 개발자 설문조사 리포트 </a> 
                        <span>약 5천5백 명의 국내 개발자, 예비 개발자의 <br> 개발 기술과 커리어에 대한 생각을 확인하세요!></span>  
                    </a>
                </p>
            </div>
            <div id = "5th_container">
                <img src = "#">
                <h1>우리의 관심은, 당신의 코드</h1>
                <p>프로그래머스는 당신이 더 나은 코드를 쓸 수 있도록, 이렇게 도와드립니다.></p>
            </div>
            <div id = "6th_container">
                <div id = "6th_contatiner_left_box">
                    <ul >
                        <li class = "6th_contatiner_left_box_small_box1">
                            <a herf = "#">
                                <span>1. 코드에 집중하는 채용 프로그램
                                <p>오직 프로그래머스에서만 운영하는 데브매칭, 챌린지를 통해 각종 기업의 채용문을 두드려볼 수 있습니다. 이력서가 부실해도, 코딩테스트에 취약해도 쌓아온 역량을 마음껏 발휘해 원하는 기업의 문을 두드릴 수 있는 기회를 제공합니다.</p>
                            </a>
                        </li>
                        <li class = "6th_contatiner_left_box_small_box2">
                            <a herf = "#">
                                <span>1. 코드에 집중하는 채용 프로그램
                                <p>오직 프로그래머스에서만 운영하는 데브매칭, 챌린지를 통해 각종 기업의 채용문을 두드려볼 수 있습니다. 이력서가 부실해도, 코딩테스트에 취약해도 쌓아온 역량을 마음껏 발휘해 원하는 기업의 문을 두드릴 수 있는 기회를 제공합니다.</p>
                            </a>
                        </li>
                        <li class = "6st_contatiner_left_box_small_box3">
                            <a herf = "#">
                                <span>1. 코드에 집중하는 채용 프로그램
                                <p>오직 프로그래머스에서만 운영하는 데브매칭, 챌린지를 통해 각종 기업의 채용문을 두드려볼 수 있습니다. 이력서가 부실해도, 코딩테스트에 취약해도 쌓아온 역량을 마음껏 발휘해 원하는 기업의 문을 두드릴 수 있는 기회를 제공합니다.</p>
                            </a>
                        </li>
                    </ul>
                </div>
                <div id = "6st_contatiner_right_box">
                    <img src = "#">
                </div>
            </div>
            <div id = "7th_container">
                <img src = "#">
                <h1>국내 700개 이상의 기업이 <br> 프로그래머스를 통해 당신을 기다립니다.</h1>
            </div>
            <div id = "8th_container">
                <img src = "#">
            </div>
            <div id = "9th_container">
                <span>JOIN OUR TEAM</span>
                <p>프로그래머스에 합류해 개발자 채용 문화의 혁신을 이끌어나가는 에너지의 주체가 되어보세요!</p>
                <a href = "#">인재 채용</a>
            </div>
            <div id = "last_container">
                <h4>2021 프로그래머스</h4>
                <ul>
                    <li class = ""><a href = "#">개발자용 프로그래머스</a></li>
                    <li class = ""><a href = "#">기업용 프로그래머스</a></li>     
                    <li class = ""><a href = "#">프로그래머스 스쿨</a></li>   
                    <li class = ""><a href = "#">개인정보 처리방침</a></li>   
                    <li class = ""><a href = "#">이용약관</a></li>   
                    <li class = ""><a href = "#">FAQ/문의</a></li>                  
                </ul>
                <ul>
                    <li>(주)그렙 / 공동대표 이확영, 임성수~</li>
                    <li>기업 서비스 : 02-539-1886</li>
                    <li>문의하기 운영시간 : 오전 9시~오후 6시(주말 및 공휴일 휴무)</li>
            </div>
        </div>
    </div>
   </body>
</html>

아직 ul, li / span / p / 을 언제 무엇을 써야 제일 효과좋은지 모르겠음.

P = Paragraph? 문단 ? 그럼 그림은 안들어가나

Span - 뜻이 따로 없다고함 / 글, 이미지 등 다 들어감

-> 상관 없다고 함. 그냥 깔끔하게 잘 쓰면 된다고 함..

다음주부터 자바

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>Programmers</title>
    <link rel = "stylesheet" href = "./commons/css/programmers.css">

</head>
<body>
    <div id = "wrap">
        <div id = "header">
            <div id = "idontknow">
                <h1 id= "logo">
                    <img src = "./commons/images/프로그래머로고.png">
                </h1>
                <ul class = "top_middle_menu">
                    <li>탑프로그래머스</li>
                    <li>실력 체크</li>
                    <li>개발자 채용</li>
                    <li>테크 피드</li>
                    <li>코딩테스트 연습</li>
                    <li>프로그래밍 강의</li>
                </ul>
                <ul class = "top_right_menu">
                    <li>계정 만들기</li>
                    <li>로그인</li>      
                    <li>기업 회원</li>
                </ul>
                <div id = "header_left_box">
                    <p>
                        <span>기술 중심 개발자 채용 플랫폼</span>
                        개발자 채용의 끝은, <br> 결국 코드니까
                    </p>
                    <p>
                        이력서보다, 당신의 코드가 우선시되는 <br> 프로그래머스만의 채용 프로그램을 만나보세요
                    </p>
                    <p>
                        <a href = "#">시작하기</a>
                    </p>
                </div>
            </div>
        </div>
        <div id = "1st_container">
            <div class = "1st_container_top_box">
                <p>
                    채용 프로그램 <img src = "commons/images/quick_btn.gif">
                </p>
                <p>
                    <a href = "#">더보기</a>
                </p>
                <p>
                    <a href = "#"><img src = ""></a>
                </p>
                <p>
                    <a href = "#"><img src = ""></a>
                </p>
            </div>
            <ul class = "1st_container_left_box">
                <li>
                    <a href = "#" ><img src = ""></a>
                </li>
                <li>
                    <a href = "#">2021 Dev-Matching: 웹 백엔드 개발자 (상반기)</a>
                </li>
                <li>
                    접수:21년 03월08일 11:00 - 04월 02일 17:00
                </li>
                <li>
                    테스트:21년 04월 03일 13:00 - 04월 03일 15:00
                </li>
                <li>
                    <img src = "">
                </li>
                <li>
                    <img src = "">
                </li>
                <li>
                    <img src = "">
                </li>
                <li>
                    <img src = "">
                </li>
                <li>
                    <img src = "">
                </li>
                <li>
                    <img src = "">
                </li>
                <li>
                    <img src = "">
                </li>
                <li>
                    <img src = "">
                </li>
            </ul>
            <ul class = "1st_container_right_box">
                <li>
                    <a href = "#" ><img src = ""></a>
                </li>
                <li>
                    <a href = "#">2021 Dev-Matching: 웹 프론트엔드 개발자 (상반기)</a>
                </li>
                <li>
                    접수:21년 02월15일 11:00 - 03월 05일 17:00
                </li>
                <li>
                    테스트:21년 03월 06일 13:00 - 03월 06일 15:00
                </li>  
            </ul>  
            <ul>
                <li>
                    
                </li>
            </ul>
        </div>
        <div id = "2nd_container">
            <div id = "2nd_container_top_box">
                <h3>채용 중인 포지션</h3>
                <a href = "#">포지션 더보기</a>
            </div>
            <div id = "2nd_container_top_box2">
                <ul>
                    <li>Java</li>
                    <li>Spring</li>
                    <li>Node.js</li>
                    <li>Django</li>
                    <li>ReactJS</li>
                    <li>Vue.js</li>
                    <li>JavaScript</li>
                    <li>Python</li>
                    <li>Kotlin</li>
                    <li>C++</li>
                    <li>Android</li>
                    <li>iOS</li>
                    <li>서버/백엔드</li>
                    <li>프론트엔드</li>
                    <li>웹 풀스택</li>
                    <li>안드로이드 앱</li>
                    <li>아이폰 앱</li>
                </ul>
            </div>
            <div class = "2nd_container_box_home">
                <div class = "box1 box">
                    <a href = "#"><img src = ""></a>
                    <ul>
                        <li>[모바일 본부] 서버 개발자</li>
                        <li>OGQ</li>
                        <li>서버/백엔드</li>
                        <li>웹 풀스택</li>
                        <li>Rabbit MQ</li>
                        <li>AWS RDS</li>
                        <li>AWS EC2</li>
                        <li>HTML</li>
                    </ul>
                </div>
                <div class = "box1 box">
                    <a href = "#"><img src = ""></a>
                    <ul>
                        <li>[모바일 본부] 서버 개발자</li>
                        <li>OGQ</li>
                        <li>서버/백엔드</li>
                        <li>웹 풀스택</li>
                        <li>Rabbit MQ</li>
                        <li>AWS RDS</li>
                        <li>AWS EC2</li>
                        <li>HTML</li>
                    </ul>
                </div>
                <div class = "box1 box">
                    <a href = "#"><img src = ""></a>
                    <ul>
                        <li>[모바일 본부] 서버 개발자</li>
                        <li>OGQ</li>
                        <li>서버/백엔드</li>
                        <li>웹 풀스택</li>
                        <li>Rabbit MQ</li>
                        <li>AWS RDS</li>
                        <li>AWS EC2</li>
                        <li>HTML</li>
                    </ul>
                </div>
                <div class = "box1 box">
                    <a href = "#"><img src = ""></a>
                    <ul>
                        <li>[모바일 본부] 서버 개발자</li>
                        <li>OGQ</li>
                        <li>서버/백엔드</li>
                        <li>웹 풀스택</li>
                        <li>Rabbit MQ</li>
                        <li>AWS RDS</li>
                        <li>AWS EC2</li>
                        <li>HTML</li>
                    </ul>
                </div>
                <div class = "box1 box">
                    <a href = "#"><img src = ""></a>
                    <ul>
                        <li>[모바일 본부] 서버 개발자</li>
                        <li>OGQ</li>
                        <li>서버/백엔드</li>
                        <li>웹 풀스택</li>
                        <li>Rabbit MQ</li>
                        <li>AWS RDS</li>
                        <li>AWS EC2</li>
                        <li>HTML</li>
                    </ul>
                </div>
                <div class = "box1 box">
                    <a href = "#"><img src = ""></a>
                    <ul>
                        <li>[모바일 본부] 서버 개발자</li>
                        <li>OGQ</li>
                        <li>서버/백엔드</li>
                        <li>웹 풀스택</li>
                        <li>Rabbit MQ</li>
                        <li>AWS RDS</li>
                        <li>AWS EC2</li>
                        <li>HTML</li>
                    </ul>
                </div>
                <div class = "box1 box">
                    <a href = "#"><img src = ""></a>
                    <ul>
                        <li>[모바일 본부] 서버 개발자</li>
                        <li>OGQ</li>
                        <li>서버/백엔드</li>
                        <li>웹 풀스택</li>
                        <li>Rabbit MQ</li>
                        <li>AWS RDS</li>
                        <li>AWS EC2</li>
                        <li>HTML</li>
                    </ul>
                </div>
                <div class = "box1 box">
                    <a href = "#"><img src = ""></a>
                    <ul>
                        <li>[모바일 본부] 서버 개발자</li>
                        <li>OGQ</li>
                        <li>서버/백엔드</li>
                        <li>웹 풀스택</li>
                        <li>Rabbit MQ</li>
                        <li>AWS RDS</li>
                        <li>AWS EC2</li>
                        <li>HTML</li>
                    </ul>
                </div>
            </div>
            <div id = "3rd_container">
                <img src = "#">
                <span>나에게 꼭 맞는 채용 기회</span>
                <p>개발자를 위한 다양한 필터 옵션으로 나를 위한 포지션을 찾아보세요.</p>
                <p>
                    <a href = "#">포지션 더보기</a>
                </p>
            </div>
            <div id = "4th_container">
                <p>
                    <a href = "#"><img src = "#">
                        <p>프로그래머스 설문조사</p> 
                        <a href = "#">프로그래머스 2021 <br> 개발자 설문조사 리포트 </a> 
                        <span>약 5천5백 명의 국내 개발자, 예비 개발자의 <br> 개발 기술과 커리어에 대한 생각을 확인하세요!></span>  
                    </a>
                </p>
            </div>
            <div id = "5th_container">
                <img src = "#">
                <h1>우리의 관심은, 당신의 코드</h1>
                <p>프로그래머스는 당신이 더 나은 코드를 쓸 수 있도록, 이렇게 도와드립니다.></p>
            </div>
            <div id = "6th_container">
                <div id = "6th_contatiner_left_box">
                    <ul >
                        <li class = "6th_contatiner_left_box_small_box1">
                            <a herf = "#">
                                <span>1. 코드에 집중하는 채용 프로그램
                                <p>오직 프로그래머스에서만 운영하는 데브매칭, 챌린지를 통해 각종 기업의 채용문을 두드려볼 수 있습니다. 이력서가 부실해도, 코딩테스트에 취약해도 쌓아온 역량을 마음껏 발휘해 원하는 기업의 문을 두드릴 수 있는 기회를 제공합니다.</p>
                            </a>
                        </li>
                        <li class = "6th_contatiner_left_box_small_box2">
                            <a herf = "#">
                                <span>1. 코드에 집중하는 채용 프로그램
                                <p>오직 프로그래머스에서만 운영하는 데브매칭, 챌린지를 통해 각종 기업의 채용문을 두드려볼 수 있습니다. 이력서가 부실해도, 코딩테스트에 취약해도 쌓아온 역량을 마음껏 발휘해 원하는 기업의 문을 두드릴 수 있는 기회를 제공합니다.</p>
                            </a>
                        </li>
                        <li class = "6st_contatiner_left_box_small_box3">
                            <a herf = "#">
                                <span>1. 코드에 집중하는 채용 프로그램
                                <p>오직 프로그래머스에서만 운영하는 데브매칭, 챌린지를 통해 각종 기업의 채용문을 두드려볼 수 있습니다. 이력서가 부실해도, 코딩테스트에 취약해도 쌓아온 역량을 마음껏 발휘해 원하는 기업의 문을 두드릴 수 있는 기회를 제공합니다.</p>
                            </a>
                        </li>
                    </ul>
                </div>
                <div id = "6st_contatiner_right_box">
                    <img src = "#">
                </div>
            </div>
            <div id = "7th_container">
                <img src = "#">
                <h1>국내 700개 이상의 기업이 <br> 프로그래머스를 통해 당신을 기다립니다.</h1>
            </div>
            <div id = "8th_container">
                <img src = "#">
            </div>
            <div id = "9th_container">
                <span>JOIN OUR TEAM</span>
                <p>프로그래머스에 합류해 개발자 채용 문화의 혁신을 이끌어나가는 에너지의 주체가 되어보세요!</p>
                <a href = "#">인재 채용</a>
            </div>
            <div id = "last_container">
                <h4>2021 프로그래머스</h4>
                <ul>
                    <li class = ""><a href = "#">개발자용 프로그래머스</a></li>
                    <li class = ""><a href = "#">기업용 프로그래머스</a></li>     
                    <li class = ""><a href = "#">프로그래머스 스쿨</a></li>   
                    <li class = ""><a href = "#">개인정보 처리방침</a></li>   
                    <li class = ""><a href = "#">이용약관</a></li>   
                    <li class = ""><a href = "#">FAQ/문의</a></li>                  
                </ul>
                <ul>
                    <li>(주)그렙 / 공동대표 이확영, 임성수~</li>
                    <li>기업 서비스 : 02-539-1886</li>
                    <li>문의하기 운영시간 : 오전 9시~오후 6시(주말 및 공휴일 휴무)</li>
            </div>
        </div>
    </div>
   </body>
</html>

/* CSS STYLE SHEET */

*{
    margin:0;
    padding:0;
}

ul,li{
    list-style:none;
}

a{
    text-decoration: none;
}

#wrap{
    width:100%;
}

#header{
    width:100%;
    height:420px;
    background:#263747


}



#logo{
    float:left;
        
}


.top_middle_menu>li{
    text-align: center;
    display: inline-block;
    color: #b2c0b2;


}



.top_right_menu{
    float:right;
    display:block;
    
}

.top_right_menu>li{
    float:left;
    display:inline-block;
    color:#b2c0b2;
    width:100px;
    font-size:15px;
}

#header_left_box{
    width:585px;
    height: 250px;
    float:left;
    margin-top:150px;
    background:white;
}

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

20210320 Javascript 기초 예습 (0)	2021.03.21
[6일차]20210319 프로그래머스 웹사이트 레이아웃 (0)	2021.03.19
[4일차] 20210317 웹사이트 화면만 html 로 60% 만들기 (4)	2021.03.17
20210316 3일차 웹사이트 container/box/ul/li /class etc. (0)	2021.03.16
20210316 2일차 html, css 홈페이지 기본 틀 만들기 (0)	2021.03.15

GOOD DAY

[5일차]20210318 Position:absolute; Postition:relative; Position:fixed

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

티스토리툴바

[5일차]20210318 Position:absolute; Postition:relative; Position:fixed

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

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

티스토리툴바