본문 바로가기
내일배움캠프(Sparta)/웹개발 A to Z

[웹개발 A to Z] 1주차 (HTML, CSS)

by mmm- 2023. 9. 7.

웹개발

: 홈페이지(웹 페이지) 만드는 기술

 

1. 웹 브라우저 작동 원리

브라우저의 역할

1. 요청 보내기

2. 요청 받은 것 그려주기

 

요청은 어디에 보낼까?

>> 서버가 만들어 놓은 API라는 창구에 미리 정해진 약속대로 요청을 보낸다.

 

이렇게 API에 요청을 보내게 되면 API는 요청에 맞는 HTML 파일을 돌려주고 브라우저는 받은 것을 화면에 그려주게 된다.

 

OO지점 XX은행 창구에 요청을 보내는 것이라고 생각하면 된다.

 

예를 들면,

https://naver.com/ 의 경우, naver.com 이라는 이름의 서버에 있는 "/"라는 주소 창구에 요청을 보내게 되면 "/"라는 주소 창구는 받은 요청에 따른 데이터를 브라우저에게 보내주게 되기 때문에 우리에게 네이버의 메인화면이 보여지게 되는 것이다.

2. HTML 기초

프론트엔드(frontend) - 눈에 보이는 부분

백엔드(backend) - 눈에 보이지 않는 부분

 

HTML - 뼈대

CSS - 꾸미기

Javascript - 움직임

 

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>스파르타코딩클럽 | HTML 기초</title>
</head>

<body>
    <!-- 구역을 나누는 태그들 -->
    <div>나는 구역을 나누죠</div>
    <p>나는 문단이에요</p>
    <ul>
        <li> bullet point!1 </li>
        <li> bullet point!2 </li>
    </ul>

    <!-- 구역 내 콘텐츠 태그들 -->
    <h1>h1은 제목을 나타내는 태그입니다. 페이지마다 하나씩 꼭 써주는 게 좋아요. 그래야 구글 검색이 잘 되거든요.</h1>
    <h2>h2는 소제목입니다.</h2>
    <h3>h3~h6도 각자의 역할이 있죠. 비중은 작지만..</h3>
    <hr>
    span 태그입니다: 특정 <span style="color:red">글자</span>를 꾸밀 때 써요
    <hr>
    a 태그입니다: <a href="http://naver.com/"> 하이퍼링크 </a>
    <hr>
    img 태그입니다: <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" />
    <hr>
    input 태그입니다: <input type="text" />
    <hr>
    button 태그입니다: <button> 버튼입니다</button>
    <hr>
    textarea 태그입니다: <textarea>나는 무엇일까요?</textarea>
</body>

</html>

 

로그인 페이지 만들기

<!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>
</head>
<body>
    <h1>로그인 페이지</h1>
    <p>ID: <input type="text" /></p> 
    <p>PW: <input type="text" /></p> 
    <button>로그인하기</button>
</body>
</html>

3. CSS 기초

html 태그는 감싸고 있는 태그에 따라 그 안의 내용물도 바뀌게 된다.

CSS로 꾸미기 위해서는 <head>태그 안에 <style>태그로 공간을 만들어 그곳에서 작성을 해주면 된다.

 

같은 태그가 여러 개 일 때 그 중 특정 하나만 꾸며주고 싶다면?

>> class를 통해 특정 태그를 가리킬 수 있다.

 

로그인 페이지 꾸미기

<!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>
    <style>
        .mytitle {
            color: red;
        }

        .mybtn {
            height: 30px;
            background-color: beige;

            border: 1px solid black;
            border-radius: 7px;
        }


    </style>
</head>
<body>
    <h1 class="mytitle">로그인 페이지</h1>
    <p>ID: <input type="text" /></p> 
    <p>PW: <input type="text" /></p> 
    <button class="mybtn">로그인하기</button>
</body>
</html>

 

 

로그인페이지 꾸미기

div태그를 가운데 정렬할 때는 margin: auto;를 해주면 된다

