dukDukz

2021.03.19 쉽게 만드는 Programmers layout 본문

웹 개발/HTML 과 CSS

2021.03.19 쉽게 만드는 Programmers layout

헤일리_HJ 2021. 3. 19. 11:40

pr_index.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>
    <link rel="stylesheet" href="pr_index.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">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_content con_list">
                <ul>
                    <li>content1</li>
                    <li>content2</li>
                    <li>content3</li>
                </ul>
            </div>
            <div class="code_visual mt30">code_visual</div>
        </div>
        <!-- end code-->
        <!-- start enterprise-->
        <div id="enterprise" class="row mt30">
            enterprise_visual
        </div>
        <!-- end enterprise-->
        <!-- start footer -->
        <div id="join_footer" class="w100 mt30">
            join_footer
        </div>
        <div id="footer" class="w100">
            footer
        </div>
        <!-- end footer-->
    </div>
</body>
</html>

 

pr_index.css

 

/* 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:#0C151C;
}

#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;
    color: white;
    text-align: center;
    box-sizing: border-box;
    padding:20px;
}

.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;
}


#code{
    padding: 40px;
    box-sizing: border-box;    
}

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

.code_content>ul>li{
    width: 90%;
    height: 87px;
}

.code_visual{
    float: right;
    width: 50%;
    height: 500px;
    background:white;
    box-sizing: border-box;
    padding:30px;
    text-align: center;
    
}

#enterprise{
    height: 300px;
    padding: 50px;
    box-sizing: border-box;
    text-align: center;
    color: white;
}

#join_footer{
    height: 100px;
    color: white;
    background: #666;
    box-sizing: border-box;
    text-align: center;
    padding: 20px;
    box-sizing: border-box;
}

#footer{
    height: 300px;
    color: white;
    text-align: center;
    padding: 50px;
    box-sizing: border-box;
}

 

 

 

 

1. 코드 재활용

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

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

.mt30{
    margin-top:30px;
}

width 100% 주는 것들을 묶어서 하나의 class로 만들어준다.

 

width 1200px 주는 것들을 묶어서 하나의 class로 만들어준다.

 

margin-top:30px 주는 것들을 묶어서 하나의 class로 만들어준다.

 

 

2. padding으로 시작점 바꾸기

 

div 안에서 내용을 시작할때 시작점을 좀 더 안쪽으로 바꾸고 싶다면 padding 을 써야한다.

.position_content1{
    width:600px;
    height:600px;
    float:left;
    box-sizing: border-box;		/*padding 줬으면 box-sizing: border-box 줘야한다.*/
    padding:80px;
    background:#eee;
}

padding 을 줬으면 box-sizing을 꼭 주기! div의 크기가 변경되는 것을 막아준다.

'웹 개발 > HTML 과 CSS' 카테고리의 다른 글

CSS ) 글자의 overflow + div의 title 속성  (0) 2022.07.05
2021.03.29 경일 기본 틀  (0) 2021.03.29
2021.03.18 프로그래머스 홈페이지 레이아웃 잡아보기  (0) 2021.03.18
2021.03.16 회색 네모 박스 위치 조정  (0) 2021.03.16
2021.03.15 경일 아카데미 홈페이지 만들기  (0) 2021.03.15
'웹 개발/HTML 과 CSS' Related Articles more