데이터융합 JAVA응용 SW개발자 기업 채용연계 연수과정 22일차 강의 정리

misung·2022년 4월 13일

CSS html 데이터융합 JAVA응용 SW개발자 기업 채용연계 연수과정

데이터융합 JAVA응용 SW개발자 기업 채용연계 연수과정

목록 보기

12/47

되돌아보기

HTML 및 CSS 부분은 '대략 이런 것들이 존재한다' 라고 생각하고 그때그때 찾아보도록 하는 것이 좋을 듯.

CSS

5. 박스모델

5.1 단위

실습 1. px

<!DOCTYPE html>
<html lang="ko">
<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>
    <style>
        body * {
            border: 2px solid black;
        }
        .container {
            width: 1200px;
        }
        .parent {
            width: 50%;
        }
        .child {
            width: 30%;
        }
    </style>
</head>
<body>
    <div class="container">Container
        <div class="parent">Parent
            <div class="child">Child1</div>
            <div class="child">Child2</div>
        </div>
    </div>
</body>
</html>

실습 2. em,rem

<!DOCTYPE html>
<html lang="ko">
<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>

    <style>

        html {
            font-size: 10px;
        }

        body * {
            border: 2px solid black;
        }

        .container {
            width: 60em;
            font-size: 20px;
        }
        
        .parent {
            width: 50%;
            font-size: 2em;
        }

        .child {
            width: 30%;
            font-size: 3rem;
        }
    </style>

</head>
<body>

    <div class="container">Container
        <div class="parent">Parent
            <div class="child">Child1</div>
            <div class="child">Child2</div>
        </div>
    </div>
    
</body>
</html>

실습 3. vw, vh

<!DOCTYPE html>
<html lang="ko">
<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>

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

        .container {
            width: 50vw;
            height: 100vh;
            background: red;
        }
    </style>

</head>
<body>
    <div class="container"></div>
</body>
</html>

5.2 박스속성

실습 1. width, height

<!DOCTYPE html>
<html lang="ko">
<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>

    <style>
        div {
            background: red;
            width: auto;
            height: auto;
        }
    </style>

</head>
<body>

    <div>안녕안녕</div>
    
</body>
</html>

실습 2. max, min

<!DOCTYPE html>
<html lang="ko">
<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>

    <style>
        .parent {
            width: 1000px;
            height: 300px;
            border: 4px solid blue;
            margin: 20px;
        }

        .child {
            background: orange;
            max-width: 400px;
            min-height: 200px;
        }

    </style>

</head>
<body>

    <div class="parent">
        <div class="child"></div>
    </div>
    
</body>
</html>

실습 3. margin

<!DOCTYPE html>
<html lang="ko">
<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>

    <style>

        .container {
            width: 400px;
            height: 200px;
            border: 4px solid red;
            margin-left: 200px;
            margin-top: 100px;
        }

        .box1 {
            width: 100px;
            height: 100px;
            border: 4px solid blue;
            margin-top: 20px;
            margin-left: 50%;
        }

        .box2 {
            width: 100px;
            height: 100px;
            border: 4px solid #000;
        }


        .outer {
            background: red;
            height: 100px;
        }

        .inner {
            width: 70%;
            height: 100px;
            background: blue;

            /*
            단축 속성 사용 시
            margin: 위 오른쪽 아래 왼쪽 (시계방향) -> 값 4개
            margin: 위 [좌우] 아래 -> 값 3개
            margin: [상하] [좌우] -> 값 2개
            margin: [상하좌우]전체 -> 값 1개
            */
            margin: 0 auto;
        }
    </style>

</head>
<body>

    <div class="outer">
        <div class="inner"></div>
    </div>

    <div class="container">
        <div class="box1"></div>
        <div class="box2"></div>
    </div>
    
</body>
</html>

실습 4. padding