<!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>
    <style>
        .wrap {
            width: 300px;
            margin:  20px auto 0px auto;
        }

        .mytitle {
            width: 300px;
            height: 200px;

            color: white;
            text-align: center;

            background-image: url('https://img.freepik.com/free-photo/night-sky-with-lot-of-shiny-stars-with-blurred-mountain-background_1258-84795.jpg');
            background-position: center;
            background-size: cover;

            border-radius: 7px;
            padding-top: 30px;

        }

        .mybtn {
            height: 30px;
            background-color: beige;

            border: 1px solid black;
            border-radius: 7px;
        }


    </style>
</head>
<body>
    <div class="wrap"> 
        <div class="mytitle">
            <h1>로그인 페이지</h1>
            <p>아이디, 비밀번호를 입력해주세요</p>
        </div>
        <p>ID: <input type="text" /></p> 
        <p>PW: <input type="text" /></p> 
        <button class="mybtn">로그인하기</button>
    </div>
</body>
</html>

4. [추억앨범] 프로젝트

 

구글 폰트 적용 방법

1. https://fonts.google.com/?subset=korean

2. 마음에 드는 폰트 선택

3. Select Regular 400 이런식으로 적혀있는 것 클릭

4. @import 클릭

5. style 태그 사이에 있는 부분 드래그 후 VS Code로 돌아와 style태그 안에 복붙 (폰트 가져오기)

6. CSS rules to specify families 부분에 있는 것 복사해서 붙여넣기 (폰트 적용)

 

 

부트스트랩

: 다른 사람이 만들어 놓은 예쁜 CSS 꾸러미

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

↑ 

<head>안에 넣어주면 Bootstrap 라이브러리의 CSS 기능을 사용할 수 있게 된다.

 

<!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">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

    <title>나만의 추억앨범</title>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap');

        * {
            font-family: 'Gowun Dodum', 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 {
            margin: 30px auto 0px auto;
            width: 1200px;
        }

        .mypostingbox {
            width: 500px;

            margin: 30px auto 0px auto;
            padding: 20px;
            box-shadow: 0px 0px 3px 0px blue;
            border-radius: 5px;
        }

        .mybtn {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
        }

        .mybtn>button {
            margin-right: 5px;
        }
    </style>
</head>

<body>
    <div class="mytitle">
        <h1>나만의 추억앨범</h1>
        <button>추억 저장하기</button>
    </div>

    <div class="mypostingbox">
        <div class="form-floating mb-3">
            <input type="email" class="form-control" id="image" placeholder="앨범 이미지">
            <label for="floatingInput">앨범 이미지</label>
        </div>
        <div class="form-floating mb-3">
            <input type="email" class="form-control" id="title" placeholder="앨범 제목">
            <label for="floatingInput">앨범 제목</label>
        </div>
        <div class="form-floating mb-3">
            <input type="email" class="form-control" id="content" placeholder="앨범 내용">
            <label for="floatingInput">앨범 내용</label>
        </div>
        <div class="form-floating mb-3">
            <input type="email" class="form-control" id="date" placeholder="앨범 날짜">
            <label for="floatingInput">앨범 날짜</label>
        </div>
        <div class="mybtn">
            <button id="postingbtn" type="button" class="btn btn-primary">기록하기</button>
            <button type="button" class="btn btn-outline-primary">닫기</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>

 

  • 배경색을 투명으로 주고 싶다면 background-color: transparent; 를 해주면 된다.
  • div태그를 정렬하고 싶을 때는 margin: auto; 를 해주면 되고, 내용물을 정렬하고 싶을 때는 
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;

이와 같이 적어주면 된다. 항상 헷갈렸었는데 확실하게 알게 됐다!

  • alt + shift + f 를 누르면 코드 줄이 정리된다. 그것도 모르고 여태까지 하나하나 손으로 했네,,^^

'내일배움캠프(Sparta) > 웹개발 A to Z' 카테고리의 다른 글

[웹개발 A to Z] 5주차 (배포, 깃허브)  (0) 2023.09.08
[웹개발 A to Z] 4주차 (Firebase, Firestore)  (0) 2023.09.08
[웹개발 A to Z] 3주차 (Fetch)  (0) 2023.09.08
[웹개발 A to Z] 2주차 (JS, JQuery)  (0) 2023.09.08

관련글

티스토리툴바