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

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div {width: 100px; height: 100px; background-color: red; margin: 10px;}
        #box-1 {border: 10px solid black;}
        #box-2 {border: 10px solid black; padding: 50px;}
        #box-3 {border: 10px solid black; margin: 50px;}
        #box-4 {border: 10px solid black; margin-left:  -60px;}
        #box-4:hover {margin-left: 0px;}
        
    </style>
</head>
<body>
    <h1>CSS 연습/h1>
    <h2>박스 모델</h2>
    <div id="box-1">가나다</div>
    <div id="box-2">가나다</div>
    <div id="box-3">가나다</div>
    <div id="box-4">가나다</div>
</body>
</html>

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        img {width: 120px; height: 120px;}
        .box {display: block;} /* 블록 엘리먼트로 변경 */
        .box {display: none;} /* 화면에 표시되지 않도록 변경 */
    </style>
</head>
<body>
    <h1>CSS 연습하기</h1>
    <div>
        <img class="box" src="images/(1).jpg"/>
        <img class="box" src="images/(2).jpg"/>
        <img class="box" src="images/(3).jpg"/>
        <img class="box" src="images/(4).jpg"/>
        <img class="box" src="images/(5).jpg"/>
        <img class="box" src="images/(6).jpg"/>
        <img class="box" src="images/(7).jpg"/>
        <img class="box" src="images/(8).jpg"/>
    </div>
    <hr/>
    <div>
        <div><img src="images/(1).jpg"></div>
        <div><img src="images/(2).jpg"></div>
        <div><img src="images/(3).jpg"></div>
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #box-2, #box-3 {display: none;}
    </style>
</head>
<body>
    <div>
        <button onclick="showBox1()">뉴스</button>
        <button onclick="showBox2()">연예</button>
        <button onclick="showBox3()">스포츠</button>
    </div>
    
    <div id="box-1">
        <ul>
            <li>클릭하면 바뀜</li>
            <li>클릭하면 바뀜</li>
            <li>클릭하면 바뀜</li>
        </ul>
    </div>
    <div id="box-2">
        <ul>
            <li>가나다</li>
            <li>가나다</li>
            <li>가나다</li>
        </ul>
    </div>
    <div id="box-3">
        <ul>
            <li>류현진 사이영상 수상</li>
            <li>류현진 사이영상 수상</li>
            <li>류현진 사이영상 수상</li>
        </ul>
    </div>
    <script>
        function hideAllbox() {
            document.getElementById("box-1").style.display = "none";
            document.getElementById("box-2").style.display = "none";
            document.getElementById("box-3").style.display = "none";
        }
        
        function showBox1() {
            hideAllbox();
            document.getElementById("box-1").style.display="block";
        }
        
        function showBox2() {
            hideAllbox();
            document.getElementById("box-2").style.display="block";

        }
        
        function showBox3() {
            hideAllbox();
            document.getElementById("box-3").style.display="block";

        }
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        /* 4방향 모두 */
        #btn-1 {padding: 20px; }
        
        /* top/bottom right/left */
        #btn-2 {padding: 20px 10px; }
        
        /* top right bottom left 시계 방향 */
        #btn-3 {padding: 80px 40px 20px 10px; }
        
        #btn-4 {padding-top: 80px; padding-bottom: 20px; }
        
        span {padding: 10px;}
        #sp-1 {border:1px solid black;}
        #sp-2 {border:2px dotted green;}
        #sp-3 {border-bottom: 3px dashed red;}
        
    </style>
</head>
<body>
    <h1>CSS 연습하기</h1>
    
    <h2>패딩 설정</h2>
    <div>
        <button id="btn-1">클릭</button>
        <button id="btn-2">클릭</button>
        <button id="btn-3">클릭</button>
        <button id="btn-4">클릭</button>
    </div>
    
    <h2>테두리 설정</h2>
    <div>
        <span id="sp-1">테두리연습</span>
        <span id="sp-2">테두리연습</span>
        <span id="sp-3">테두리연습</span>
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div {padding: 10px; border: 1px solid black;}
    </style>
</head>
<body>
    <div id="wrapper">
        <div id="header">header</div>
        <div id="left">left</div>
        <div id="content">content</div>
        <div id="footer">footer</div>
    </div>
</body>
</html>

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div {width: 100px; height: 100px; margin: 10px; background-color: red;}
        
        /*
            float 속성
                - html 요소(태그)를 웹 문서의 위에 떠 있게 만든다.
                - 떠 있게 
        */
        #box-1 {float: left;}
        #box-2 {float: left;}
        #box-3 {float: left;}
        #box-4 {float: right;}
    </style>
</head>
<body>
    <div id="box-1">박스1</div>    
    <div id="box-2">박스2</div>
    <div id="box-3">박스3</div>    
    <div id="box-4">박스4</div>    