<!DOCTYPE html>
<html lang="ko">
<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>

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.min.css">

    <style>
        .box {
            width: 100px;
            height: 100px;
            background: tomato;
            border: 10px solid #000;
            padding: 30px;

            /*
            박스의 크기를 어떤 것을 기준으로 계산할지를 결정.
            border-box는 테두리(경계선)를 기준으로 크기를 정하고,
            content-box(default)는 내부 요소를 기준으로 크기를 정합니다.
            padding은 내부 요소와 경계선과의 거리를 벌리는 속성이기 때문에
            그만큼 박스 크기가 증가합니다.
            */
            box-sizing: border-box;
        }
    </style>

</head>
<body>

    <div class="box">Hello World!</div>
    
</body>
</html>

실습 5. border

Document

안녕하세요. 오늘은 CSS 박스속성을 공부할 거에요!

<!DOCTYPE html>
<html lang="ko">
<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>
    <style>
        p {
            width: 400px;
            padding: 5px;
            box-sizing: border-box;
        }
        .p1 {
            /*
            border-width: 5px;
            border-style: solid;
            border-color: #123456;
            */
            /* 단축하여 이렇게 작성 가능*/
            border: 5px solid #123456;
        }
        .p2 {
            border: 5px dotted #123456;
        }
        .p3 {
            border: 5px dashed #123456;
        }
        .p4 {
            border: 10px groove #F06;
        }
        .p5 {
            border: 10px ridge #06c;
        }
        .p6 {
            border: 10px outset #0c3;
        }
    </style>
</head>
<body>
    <p class="p1">안녕하세요. 오늘은 CSS 박스속성을 공부할 거에요!</p>
    <p class="p2">안녕하세요. 오늘은 CSS 박스속성을 공부할 거에요!</p>
    <p class="p3">안녕하세요. 오늘은 CSS 박스속성을 공부할 거에요!</p>
    <p class="p4">안녕하세요. 오늘은 CSS 박스속성을 공부할 거에요!</p>
    <p class="p5">안녕하세요. 오늘은 CSS 박스속성을 공부할 거에요!</p>
    <p class="p6">안녕하세요. 오늘은 CSS 박스속성을 공부할 거에요!</p>
</body>
</html>

실습 6. display

<!DOCTYPE html>
<html lang="ko">
<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>
    <style>
        span {
            display: block;
            width: 100px;
            height: 100px;
            background: red;
        }
        a {
            display: inline-block;
            width: 100px;
            height: 100px;
            background-color: green;
        }
        .box {
            height: 100px;
            background-color: deepskyblue;
            margin-top: 40px;
        }
        .box.hide {
            /*display: none;*/
            opacity: 0;
        }
    </style>
</head>
<body>
    <span>display 속성 공부</span>
    <a href="#">게시판</a>
    <a href="#">방명록</a>
    <div class="box">
        <input type="text" value="1">
        <input type="text" value="2">
        <input type="text" value="3">
        <input type="text" value="4">
        <input type="text" value="5">
        <input type="text" value="6">
    </div>
    <button class="btn">클릭!</button>
    <script>
        const $box = document.querySelector('.box');
        const $btn = document.querySelector('.btn');
        $btn.onclick = () => {
            $box.classList.toggle('hide');
        }
    </script>
</body>
</html>

버튼 클릭 시 hide가 클래스명에 추가되는데, CSS 파트에서 display:none 으로 지정한 경우 형식 자체까지 없어지면서 사라지고, opacity 를 조절하는 경우 형식 자체는 유지하면서 보이지만 않게 된다.

실습 7. overflow

