Front-end/HTML&CSS

[웹 퍼블리싱] 02. HTML/CSS 핵심개념

Dev다D 2021. 2. 8. 22:56
반응형

코딩의 민족 그리드

결과물 일부분

<!DOCTYPE html>
<html>
<head>
    <title>코딩의 민족</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="Styles.css">
</head>
<body>
<h1> 코딩의 민족 </h1>
<h2> 넌 코딩할때가 제일 이뻐 </h2>
    <div class="food-container">
        <div class="food">
            <img src="../Ex0121/chicken.jpg" width ="300px" height="200px">
            <div class="info">
                <h3> 코딩에 빠진 닭 </h3>
                <p> 주머니가 가벼운 당신의 마음까지 생각한 착한 가격!</p>
                <a href="#"> 바로 결제 </a>
            </div>
        </div>

        <div class="food">
            <img src="../Ex0121/sushi.jpg" width ="300px" height="200px">
            <div class="info">
                <h3> 코코 스시 </h3>
                <p> 주머니가 가벼운 당신의 마음까지 생각한 착한 가격!</p>
                <a href="#"> 바로 결제 </a>
            </div>
        </div>

        <div class="food">
            <img src="../Ex0121/burger.jpg" width ="300px" height="200px">
            <div class="info">
                <h3> 코데리아 </h3>
                <p> 주머니가 가벼운 당신의 마음까지 생각한 착한 가격!</p>
                <a href="#"> 바로 결제 </a>
            </div>
        </div>

        <div class="food">
            <img src="../Ex0121/bibimbap.jpg" width ="300px" height="200px">
            <div class="info">
                <h3> 코가네 </h3>
                <p> 주머니가 가벼운 당신의 마음까지 생각한 착한 가격!</p>
                <a href="#"> 바로 결제 </a>
            </div>
        </div>
    </div>
</body>
</html>
* {
    box-sizing: border-box;
}

body {
    background-color: #f0e8d9;
}

h1 {
    text-align: center;
    font-size: 64px;
    color: #58595B;
    margin-top: 75px;
    margin-bottom: 30px;
}

h2 {
    text-align: center;
    font-size: 32px;
    color: #58595B;
    margin-bottom: 75px;
}

.food img {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}
.food {
    background-color: white;
    width: 300px;
    border-radius: 10px;
    margin-bottom: 50px;

    float: left;
    margin-left: 15px;
    margin-right: 15px;
}

.food-container {
    width: 660px;
    margin-left: auto;
    margin-right: auto;

}

.food .info {
    padding: 20px;
    text-align: center;
}

.food h3 {
    color: #58595B;
    font-size: 32px;
    margin-top: 0px;
    margin-bottom: 20px;
}

.food p {
    color: #58595B;
    font-size: 16px;
    text-align: left;
    margin-top: 0px;
    margin-bottom: 16px;
}

.food a {
    color: #0000ee;
    font-size: 16px;
    text-decoration: none;
}
본 내용은 Codeit의  '웹 퍼블리싱' 강의를
참고하여 작성한 내용입니다.
반응형
저작자표시 비영리 동일조건

'Front-end > HTML&CSS' 카테고리의 다른 글

[웹 퍼블리싱] 02. HTML/CSS 핵심개념  (0) 2021.02.09
[웹 퍼블리싱] 02. HTML/CSS 핵심개념  (0) 2021.02.08
[웹 퍼블리싱] 02. HTML/CSS 핵심개념  (0) 2021.02.08
[웹 퍼블리싱] 02. HTML/CSS 핵심개념  (0) 2021.02.08
[웹 퍼블리싱] 02. HTML/CSS 핵심개념  (0) 2021.02.08

'Front-end/HTML&CSS'의 다른글

  • 현재글[웹 퍼블리싱] 02. HTML/CSS 핵심개념

관련글

티스토리툴바