Beny's Study

26. 페이지 상세 코드 본문

CSS_VSC

26. 페이지 상세 코드

76beny 2022. 6. 22. 22:10 
<!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>
</head>
<style>
    @media (max-width: 700px) {
        .row,
        .navbar {
            flex-direction: column;
        }
    }
    
    * {
        box-sizing: border-box;
    }
    /* Style the body */
    
    body {
        font-family: Arial;
        margin: 0;
    }
    /* Header/logo Title */
    
    .header {
        padding: 60px;
        text-align: center;
        background: #1abc9c;
        color: white;
    }
    /* Style the top navigation bar */
    
    .navbar {
        display: flex;
        background-color: #333;
    }
    /* Style the navigation bar links */
    
    .navbar a {
        color: white;
        padding: 14px 20px;
        text-decoration: none;
        text-align: center;
    }
    /* Change color on hover */
    
    .navbar a:hover {
        background-color: #ddd;
        color: black;
    }
    /* Column container */
    
    .row {
        display: flex;
        flex-wrap: wrap;
    }
    /* Create two unequal columns that sits next to each other */
    /* Sidebar/left column */
    
    .side {
        flex: 30%;
        background-color: #f1f1f1;
        padding: 20px;
    }
    /* Main column */
    
    .main {
        flex: 70%;
        background-color: white;
        padding: 20px;
    }
    /* Fake image, just for this example */
    
    .fakeimg {
        background-color: #aaa;
        width: 100%;
        padding: 20px;
    }
    /* Footer */
    
    .footer {
        padding: 20px;
        text-align: center;
        background: #ddd;
    }
    /* Responsive layout - when the screen is less than 700px wide, make the two columns stack on top of each other instead of next to each other */
</style>


<body>

    <!-- Note -->
    <div style="background:yellow;padding:5px">
        <h4 style="text-align:center">Resize the browser window to see the responsive effect.</h4>
    </div>

    <!-- Header -->
    <div class="header">
        <h1>My Website</h1>
        <p>With a <b>flexible</b> layout.</p>
    </div>

    <!-- Navigation Bar -->
    <div class="navbar">
        <a href="#">Link</a>
        <a href="#">Link</a>
        <a href="#">Link</a>
        <a href="#">Link</a>
    </div>

    <!-- The flexible grid (content) -->
    <div class="row">
        <div class="side">
            <h2>About Me</h2>
            <h5>Photo of me:</h5>
            <div class="fakeimg" style="height:200px;">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" style="height:60px;">Image</div><br>
            <div class="fakeimg" style="height:60px;">Image</div><br>
            <div class="fakeimg" style="height:60px;">Image</div>
        </div>
        <div class="main">
            <h2>TITLE HEADING</h2>
            <h5>Title description, Dec 7, 2017</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, 2017</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>
        </div>
    </div>

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

</html>
Document

Resize the browser window to see the responsive effect.

My Website

With a flexible layout.

Link Link Link Link

About Me

Photo of me:
Image

Some text about me in culpa qui officia deserunt mollit anim..

More Text

Lorem ipsum dolor sit ame.

Image

Image

Image

TITLE HEADING

Title description, Dec 7, 2017
Image

Some text..

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.


TITLE HEADING

Title description, Sep 2, 2017
Image

Some text..

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.

Footer

'CSS_VSC' 카테고리의 다른 글

20. 애니메이션  (0) 2022.06.22
19. 트랜지션_지연  (0) 2022.06.22
18. 이미지 움직임2  (0) 2022.06.22
17. 이미지 움직임  (0) 2022.06.22
16. 레이아웃(Table)  (0) 2022.06.22
'CSS_VSC' Related Articles more