<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div {margin: 10px; padding: 10px;}
        .wrapper {clear: both;}
        .box1 {float: left; width: 100px; height: 100px; background-color: red;}
        .box2 {float: left; width: 100px; height: 100px; background-color: green;}
        
    </style>
</head>
<body>
    <div class="wrapper">
       <h3>신규상품</h3>
        <div class="box1">박스</div>
        <div class="box1">박스</div>
        <div class="box1">박스</div>
        <div class="box1">박스</div>
        <div class="box1">박스</div>
        <div class="box1">박스</div>
        <div class="box1">박스</div>
    </div>
    <div class="wrapper">
       <h3>이벤트상품</h3>
        <div class="box2">박스</div>
        <div class="box2">박스</div>
        <div class="box2">박스</div>
        <div class="box2">박스</div>
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div {border: 1px solid #ccc;}
        .container {
            width: 960px;
            padding: 20px;
            margin: 0 auto;
        }
        #header {
            padding: 20px;
            margin-bottom: 20px;
        }
        #contents {
            float: left;
            width: 490px;
            padding: 20px;
            margin-bottom: 20px;
        }
        #menubar {
            float: left;
            width: 150px;
            margin-bottom: 20px;
            margin-right: 20px;
        }
        #sidebar {
            float: right;
            width: 150px;
            padding: 20px;
            padding: 20px;
            margin-bottom: 20px;
        }
        #footer {
            clear: both;
            padding: 20px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div id="header">
            <h1>홈페이지 제목</h1>
        </div>
        <div id="menubar">
            <h2>메뉴</h2>
            <p>뉴스</p>
            <p>연예</p>
            <p>스포츠</p>
            <p>금융</p>
            <p>웹툰</p>
        </div>
        <div id="sidebar">
            <h2>배너광고</h2>
            <p>트럼프 '관세 집착'에 미국 통상정책기조 대격변 예고</p>
            <p>트럼프 '관세 집착'에 미국 통상정책기조 대격변 예고</p>
        </div>
        <div id="contents">
            <h2>본문</h2>
            <p>(서울=연합뉴스) 장재은 기자 = 도널드 트럼프 미국 대통령의 관세에 대한 신념 때문에 미국 통상정책이 획기적으로 변하고 있다는 진단이 나오고 있다. 

14일(현지시간) 미국 뉴욕타임스(NYT)에 따르면 트럼프 대통령은 애초 관세를 교역 상대국이 무역장벽을 해체하도록 강제할 무기로 간주했다. 

그러나 최근 들어 트럼프 대통령은 미국 산업들을 보호하고 수입을 차단하며 무역적자를 제거하는 영구적인 수단으로 그 의미를 확장해가고 있다. 

이런 추세는 미국이 현재 적용하고 있는 관세율의 수위에서도 방증되고 있다. </p>
            <p>독일 도이체방크의 분석에 따르면 미국은 현재 전체 수입에 부과하는 관세율이 4.2%로 산업화한 선진국들의 모임인 주요 7개국(G7) 중 가장 높은 것으로 나타났다.

이는 캐나다, 영국, 이탈리아, 독일, 프랑스의 2배에 달할 뿐만 아니라 러시아, 터키, 중국 등 신흥국들보다도 높다. 

자신을 '관세맨'으로 지칭한 트럼프 대통령의 고율 관세 '찬가'는 연일 흘러나오고 있다. </p>
        </div>
        <div id="footer">
            <h2>회사소개</h2>
            <p>이용약관 서비스 안내 기사배열 원칙 책임자 : 유봉석 청소년 보호 책임자 : 정연아 개인정보처리방침 책임의 한계와 법적고지 뉴스 고객센터</p>
        </div>
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div {width: 200px; height: 70px; padding: 20px; float: left; margin: 20px;}
        #box-1 {background-color: #ffd000;
            /* 위치를 지정하는 것이 소용없다.
            position: static;
            left:100px;
            top:-100px;
            */}
        <!--z인덱스가 높을수록 위에 덮임 -->
        #box-2 {background-color: #05d9f0; position: relative; left: -50px; top:30px; z-index: 1;}
        #box-3 {background-color: #23d720; position: relative; left: -100px; top: 60px; z-index: 2;}
    </style>
</head>
<body>
    <h1>CSS 연습하기</h1>
    
    <h2>position 속성</h2>
    <div id="box-1">박스1</div>
    <div id="box-2">박스2</div>
    <div id="box-3">박스3</div>
    
</body>
</html>

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div {padding: 20px;}
        .box {
            width: 50px;
            height: 50px;
            background-color: #0095ff;
        }
        #box-wrapper {
            position: relative;
            top: 300px;
            left: 200px;
            width: 300px;
            height: 300px;
            border: 1px solid #ccc;
        }
        #box-1 {
            position: absolute;
            top: 0;
            left: 0;
        }
        #box-2 {
            position: absolute;
            top: 0;
            right: 0;
        }
        #box-3 {
            position: absolute;
            bottom: 0;
            left: 0;
        }
        #box-4 {
            position: absolute;
            bottom: 0;
            right: 0;
        }
    </style>
</head>
<body>
   <div id="box-wrapper">
        <div id="box-1" class="box">박스1</div>
        <div id="box-2" class="box">박스2</div>
        <div id="box-3" class="box">박스3</div>
        <div id="box-4" class="box">박스4</div>
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #header {
            position: fixed;
            top: 5px;
            left: 10px;
            width: 100%;
            padding: 10px;
            background-color: yellow;
        }
        #contents {
            margin-top: 130px;
        }
    </style>
</head>
<body>
    <div id="header">
        <h1>메뉴</h1>
    </div>    
    <div id="contents">
        이로 인해 전국의 소형주택 공급이 늘어나고 있는 추세지만...
        ...중략함.. 실제로는 위의 이미지처럼 길게 썼음...
        ...턱없이 낮은 것을 확인할 수 있다.
    </div>
</body>
</html>

'css' 카테고리의 다른 글

demo7~13  (0) 2019.06.09
demo1~6  (0) 2019.06.09

+ Recent posts