반응형 웹페이지 드롭 칼럼

| 2021.04.02

dr210402.jpg

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>반응형 웹페이지 드롭 칼럼</title>

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #box_a {
            height: 400px;
            background: #ff9900;
            width: 35%;
            float: left;
        }

        #box_b {
            height: 400px;
            background: #eee;
            width: 30%;
            float: left;
        }

        #box_c {
            height: 400px;
            background: #f00000;
            width: 35%;
            float: right;
        }

        @media screen and (max-width: 1024px) {
            #box_b {
                float: none;
                width: auto;
            }

            #box_c {
                float: none;
                clear: both;
                width: auto;
            }
        }

        @media screen and (max-width: 800px) {
            #box_a {
                float: none;
                width: auto;
            }
        }
    </style>
</head>

<body>
    <div id="box_a">
        1<br>
        동해물과 백두산이 마르고 닳도록<br>
        하느님이 보우하사 우리나라 만세.<br>
        무궁화 삼천리 화려강산<br>
        대한 사람, 대한으로 길이 보전하세
    </div>

    <div id="box_b">
        2<br>
        남산 위에 저 소나무, 철갑을 두른 듯<br>
        바람서리 불변함은 우리 기상일세.<br>
        무궁화 삼천리 화려강산<br>
        대한 사람, 대한으로 길이 보전하세
    </div>

    <div id="box_c">
        3<br>
        가을 하늘 공활한데 높고 구름 없이<br>
        밝은 달은 우리 가슴 일편단심일세.<br>
        무궁화 삼천리 화려강산<br>
        대한 사람, 대한으로 길이 보전하세
    </div>
</body>
</html>

TAG •

  1. Synology NAS Let's Encrypt 보안 인증서 발급 안 될 때

  2. 모바일과 PC에서 각각 동작하는 CSS

  3. 반응형 웹 CSS 미디어쿼리

  4. Rhymix → Rhymix 마이그레이션 툴

  5. 반응형 웹페이지 드롭 칼럼

  6. 서버 이전 후 이미지 깨짐 현상 / 경로 일괄 변경

  7. Synologe NAS에서 홈페이지 운영 시 크롬에서 보안경고 없애기

  8. Synology NAS에 도메인 연결하기

  9. XE 이미지 좌측 정렬시 내용이 적으면 아래부분 올라오는 문제 해결법

  10. XE 기본 카운터의 방문자 / 페이지뷰 출력하고 수정하기

Board Pagination Prev 1 2 3 4 5 6 7 8 9 10 11 Next
/ 11