#1. 웹개발 기초

내일배움캠프 학습/HTML

by 남민우_ 2024. 10. 28. 22:22

웹 브라우저 작동 원리

예를 들어, naver.com 을 통해 사이트로 들어가면, 해당 주소에서 데이터를 받아 우리 컴퓨터의 브라우저로 받아온다.

클라이언트는 데이터를 요청, 서버는 데이터를 제공하는 방식으로 브라우저의 작동이 이루어진다.

구성은

1. HTML : 뼈대의 역할

2. CSS : 꾸미기의 역할

3. JavaScript : 웹페이지의 움직임 역할

로 되어 있다.

이번에 진행한 강의에서는 개발 환경으로 'VSCode'를 사용하였다.

HTML

HTML은 웹페이지의 모습을 구성하기 위한 언어로, 크게 Head 와 Body 로 나뉜다.

Head 에는 Body 에 들어가지 않는 모든 부분을 담당하며 CSS 와 JS도 이에 속한다.

Body 는 눈에 보이는 부분을 구성하며, 웹 페이지의 여러 배치, 디자인, 글귀 등 페이지의 구성 요소를 작성한다.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <p>Hello, artists!</p>
    </body>
</html>

CSS

웹페이지의 꾸미기를 담당한다.

글꼴의 폰트, 크기, 색 등 페이지의 디자인을 모두 구성한다.

이때 직접 디자인을 하기에는 어려움이 있는데, HTML은 특히 다른 사람들이 만들어 놓은 코드를 자주 이용한다고 한다.

CSS의 영역에서 이미 만들어진 CSS 코드를 사용하는 사이트로는 '부트 스트랩' 이 있다.

https://getbootstrap.com/docs/5.3/components/buttons/

Buttons

Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.

getbootstrap.com

첫주차 전체 실습을 진행한 코드는 다음과 같다.

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

<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>나만의 추억 앨범</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

    <style>
        @import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');

        * {
            font-family: "Raleway", sans-serif;
        }

        .myTitle {
            height: 250px;
            color: white;

            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;

            background-image: url('https://images.unsplash.com/photo-1511992243105-2992b3fd0410?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80');
            background-position: center;
            background-size: cover;
        }

        .myTitle>button {
            width: 150px;
            height: 50px;
            background-color: transparent;
            color: white;
            border: 1px solid white;
            border-radius: 5px;

            margin-top: 20px;
        }

        .myCards {
            width: 1200px;

            margin: 30px auto 0px auto;
        }

        .myPostBox
        {
            width : 500px;
            margin: 30px auto 0px auto;
            padding : 20px;
            box-shadow: 0px 0px 3px 0px blue;
            border-radius: 5px;
        }

        .myButton
        {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
        }
        .myButton > button
        {
            margin-right: 5px;
        }
    </style>
</head>

<body>
    <div class="myTitle">
        <h1>나만의 추억 앨범</h1>
        <button>추억 저장하기</button>
    </div>
    <div class="myPostBox">
        <div class="form-floating mb-3">
            <input type="email" class="form-control" id="floatingInput" placeholder="앨범 이미지">
            <label for="floatingInput">앨범 이미지</label>
        </div>
        <div class="form-floating mb-3">
            <input type="email" class="form-control" id="floatingInput" placeholder="앨범 이미지">
            <label for="floatingInput">앨범 제목</label>
        </div>
        <div class="form-floating mb-3">
            <input type="email" class="form-control" id="floatingInput" placeholder="앨범 이미지">
            <label for="floatingInput">앨범 내용</label>
        </div>
        <div class="form-floating mb-3">
            <input type="email" class="form-control" id="floatingInput" placeholder="앨범 이미지">
            <label for="floatingInput">앨범 날짜</label>
        </div>
        <div class = "myButton"> 
            <button type="button" class="btn btn-dark">기록하기</button>
            <button type="button" class="btn btn-outline-dark">닫기</button>
        </div>
    </div>

    <div class="myCards">
        <div class="row row-cols-1 row-cols-md-4 g-4">
            <div class="col">
                <div class="card h-100">
                    <img src="https://images.unsplash.com/photo-1446768500601-ac47e5ec3719?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1446&q=80"
                        class="card-img-top" alt="...">
                    <div class="card-body">
                        <h5 class="card-title">앨범 제목</h5>
                        <p class="card-text">앨범 내용</p>
                    </div>
                    <div class="card-footer">
                        <small class="text-body-secondary">앨범 날짜</small>
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="card h-100">
                    <img src="https://images.unsplash.com/photo-1446768500601-ac47e5ec3719?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1446&q=80"
                        class="card-img-top" alt="...">
                    <div class="card-body">
                        <h5 class="card-title">앨범 제목</h5>
                        <p class="card-text">앨범 내용</p>
                    </div>
                    <div class="card-footer">
                        <small class="text-body-secondary">앨범 날짜</small>
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="card h-100">
                    <img src="https://images.unsplash.com/photo-1446768500601-ac47e5ec3719?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1446&q=80"
                        class="card-img-top" alt="...">
                    <div class="card-body">
                        <h5 class="card-title">앨범 제목</h5>
                        <p class="card-text">앨범 내용</p>
                    </div>
                    <div class="card-footer">
                        <small class="text-body-secondary">앨범 날짜</small>
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="card h-100">
                    <img src="https://images.unsplash.com/photo-1446768500601-ac47e5ec3719?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1446&q=80"
                        class="card-img-top" alt="...">
                    <div class="card-body">
                        <h5 class="card-title">앨범 제목</h5>
                        <p class="card-text">앨범 내용</p>
                    </div>
                    <div class="card-footer">
                        <small class="text-body-secondary">앨범 날짜</small>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

'내일배움캠프 학습 > HTML' 카테고리의 다른 글

방명록 만들기 (0)	2024.10.30
#5. 웹페이지 배포 (1)	2024.10.29
#4. FireBase 활용 (1)	2024.10.29
#3. JS 실습 (2)	2024.10.28
#2. JavaScript 활용 (3)	2024.10.28