[HTML, CSS] 기초문법과 실습

⌨️/HTML, CSS

[HTML, CSS] 기초문법과 실습

S0 2023. 12. 20. 22:28

사전캠프 기간에 지급된 강의지만 저는 본과정 직전에 합류했기 때문에 천천히 따라가고 있는 중입니다!

내일배움캠프: Node.js_4기

사전캠프 TIL

웹브라우저의 작동 원리

나(=클라이언트)는 서버에 네이버를 띄워달라고 요청한다

여기서 말하는 요청이란 https://www.naver.com/ 를 검색창에 입력하는 방식

그럼 서버는 나에게 미리 준비한 네이버의 코드들을 구현해서 보여준다

HTML 기초

HTML이란? 웹에서 보여지는 부분의 뼈대를 작성할 수 있는 언어

<head> </head> 안에는 눈에 보이지 않는 정보들을 담는다

<body> </body> 안에는 눈에 보이는 부분(웹페이지의 내용)들을 작성한다

<!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>Document</title>
</head>
<body>
    <div class="wrap">
        <div class="mytitle">
            <h1>로그인 페이지</h1>
            <h5>아이디, 비밀번호를 입력해주세요</h5>
        </div>
        <p>ID: <input type="text" /></p>
        <p>PW: <input type="text" /></p>
        <button>로그인하기</button>
    </div>
</body>
</html>

.hml 파일 생성 -> html:5 혹은 ! 이용하여 기본코드 자동완성

h1 태그로 제목 작성

h5 태그로 부가설명 작성

p 태그를 이용하여 아이디와 비밀번호 작성 칸을 마련

p 태그 안에 input 태그로 입력까지 가능하도록 구현

button 태그로 제출 버튼 구현

CSS 기초

CSS란? HTML로 작성된 웹페이지의 뼈대에 스타일을 입힐 수 있는 언어

.css 파일을 따로 만들거나, html 문서의 <head></head> 안에 <style></style>로 공간을 만들어 작성

html 태그 자체, 혹은 html 태그에 class를 이용하여 해당 태그만 적용 가능한 이름을 부여한 후 css를 이용하여 꾸며준다

<style>
        @import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic&display=swap');

        * {
            font-family: 'Nanum Gothic', sans-serif; 
        }
        .mytitle {
            width: 300px;
            height: 200px;

            color: white;
            text-align: center;

            padding-top: 30px;
            border-radius: 8px;
            
            background-image: url('https://www.ancient-origins.net/sites/default/files/field/image/Agesilaus-II-cover.jpg');
            background-position: center;
            background-size: cover;
        }
        .wrap {
            width: 300px;
            margin: 50px auto 0px auto;
        }
    </style>

head 내에 작성한 css 코드

이번 실습을 통해 margin, padding, background-color, background-image, background-position, color, width, height, border-radius, font-size 등을 학습할 수 있었다.