Document

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer id hendrerit turpis. Donec malesuada nulla nec ornare rutrum. Sed ut libero eros. Donec vel orci ornare, rutrum velit nec, bibendum erat. Vestibulum suscipit lobortis eros nec ornare. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Fusce eu rhoncus libero. Nam accumsan efficitur nisi at ullamcorper. Sed et lectus elit. Ut pellentesque, augue sed pretium efficitur, ante eros cursus quam, vitae aliquam risus dui elementum diam. Vivamus risus nibh, dictum ac sapien scelerisque, commodo porttitor libero. Aenean augue sem, pharetra ut eros sed, pretium sollicitudin nisl. Morbi et mauris nisl. Fusce dapibus eu neque et porta. Morbi eget ante nec turpis tincidunt mattis sed ut enim. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean ante dui, aliquam eget mi et, malesuada hendrerit elit. Cras sit amet augue quis ipsum luctus egestas vel nec diam. Etiam molestie, justo ac dapibus egestas, justo est venenatis ex, ut sagittis turpis leo sed ligula. Vestibulum cursus elit eu urna rhoncus auctor. Maecenas luctus volutpat diam sit amet pulvinar. Praesent eget purus convallis, sollicitudin dui sit amet, gravida mauris. Nullam tempor, dui et lacinia fermentum, lectus mauris rutrum odio, ac scelerisque tellus nibh mattis arcu. Aenean arcu dolor, egestas nec leo ac, auctor molestie augue. Ut felis tellus, tincidunt eget facilisis ac, consequat nec lectus.

