반응형 웹페이지 드롭 칼럼

| 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 •

List of Articles
번호 분류 제목 날짜 조회 수
32 Synology NAS Let's Encrypt 보안 인증서 발급 안 될 때 newfile 2026.04.06 0
31 모바일과 PC에서 각각 동작하는 CSS 1 update 2024.05.23 2
30 반응형 웹 CSS 미디어쿼리 update 2024.04.29 0
29 Rhymix → Rhymix 마이그레이션 툴 updatefile 2023.08.06 1
» 반응형 웹페이지 드롭 칼럼 updatefile 2021.04.02 0
27 서버 이전 후 이미지 깨짐 현상 / 경로 일괄 변경 updatefile 2019.06.21 0
26 Synologe NAS에서 홈페이지 운영 시 크롬에서 보안경고 없애기 updatefile 2019.01.21 0
25 Synology NAS에 도메인 연결하기 2 updatefile 2018.09.15 4
24 XE 이미지 좌측 정렬시 내용이 적으면 아래부분 올라오는 문제 해결법 updatefile 2012.01.02 3220
23 XE 기본 카운터의 방문자 / 페이지뷰 출력하고 수정하기 4 update 2012.01.02 3601
22 XE 소스 수정 없이 카테고리 자동 선택하기 file 2012.01.02 2570
21 rewrite rule 예외처리하기 2012.01.02 2916
20 일러스트에서 아웃라인 따는 방법 2011.02.10 8721
19 대류커뮤니티 v4에 사용된 계정 및 DB현황 출력 3 file 2010.03.29 10961
18 대류가 사용하는 에러페이지 소스 2007.03.13 12659
17 원하는 부분만 인쇄하기 2006.05.05 9706
16 웹에서 인증을 받고 페이지 들어가기 1 file 2006.02.11 11566
15 웹에서 인증을 받고 페이지 들어가기 file 2006.02.11 2
14 원하는 날에, 원하는 곳에, 원하는 이미지 띄우기 2005.07.27 9959
13 원하는 날에, 원하는 곳에, 원하는 이미지 띄우기 2005.07.27 1
Board Pagination Prev 1 2 Next
/ 2