<!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=Nanum+Gothic&display=swap');

        * {
            font-family: 'Nanum Gothic', 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;
        }
        .mypostingbox {
        width: 500px;
        margin: 30px auto 0 auto;
        padding: 20px;
        box-shadow: 0px 0px 3px 0px gray;
        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-primary">기록하기</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, css 코드와 구글폰트, 부트스트랩을 활용하여 추억앨범 웹페이지를 만드는 과제를 수행했다.

(+ 231221)

2주차 강의에서 자체적으로 복습 예제를 준비해주셨다.

<!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=Nanum+Gothic&display=swap');

        * {
            font-family: 'Nanum Gothic', sans-serif; 
        }
        .main {
            color: white;

            background-image: url('https://occ-0-1123-1217.1.nflxso.net/dnm/api/v6/6AYY37jfdO6hpXcMjf9Yu5cnmO0/AAAABeIfo7VL_VDyKnljV66IkR-4XLb6xpZqhpLSo3JUtbivnEW4s60PD27muH1mdaANM_8rGpgbm6L2oDgA_iELHZLZ2IQjG5lvp5d2.jpg?r=e6e.jpg');
            background-position: center;
            background-size: cover;
        }
        body {
            background-color: black;
        }
        .mycards {
            width: 1200px;
            margin: 20px auto 20px auto;
        }
        .mypostingbox {
            width: 500px;
            margin: 20px auto 20px auto;
            
            border:  1px solid white;
            padding: 20px;
            border-radius: 5px;
        }
        .form-floating > input {
            background-color: transparent;
            color: white;
        }
        .form-floating > label {
            background-color: transparent;
            color: white;
        }
        .input-group > label {
            background-color: transparent;
            color: white;
        }
        .mypostingbox > button {
            width: 100%;
        }
    </style>
</head>
<body>
    <header class="p-3 text-bg-dark">
        <div class="container">
            <div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
                <a href="/" class="d-flex align-items-center mb-2 mb-lg-0 text-white text-decoration-none">
                <svg class="bi me-2" width="40" height="32" role="img" aria-label="Bootstrap"><use xlink:href="#bootstrap"></use></svg>
                </a>
        
                <ul class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0">
                    <li><a href="#" class="nav-link px-2 text-danger">spartaflix</a></li>
                    <li><a href="#" class="nav-link px-2 text-white">홈</a></li>
                    <li><a href="#" class="nav-link px-2 text-white">시리즈</a></li>
                    <li><a href="#" class="nav-link px-2 text-white">영화</a></li>
                    <li><a href="#" class="nav-link px-2 text-white">내가 찜한 콘텐츠</a></li>
                </ul>
        
                <form class="col-12 col-lg-auto mb-3 mb-lg-0 me-lg-3" role="search">
                <input type="search" class="form-control form-control-dark text-bg-dark" placeholder="Search..." aria-label="Search">
                </form>
        
                <div class="text-end">
                    <button type="button" class="btn btn-outline-light me-2">Login</button>
                    <button type="button" class="btn btn-danger">Sign-up</button>
                </div>
            </div>
        </div>
    </header>
    <div class="main">
        <div class="p-5 mb-4 bg-body-tertiary rounded-3">
            <div class="container-fluid py-5">
                <h1 class="display-5 fw-bold">킹덤</h1>
                <p class="col-md-8 fs-4">병든 왕을 둘러싸고 흉흉한 소문이 떠돈다. 어둠에 뒤덮인 조선, 기이한 역병에 신음하는 산하. 정체 모를 악에 맞서 백성을 구원할 희망은 오직 세자뿐이다.</p>
                <button type="button" class="btn btn-outline-light">영화 기록하기</button>
                <button type="button" class="btn btn-outline-light">상세정보</button>
            </div>
        </div>
    </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="input-group mb-3">
            <label class="input-group-text" for="inputGroupSelect01">별점</label>
            <select class="form-select" id="inputGroupSelect01">
                <option selected>별점 선택</option>
                <option value="1">⭐</option>
                <option value="2">⭐⭐</option>
                <option value="3">⭐⭐⭐</option>
                <option value="4">⭐⭐⭐⭐</option>
                <option value="5">⭐⭐⭐⭐⭐</option>
            </select>
        </div>
        <div class="form-floating mb-3">
            <input type="email" class="form-control" id="floatingInput" placeholder="영화 추천 이유">
            <label for="floatingInput">영화 추천 이유</label>
        </div>
        <button type="button" class="btn btn-danger">기록하기</button>
    </div>
    <div class="mycards">
        <div class="row row-cols-1 row-cols-md-4 g-4">
            <div class="col">
                <div class="card">
                    <img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg" class="card-img-top" alt="더 수어사이드 스쿼드 포스터 이미지">
                    <div class="card-body">
                        <h5 class="card-title">영화 제목</h5>
                        <p class="card-text">⭐⭐⭐</p>
                        <p class="card-text">영화 코멘트</p>
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="card">
                    <img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg" class="card-img-top" alt="더 수어사이드 스쿼드 포스터 이미지">
                    <div class="card-body">
                        <h5 class="card-title">영화 제목</h5>
                        <p class="card-text">⭐⭐⭐</p>
                        <p class="card-text">영화 코멘트</p>
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="card">
                    <img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg" class="card-img-top" alt="더 수어사이드 스쿼드 포스터 이미지">
                    <div class="card-body">
                        <h5 class="card-title">영화 제목</h5>
                        <p class="card-text">⭐⭐⭐</p>
                        <p class="card-text">영화 코멘트</p>
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="card">
                    <img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg" class="card-img-top" alt="더 수어사이드 스쿼드 포스터 이미지">
                    <div class="card-body">
                        <h5 class="card-title">영화 제목</h5>
                        <p class="card-text">⭐⭐⭐</p>
                        <p class="card-text">영화 코멘트</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

부트스트랩을 중점적으로 활용하며 여백 설정(margin, padding), 색상 변경(background-color, color), 이미지 삽입(img url), 입력 구역 구현(button, input, select) 등을 복습

저작자표시

'⌨️ > HTML, CSS' 카테고리의 다른 글

[CSS] 속성 - position (0)	2021.01.13
[CSS] 속성 - 텍스트 처리 (0)	2021.01.13
[CSS] 속성 - border (0)	2021.01.13
[CSS] 문서 구조 선택자 (0)	2021.01.13
[HTML] 시멘틱 요소 (0)	2021.01.13

현재글[HTML, CSS] 기초문법과 실습

개발하세영

스파르타내일배움캠프, 스파르타내일배움캠프TIL, 내일배움캠프,

Today :
Yesterday :

개발하세영