기만나🐸의 공부 기록

사전 캠프 동안은 웹 개발과 SQL 강의를 들으며 기초를 단단히 하고

알고리즘 문제 풀이를 하려고 한다!

🤖 사전 캠프 1일차 진행 사항 🤖

웹개발 종합반 1주차 수업
- 1-1 ~ 1-12

웹개발 종합반 1주차 수업

1. 웹 브라우저 작동 원리

브라우저는 클라이언트의 요청(Request)을 보내고 서버의 응답(Response)을 브라우저에 띄우는 방식으로 동작한다.

2. 로그인 페이지 만들기

2-1. 본문 작성

<body>
	
    <!-- 이미지가 첨부될 div -->
    <div class="mytitle">
        <h1>로그인 페이지</h1>
        <h5>아이디, 비밀번호를 입력해주세요.</h5>
    </div>

    <!-- input 박스 -->
    <p>ID : <input type="text"></p>
    <p>PW : <input type="password"></p>

    <!-- 로그인 버튼 -->
    <button>login</button>

    <br />
    <p>vscode에서 html 자동 줄맞춤은 <b>alt + shift + f</b></p>

</body>

2-2. CSS

이미지가 첨부될 div에 "mytitle"이라는 class를 지정하고 style태그에 아래 내용을 추가한다.

.mytitle {
	/*박스 크기 지정*/
	width: 300px;
	height: 200px;
    
	/*상단 간격 지정*/
	padding-top: 30px;
    
	/*박스 모서리를 둥글게*/
	border-radius: 8px;

	/*박스 안의 글자 색깔, 정렬*/
	color: white;
	text-align: center;
	
	/*박스 내 이미지 삽입*/
	background-image: url('https://www.ancient-origins.net/sites/default/files/field/image/Agesilaus-II-cover.jpg');
	background-position: center;
	background-size: cover;
}

* 박스 내 이미지 삽입은 이미지 url과 position, size를 지정해야 한다. 3개를 세트로 생각하면 쉬움

작성한 본문 전체를 가운데로 정렬하기 위해 본문 내용을 감싸는 div를 추가하고 "wrap" class 지정.

.wrap {
	width: 300px;
	margin: 50px auto 0px auto;
}

* 전체 크기를 지정하고 margin에서 좌우 값을 auto로 주면 가운데 정렬이 된다.

2-3. 구글 폰트

https://fonts.google.com/specimen/Jua?lang=ko_Kore

Jua - Google Fonts

Jua is a Korean and Latin font

fonts.google.com

구글 폰트에서 원하는 폰트를 고른 후, 아래 절차를 따라 style 태그에 내용을 추가하면 적용이 가능하다.

@import url('https://fonts.googleapis.com/css2?family=Jua&display=swap');

* { /*모든 글씨에 해당 폰트 적용*/
	font-family: "Jua", sans-serif;
	font-weight: 400;
	font-style: normal;
}

3. 추억앨범 프로젝트

3-1. 부트스트랩

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

Cards

Bootstrap’s cards provide a flexible and extensible content container with multiple variants and options.

getbootstrap.com

원하는 카드를 골라 HTML을 복사하여 본문에 추가하여 사용하면 된다.

HTML과 CSS를 활용하여 아래와 같은 페이지를 생성할 수 있다.

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

<head>
    <meta charset="UTF-8">
    <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=Jua&display=swap');

        * {
            font-family: "Jua", sans-serif;
            font-weight: 400;
            font-style: normal;
        }

        .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;
            margin-top: 20px;
        }

        .mycards {
            width: 1200px;
            margin: 30px auto 0px auto;
        }

        .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="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="mybtn">
            <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>

* 박스 안의 내용물 가운데 정렬

- display: flex; ==> 디스플레이 유형 지정

- flex-direction: row 또는 column; ==> 배치 방향 지정

- align-items: center; ==> 수직 정렬

- jistify-content: center; ==> 수평 정렬

생각보다 TIL 작성에 시간이 오래 걸린다. 꾸준히 작성해서 익숙해져야 할 듯!

저작자표시 비영리 변경금지 (새창열림)

'TIL (Today I Learned)' 카테고리의 다른 글

[TIL] NoSQL_Firebase 설정/적용하기, Github로 배포하기 (24-12-13) (1)	2024.12.13
[TIL] JSON과 javascript fetch함수, Bootstrap 및 Google fonts 적용 과제 (24-12-12) (2)	2024.12.12
[TIL] MySQL SELECT 기초, JQuery 활용 (24-12-11) (2)	2024.12.11
[TIL] Bootstrap 복습, Javascript와 JQuery 기초 (24-12-10) (1)	2024.12.10
[내일배움캠프 Spring_5기] 스타터 노트 (2)	2024.12.09

[TIL] HTML과 CSS (24-12-09)

웹개발 종합반 1주차 수업

'TIL (Today I Learned)' 카테고리의 다른 글

티스토리툴바