(3)div

(3)div공부방2022. 11. 8. 09:26@mag1c

Table of Contents

728x90

과제3)이미지 넓이, 높이는 동일해야 하며 3번째 이미지는 반드시 1,2번 이미지 다음 라인에 위치할 것, 배경은 이미지 영역에만 존재할 것

<!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="과제 4번.css">
    <style>
        {
            background-color: coral;
        }
    </style>
</head>
<body>
    <div style="font-size: 30px ;" id="header"><b>사진모음</b></div><br>
        <div style="background-color: coral;">
            <div id="nav">
                <img src="KakaoTalk_20221107_150415090_01.jpg" width="300px", height="300px">
            </div>
            <div id="section">
                <img src="KakaoTalk_20221107_150415090_02.jpg" width="300px", height="300px">
            </div>
        </div>
    <div style="background-color: coral;", id="footer">
        <img src="KakaoTalk_20221107_150415090.jpg" width="300px", height="300px">
    </div>
</body>
</html>

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

css

#header{
    height: 150;
}
#nav{
    height: 300px;
    display: inline-block;
    /* float: left; */
}
#section{
    height: 300px;
    display: inline-block;
    /* float: left; */
}
#footer{
    height: 305px;
}

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

선생님이 알려주신 쉬운 정답

<!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>
        div{
            background-color: sandybrown;
        }
        img{
            width: 400px;
            height: 400px;
        }
    </style>
</head>
<body>
    <h1>사진모음</h1>
    <div>
        <img src="1번이미지">
        <img src="2번이미지">
        <br>
        <img src="3번이미지">
    </div>
</body>
</html>

728x90

@mag1c :: 꾸준히 재밌게

2023.04 ~ 백엔드 개발자의 기록

포스팅이 좋았다면 "좋아요❤️" 또는 "구독👍🏻" 해주세요!

티스토리툴바