[디자인부트캠프] 웹 구조 및 서비스 데이터 추적_4

지세은·2025년 6월 30일

디자인부트캠프

목록 보기

48/51

#오즈코딩스쿨 #디자이너부트캠프 #국비지원

VOD 정리

CSS(Cascading Style Sheets)

cascading: 폭포처럼 흐르는, 연쇄적인

인라인 스타일

• HTML 태그 안에 style 속성으로 직접 스타일을 작성.

내부 스타일

• style 태그를 head 안에 작성.

외부 스타일

• .css 확장자를 가진 별도의 CSS 파일에 스타일 정의.
• link 태그로 HTML 문서와 연결.

Display inline block

div와 span을 혼용하여 사용하면 블럭 크기도 지정할 수 있고, 블럭들이 옆으로 붙는다.

block - div - 블럭 크기 지정 가능, 블럭이 아래로 붙는다.
inline - span - 블럭 크기 지정 x, 블럭이 옆으로 붙는다,

href="#"는 클릭했을 때 아무 곳으로도 이동하지 않도록 임시로 사용하는 링크예요.

Float

float 속성은 요소를 좌우로 띄워서 배치할 수 있게 해요.
• .float-left: 해당 요소를 왼쪽에 붙게 만들어요.
• .float-right: 해당 요소를 오른쪽에 붙게 만들어요.

clear: both;는 좌우에 float된 요소 다음에 오는 요소가 float 요소 아래로 내려가게 해줘요.

Position

margin:0 autio; -상하는 마진0, 좌우는 오토로 알아서 맞춰줘.

과제

display inline block

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Display inline block</title>
    <style>
        div,
        h2{ border: 1px solid black;
            /*display: none;*/
            /*visibility: hidden;*/
            width: 100px;
            height: 100px;
        }

        span, a {
            border: 1px solid blue;
        }

        article > div,
        article > span {
            display: inline-block;
            width: 100px;
            height: 100px;
        }

    </style>

</head>
<body>
    <!-- 블록요소 -->
    <h1>display block</h1>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <h2>title</h2>

    <h1>display inline</h1>
    <span>content</span>
    <span>content</span>
    <span>content</span>
    <span>content</span>
    <a href="a">naver</a> 

    <article>
        <h1>display inline block</h1>
        <div>content</div>
        <div>content</div>
        <div>content</div>
        <span>content</span>
        <span>content</span>
        <span>content</span>
        <span>content</span>
        <a href="a">naver</a>
    </article>
</body>
</html>

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>nav bar</title>
    <style>
        *{
            padding: 0;
            margin: 0;
            text-decoration: none;
            list-style: none;
        }

        nav {
            background-color: rgb(135, 182, 224);
            width: 100%;
            height: 80px;
        }

        nav li {
            /*border: 1px solid white;*/
            display: inline-block;
            margin:0 8px;
            line-height: 80px;
        }

        nav a {
            color: white;
            font-size: 20px;
            text-transform: uppercase;
            padding: 10px;
        }

        a.active,
        a:hover {
            border:1px solid white;

        }
    </style>
</head>
<body>
    <nav>
        <ul>
            <li><a href="#" class="active">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Service</a></li>
            <li><a href="#">Contact</a></li>
            <li><a href="#">Feedback</a></li>
        </ul>
    </nav>
</body>
</html>

float

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Float</title>
    <style>
        .container {
            width: 600px;
            border: 1px solid black;

        }

        img{
            width:300px;

        }
        .float-left {
            float: left;
        }

        .float-right {
            float: right;
        }

        .clear {
            clear: both;
        }
    </style>
</head>
<body>
    <div class="container">
        <img class="float-left" src="images/cafe.jpg" alt="cafe">
        <p>
        하루의 피로를 녹이는 건, 한 조각의 케이크일지도 몰라.
        </p>

        <img class="float-right" src="images/cafe.jpg" alt="cafe">
        <p>
        하루의 피로를 녹이는 건, 한 조각의 케이크일지도 몰라.
        </p>


        <p class="clear">
        하루의 피로를 녹이는 건, 한 조각의 케이크일지도 몰라.
        </p>
    </div>
</body>
</html>

position

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Position</title>
    <style>
        main, section, article, div {
            border: 1px solid black;
            padding: 20px;
        }

        main {
            max-width: 600px;
            margin: 0 auto;
            background-color: yellowgreen;
        }

        section {
            background-color: lightblue;
        }

        article {
            background-color: lightcoral;
        }

        div {
            background-color: white;
        }

        div.relative {
            position: relative;
            right: 10px; 0px;
        }
    </style>
</head>
<body>
    <main>
        main
        <section>
            section
            <article>
                <div>static</div>
                <div class="relative">relative</div>
                <div>absolute</div>
                <div>fixed</div>
                <div>sticky</div>

            </article>
        </section>
    </main>
</body>
</html>