<!DOCTYPE html>
<html lang="ko">
<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>
    <style>
        .parent {
            width: 300px;
            height: 250px;
            border: 4px solid #000;
            overflow: auto;
        }
        .child {
            width: 100px;
            height: 200px;
            background:red;
            border: 4px solid orange;
            font-size: 40px;
        }
        .tx1 {
            border: 1px solid #777;
            width: 300px;
            height: 300px;
            overflow: auto;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child">1</div>
        <div class="child">2</div>
    </div>
    <hr>
    <p class="tx1">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer id hendrerit turpis. Donec malesuada nulla nec ornare rutrum. Sed ut libero eros. Donec vel orci ornare, rutrum velit nec, bibendum erat. Vestibulum suscipit lobortis eros nec ornare. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Fusce eu rhoncus libero. Nam accumsan efficitur nisi at ullamcorper. Sed et lectus elit. Ut pellentesque, augue sed pretium efficitur, ante eros cursus quam, vitae aliquam risus dui elementum diam.
Vivamus risus nibh, dictum ac sapien scelerisque, commodo porttitor libero. Aenean augue sem, pharetra ut eros sed, pretium sollicitudin nisl. Morbi et mauris nisl. Fusce dapibus eu neque et porta. Morbi eget ante nec turpis tincidunt mattis sed ut enim. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean ante dui, aliquam eget mi et, malesuada hendrerit elit. Cras sit amet augue quis ipsum luctus egestas vel nec diam. Etiam molestie, justo ac dapibus egestas, justo est venenatis ex, ut sagittis turpis leo sed ligula. Vestibulum cursus elit eu urna rhoncus auctor. Maecenas luctus volutpat diam sit amet pulvinar. Praesent eget purus convallis, sollicitudin dui sit amet, gravida mauris. Nullam tempor, dui et lacinia fermentum, lectus mauris rutrum odio, ac scelerisque tellus nibh mattis arcu. Aenean arcu dolor, egestas nec leo ac, auctor molestie augue. Ut felis tellus, tincidunt eget facilisis ac, consequat nec lectus.
    </p>
</body>
</html>

overflow 를 auto 로 지정하여 좌우 스크롤 없이 상하 스크롤만 있게 만듬

실습 8. 종합실습1

<!DOCTYPE html>
<html lang="ko">
<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>
    <style>
        section {
            font-size: 10px;
            width: 550px;
            border: 3px solid #123456;
            margin: 50px auto 0;
        }
        section h1 {
            font-size: 18px;
            text-align: center;
            border-bottom: 3px solid #123456;
            background-color: #abcdef;
            padding: 15px 0;
            margin: 0;
        }
        section article:nth-of-type(1) {
            border-bottom: 3px dotted #123456;
        }
        section article {
            padding: 10px;
        }
        section article h2 {
            font-size: 17px;
            font-weight: bold;
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
    <section>
        <h1>속 담 풀 이</h1>
        <article>
            <h2>말 한마디에 천냥 빚진다.</h2>
            <p>
                생각해보지 않고 나오는 대로 말하다가
                실수하면 상대의 마음에 아픔을 남기게 된다.
            </p>
        </article>
        <article>
            <h2>웃는 얼굴에 침 못 뱉는다.</h2>
            <p>
                호의적인 의사소통 방법은 자기 말만
                하는 것보다 좋은 결과로 이어진다.
            </p>
        </article>
    </section>
</body>
</html>

실습 9. 종합실습2

위와 같은 샘플 사이트 레이아웃을 보고 똑같이 만든다.

내 코드

<!DOCTYPE html>
<html lang="ko">
<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>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.min.css">
    <style>
        .box {
            background-color: black;
            height: 100px;
            line-height: 100px;
        }
        .menu {
            text-align: center;
        }
        .menu li {
            display: inline;
            margin: 20px;
        }
        .menu a {
            font-size: 20px;
            font-weight: bold;
            text-decoration: none;
            color: white;
        }
        .inner {
            margin: 100px;
        }
        img {
            width: 100%;
        }
    </style>
</head>
<body>
    <nav class="box">
        <ul class="menu">
            <li><a href="#">메뉴 1</a></li>
            <li><a href="#">메뉴 2</a></li>
            <li><a href="#">메뉴 3</a></li>
            <li><a href="#">메뉴 4</a></li>
        </ul>
    </nav>
    <section>
        <img src="./img/resource.jpg" alt="">
        <div class="inner">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ac dapibus urna, ut vulputate est. In interdum neque orci, dictum sagittis justo tempus quis. Vestibulum in tellus accumsan, fringilla eros quis, tempus tortor. Cras vel mi eleifend, venenatis nunc sed, lacinia lectus. Suspendisse molestie nisl ac est bibendum, ut imperdiet diam aliquam. Cras pellentesque auctor ante a ullamcorper. Quisque consectetur, nibh a pretium maximus, neque orci bibendum risus, eget convallis enim lorem quis arcu. Nunc nec felis ut diam pulvinar blandit at a augue. Aliquam blandit est lacus, accumsan eleifend tortor tristique a. Suspendisse eu imperdiet nulla. Nunc eget aliquet justo, finibus egestas odio. Praesent euismod blandit ex.
Phasellus in mollis tellus, at efficitur sem. Etiam pretium ipsum sem, in tristique tellus mollis eu. Phasellus ultrices tempor ultrices. Nulla aliquam arcu eget libero aliquet, at molestie enim commodo. Suspendisse eget arcu ligula. Aliquam volutpat arcu dui, ac vestibulum diam fermentum vel. Pellentesque id suscipit nisl, vitae iaculis mi. Suspendisse potenti. Etiam sodales blandit felis non viverra. Etiam tincidunt ligula sagittis dolor pharetra, vitae scelerisque lorem feugiat. Praesent risus nulla, porta nec nisl vitae, mattis volutpat lorem. In pretium quam non efficitur feugiat.
        </div>
    </section>
</body>
</html>

강사님 코드

<!DOCTYPE html>
<html lang="ko">
<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>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.min.css">
    <style>
        .box {
            background-color: black;
            text-align: center;
        }
        .menu li {
            display: inline-block;
            width: 100px;
            height: 100px;
            line-height: 100px;
        }
        .menu li a {
            color:white;
            font-size: 20px;
            font-weight: bold;
            text-decoration: none;
        }
        img {
            width: 100%;
        }
        .inner {
            width: 70%;
            margin: 100px auto 0;
        }
    </style>
</head>
<body>
    <nav class="box">
        <ul class="menu">
            <li><a href="#">메뉴 1</a></li>
            <li><a href="#">메뉴 2</a></li>
            <li><a href="#">메뉴 3</a></li>
            <li><a href="#">메뉴 4</a></li>
        </ul>
    </nav>
    <section>
        <img src="./img/resource.jpg" alt="bg">
        <div class="inner">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ac dapibus urna, ut vulputate est. In interdum neque orci, dictum sagittis justo tempus quis. Vestibulum in tellus accumsan, fringilla eros quis, tempus tortor. Cras vel mi eleifend, venenatis nunc sed, lacinia lectus. Suspendisse molestie nisl ac est bibendum, ut imperdiet diam aliquam. Cras pellentesque auctor ante a ullamcorper. Quisque consectetur, nibh a pretium maximus, neque orci bibendum risus, eget convallis enim lorem quis arcu. Nunc nec felis ut diam pulvinar blandit at a augue. Aliquam blandit est lacus, accumsan eleifend tortor tristique a. Suspendisse eu imperdiet nulla. Nunc eget aliquet justo, finibus egestas odio. Praesent euismod blandit ex.
Phasellus in mollis tellus, at efficitur sem. Etiam pretium ipsum sem, in tristique tellus mollis eu. Phasellus ultrices tempor ultrices. Nulla aliquam arcu eget libero aliquet, at molestie enim commodo. Suspendisse eget arcu ligula. Aliquam volutpat arcu dui, ac vestibulum diam fermentum vel. Pellentesque id suscipit nisl, vitae iaculis mi. Suspendisse potenti. Etiam sodales blandit felis non viverra. Etiam tincidunt ligula sagittis dolor pharetra, vitae scelerisque lorem feugiat. Praesent risus nulla, porta nec nisl vitae, mattis volutpat lorem. In pretium quam non efficitur feugiat.
        </div>
    </section>
</body>
</html>

6. 폰트

실습 1. line-height

<!DOCTYPE html>
<html lang="ko">

<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>
    <style>
        p {
            font-size: 20px;
            line-height: 2em;
        }
    </style>
</head>

<body>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ac dapibus urna, ut vulputate est. In interdum
        neque orci, dictum sagittis justo tempus quis. Vestibulum in tellus accumsan, fringilla eros quis, tempus
        tortor. Cras vel mi eleifend, venenatis nunc sed, lacinia lectus. Suspendisse molestie nisl ac est bibendum, ut
        imperdiet diam aliquam. Cras pellentesque auctor ante a ullamcorper. Quisque consectetur, nibh a pretium
        maximus, neque orci bibendum risus, eget convallis enim lorem quis arcu. Nunc nec felis ut diam pulvinar blandit
        at a augue. Aliquam blandit est lacus, accumsan eleifend tortor tristique a. Suspendisse eu imperdiet nulla.
        Nunc eget aliquet justo, finibus egestas odio. Praesent euismod blandit ex.

        Phasellus in mollis tellus, at efficitur sem. Etiam pretium ipsum sem, in tristique tellus mollis eu. Phasellus
        ultrices tempor ultrices. Nulla aliquam arcu eget libero aliquet, at molestie enim commodo. Suspendisse eget
        arcu ligula. Aliquam volutpat arcu dui, ac vestibulum diam fermentum vel. Pellentesque id suscipit nisl, vitae
        iaculis mi. Suspendisse potenti. Etiam sodales blandit felis non viverra. Etiam tincidunt ligula sagittis dolor
        pharetra, vitae scelerisque lorem feugiat. Praesent risus nulla, porta nec nisl vitae, mattis volutpat lorem. In
        pretium quam non efficitur feugiat.
    </p>
</body>

</html>

misung

이전 포스트

데이터융합 JAVA응용 SW개발자 기업 채용연계 연수과정 20일차 강의 정리

다음 포스트

데이터융합 JAVA응용 SW개발자 기업 채용연계 연수과정 22일차 강의 정리