index.html

<!DOCTYPE html>
<html>
    <head>
        <title>코딩의 민족</title>
        <meta charset="utf-8">
        <link rel="stylesheet" href="css/styles.css">
    </head>
    <body>
        <h1 class="main-header">코딩의 민족</h1>
        <h2 class="main-secend-header">넌 코딩할 때가 제일 이뻐</h2>
        <div class="combine1">
                <div class="main-menu1">
                    <img src="images/chicken.jpg">
                    <div class="main-list">
                        <h1>코딩에 빠진 닭</h1>
                        <h2>주머니가 가벼운 당신의 마음까지 생각한 착한 가격!</h2>
                        <a href="#">바로결제</a>
                    </div>
                </div>
                <div class="main-menu2">
                    <img src="images/sushi.jpg">
                    <div class="main-list">
                        <h1>코코스시</h1>
                        <h2>주머니가 가벼운 당신의 마음까지 생각한 착한 가격!</h2>
                        <a href="#">바로결제</a>
                      </div>
                </div>
        </div>
        <div class="combine2">
            <div class="main-menu3">
                <img src="images/burger.jpg">
                <div class="main-list">
                    <h1>코데리아</h1>
                    <h2>주머니가 가벼운 당신의 마음까지 생각한 착한 가격!</h2>
                    <a href="#">바로결제</a>
                  </div>
            </div>
            <div class="main-menu4">
                <img src="images/bibimbap.jpg">
                <div class="main-list">
                    <h1>코가네</h1>
                    <h2>주머니가 가벼운 당신의 마음까지 생각한 착한 가격!</h2>
                    <a href="#">바로결제</a>
                  </div>
            </div>
        </div>
    </body>
</html>

css/styles.css

@font-face {
    font-family: "bmjua";
    src: url(../fonts/BMJUA_otf.otf);
}
* {
    box-sizing: border-box;
    color: #58595B;
    font-family: "bmjua";
    margin: 0;
}
body {
    background-color: #F0E8D9;
}
.main-header {
    font-size: 64px;
    text-align: center;
    margin-top: 75px;
}
.main-secend-header {
    margin-top: 30px;
    margin-bottom: 75px;
    text-align: center;
}
.main-menu1, .main-menu2, .main-menu3, .main-menu4 {
    margin-left: auto;
    margin-right: auto;
    width: 300px;
}
.main-menu1 img, .main-menu2 img, .main-menu3 img, .main-menu4 img {
    border-top-left-radius:10px;
    border-top-right-radius:10px;
    display: block;
    height: 200px;
    width: 300px;
}
.main-menu1 {
    margin-right: 30px;
    float: left;
    margin-bottom: 50px;
}
.main-menu2 {
    float: left;
}
.main-menu3 {
    margin-right: 30px;
    clear: left;
    float: left;
}
.main-menu4 {
    float: left;
}
.combine1, .combine2 {
    width: 630px;
    margin-right: auto;
    margin-left: auto;
}

.main-list {
    border-bottom-right-radius:10px;
    border-bottom-left-radius:10px;
    background-color: white;
    text-align: center;
    margin-bottom: 50px;
    padding: 20px;
}
.main-list h1 {
    font-size: 32px;
}
.main-list h2 {
    font-size: 16px;
    text-align: left;
    margin-top: 20px;
    margin-bottom: 16px;
}
.main-list a {
    color : #0000EE;
    text-decoration: none;
}

.combine1, .combine2 {
  width: 630px;
  margin-right: auto;
  margin-left: auto;
}

이부분 말인데요~ 꼭 width: 630px; 이렇게 정해주고 가운데 정렬을 해야하나요 ㅠㅠ?

뭔가 갯수가 늘어나면 저걸 계속 늘려줘야한다는말인데.. 이런식으로 코딩을 할 경우 추후에 유지보수가

많이 힘들것 같아서 그렇습니다.. 혹시 예제 같은경우로 유동적인 걸 좀

알 수 있을까요? 또는 자세한 설명이라도 부탁드리겠습니다 ㅠㅠ!