study/example03.html at main · jjeong3513/study · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>flex ex</title>
<style>
*P{box-sizing: border-box; margin: 0; padding: 0;}
body{ font-family: Arial, Helvetica, sans-serif;}
header{text-align: center; padding: 60px; background-color: rgb(116, 204, 204);
  color: #fff;}
  .navbar{
    display: flex;
    background-color: violet;
  }
  .navbar a{
    color: #fff; padding: 14px 20px;  text-decoration: none; text-align: center;
  }
  .navbar a:hover{background-color: cadetblue; color: #000;}

  .row{display: flex; flex-wrap: wrap;}
  .side{flex: 100%;  background-color: antiquewhite; padding: 20px;}
  .main{flex: 100%; background-color: rgb(235, 190, 235); padding: 20px;}
  .fakeimg{background-color: #ccc; width: 100%; padding: 20px; height: 60px;}
  .footer{padding: 20px; text-align: center; background-color: #ddd;}

  @media screen and (min-width:768px){
    .side{flex: 30%;}  /*flex-wrap: wrap;가 들어가서 적용이 되는 것임*/
    .main{flex: 70%;}  /*flex-wrap: wrap;가 들어가서 적용이 되는 것임*/

  }

</style>
</head>
<body>
<!-- Header -->
<header class="header">
  <h1>My Website</h1>
  <p>With a <b>flexible</b> layout.</p>
</header>
<!-- Nav Bar -->
<nav class="navbar">
  <a href="#">Link</a>
  <a href="#">Link</a>
  <a href="#">Link</a>
  <a href="#">Link</a>
</nav>

	<!--(content) -->
<section class="row">
  <section class="side">
      <h2>About Me</h2>
      <h5>Photo of me:</h5>
      <div class="fakeimg">Image</div>
      <p>Some text about me in culpa qui officia deserunt mollit anim..</p>
      <h3>More Text</h3>
      <p>Lorem ipsum dolor sit ame.</p>
      <div class="fakeimg">Image</div><br>
      <div class="fakeimg">Image</div><br>
      <div class="fakeimg">Image</div>
  </section>
  <section class="main">
      <h2>TITLE HEADING</h2>
      <h5>Title description, Dec 7, 2022</h5>
      <div class="fakeimg" style="height:200px;">Image</div>
      <p>Some text..</p>
      <p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
      <br>
      <h2>TITLE HEADING</h2>
      <h5>Title description, Sep 2, 2022</h5>
      <div class="fakeimg" style="height:200px;">Image</div>
      <p>Some text..</p>
      <p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
  </section>
</section>

<!-- Footer -->
<div class="footer">
  <h2>Footer</h2>
</div>

</body>
</html>