</body>
</html>

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box {padding: 20px; margin: 10px;}
        #box-1 {float: left; background-color: #ffd800; width: 200px; height: 300px;}
        #box-2 {float: left; background-color: #0094dd; width: 200px; height: 150px;}
        #box-3 {clear:both; background-color: #00ff21;}
        #box-4 {clear:both; background-color: #ff00ff;}
    </style>
</head>
<body>
   <div id="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>

 

'css' 카테고리의 다른 글

demo14~18  (0) 2019.06.09
demo1~6  (0) 2019.06.09

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div{color: lightgreen;}
    </style>
</head>
<body>
   <h1>스타일 적용방법</h1>
    
    <h2>style 속성 사용</h2>    
    <p style="color: red;">css 연습하기</p>
    
    <h2>style 태그 사용</h2>
    <div>
        <p>CSS 연습하기</p>
        <p>CSS 연습하기</p>
        <p>CSS 연습하기</p>
    </div>
</body>
</html>

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="demo2.css">
</head>
<body>
    <h1>CSS 연습하기</h1>
    
    <h2>외부 스타일시트 파일 사용</h2>
    <p>CSS 연습</p>
    <p>CSS 연습</p>
    <p>CSS 연습</p>
    <p>CSS 연습</p>
    <p>CSS 연습</p>
</body>
</html>

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        /* 전체 선택자 */
        * {color:red;}
        /* 태그 선택자 */
        span {color: black; font-size: 30px;}
        /* 클래스 선택자 */
        .bluetext {color: blue;}
        .blueboard {border: 1px solid blue; padding: 7px;}
        /* 아이디 선택자 */
        #summary {color: black; font-size: 50px;}
        /* 그룹 선택자 */
        h1, h2 {background: lightgreen;}
    </style>
</head>
<body>
    <h1>선택자 연습</h1>    
    
    <h2>전체 선택자 연습</h2>
    <p>전체 선택자의 모든 html 요소에 적용된다.</p>
    
    <h2>태그 선택자 연습</h2>
    <p>태그 선택자는 <span>해당 태그에만</span> 스타일이 <span>적용된다.</span></p>
    
    <h2>태그 선택자 연습</h2>
    <p>태그 선택자는 <span class="bluetext blueboard">해당 태그에만</span> 스타일이 <span class="bluetext">적용된다.</span></p>
    
    <h2>아이디 선택자 연습</h2>
    <p id="summary">아이디 선택자는 아이디 속성 값이 일치하는 태그 하나만 선택해서 스타일을 적용한다.</p>
</body>
</html>

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="demo4.css">
</head>
<body>
    <div id="wrapper"></div>
    <h1>스타일 시트 연습</h1>
    
    <h3>개봉영화 리스트</h3>
    <table class="table table-primary">
        
                <thead>
                    <tr>
                        <th>순위</th>
                        <th>제목</th>
                        <th>점유율</th>
                    </tr>
                </thead>
                
                <tbody>
                    <tr>
                        <td>1</td>
                        <td>어벤저스 엔드게임</td>
                        <td>60%</td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>걸캅스</td>
                        <td>30%</td>
                    </tr>
                    <tr>
                        <td>3</td>
                        <td>포켓몬스터 명탐정 피카츄</td>
                        <td>10%</td>
                    </tr>
                </tbody>

    </table>
</body>
</html>

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.css">
</head>
<body>
    <h1>스타일 시트 연습</h1>
    
    <div>
        <button class="btn btn-default">버튼</button>
        <button class="btn btn-primary">버튼</button>
        <button class="btn btn-info">버튼</button>
        <button class="btn btn-success">버튼</button>
        <button class="btn btn-warning">버튼</button>
        <button class="btn btn-danger">버튼</button>
        <button class="btn btn-disabled">버튼</button>
    
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div {margin: 10px; width: 150px; height: 150px;}
    </style>
</head>
<body>
    <h1>CSS 연습</h1>
    
    <h2>색상 표현하기</h2>
    <div style="background-color: red;"></div>
    <div style="background-color: rgb(255,0,0);"></div>
    <div style="background-color: rgb(0,255,0);"></div>
    <div style="background-color: rgb(0,0,255);"></div>
    <div style="background-color: rgb(255,0,255);"></div>
    <div style="background-color: rgb(0,0,0);"></div>
    
    <div style="background-color: #ff0000;"></div>
    <div style="background-color: #f00;"></div> <!-- 앞뒤 글자가 같을 시 줄일 수 있음 -->
    <div style="background-color: #ffaabb;"></div>
    <div style="background-color: #fab;"></div>
    
</body>
</html>

 

'css' 카테고리의 다른 글

demo14~18  (0) 2019.06.09
demo7~13  (0) 2019.06.09

+ Recent posts