[WEB] HTML, CSS 기초

Web 2022. 2. 27. 01:27

스파르타 코딩클럽 웹개발 종합반을 수강 1주차

수업 첫 시작은 간단한 html 기초를 배웠다. 이미 스파르타 코딩클럽 무료 기초강의를 통해 배운내용이라 편하게 들을 수 있었다.

<!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>

다음은 로그인 페이지를 만들어보았는데, 이때는 css적용까지 해봤다.

이것도 기초강의를 통해 미리배워서 편하게 들을 수 있었다. 스파르타 코딩클럽은 무료 기초강의가 잘 되어있는것같다.

르탄즈 2기 활동을 하며 html, css, javascript까지는 무료로 제공해주는 강의를 통해 쉽게 배웠던 것 같다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>로그인 페이지</title>
    <link href="https://fonts.googleapis.com/css2?family=Jua&display=swap" rel="stylesheet">
<!--    <link rel="stylesheet" type="text/css" href = "(css파일이름).css"> : css 파일 분리-->
    <style>
        *{
            /*ctrl+/ : 주석처리*/
            font-family: 'Jua', sans-serif;
        }
         /*ctrl+alt+l : 줄맞춤*/
         .mytitle{
             background-color:green;

             width:300px;
             height:200px;

             color:white;

             text-align : center;

             /*세줄을 같이씀!, 배경넣기*/
             background-image:url("https://www.ancient-origins.net/sites/default/files/field/image/Agesilaus-II-cover.jpg");
             background-size : cover;
             background-position : center;

             border-radius:10px;

             /*padding : 안쪽여백, margin : 바깥쪽여백*/
             padding-top:40px;
         }
         /*객체 가운데정렬 = 양쪽여백이 같아지는것*/
         .wrap{
             width:300px;
             margin :auto;
         }
    </style>
</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>

중간중간 수업을 들으며 필요한 내용은 주석처리를 통해 코드에 달아두었다.

코드가 어떤의미가 있는지, 그리고 세트로 사용되는애들은 묶어서 정리해두었다.

간단한 로그인 페이지 결과화면

스파르타 코딩클럽 강의는 좋은점이 꿀팁같은것을 많이 알려준다.

초보자들이 듣기에는 기초를 잡기 좋은것같다.

구글 폰트 이용하는 부분이 좋았는데,

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

Google Fonts

Making the web more beautiful, fast, and open through great typography

fonts.google.com

폰트가 다양하게 있어서 수업들을때는 내가 하고싶은 폰트를 사용했었다.

기록해두고 나중에 웹페이지 만들때 써먹으면 좋을듯?

http://spartacodingclub.shop/web/movie

스파르타 피디아

더 수어사이드 스쿼드 살고 싶다면 무조건 성공시켜라!최강 우주 빌런에 맞선, 자살특공대에게 맡겨진 ‘더’ 대책 없는 작전.... ⭐⭐⭐

spartacodingclub.shop

1주차부터 5주차까지 다 수강하게 되면 최종적으로 만들게 되는 결과물!

근데 아직 1주차라 프론트쪽만 다뤘다.

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

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
            crossorigin="anonymous"></script>

    <title>스파르타코딩클럽 | 부트스트랩 연습하기</title>
    <link href="https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap" rel="stylesheet">

    <style>
        * {
            font-family: 'Gowun Dodum', sans-serif;
        }

        .mytitle {
            background-color: green;

            height: 250px;
            width: 100%;

            background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)) /*이미지 어둡게하기*/, url("https://movie-phinf.pstatic.net/20210715_95/1626338192428gTnJl_JPEG/movie_image.jpg");
            background-position: center;
            background-size: cover;

            color: white;

            /*컨텐츠(내용물) 정렬, 4줄이 세트*/
            display: flex;
            flex-direction: column; /*column : 세로, row : 가로*/
            justify-content: center;
            align-items: center;
        }

        .mytitle > button {
            width: 200px;
            height: 50px;

            background-color: transparent; /*투명한색*/
            color: white;

            border-radius: 50px;

            border: 1px solid white; /*선굵기 1px, 실선, 흰색*/

            margin-top: 10px;
        }

        .mytitle > button:hover { /*버튼위에 마우스가 올라갔을때*/
            border: 2px solid white;
        }

        .mycomment {
            color: gray;

        }

        .wrap{
            max-width : 1200px;
            width : 95%;
            margin : 20px auto 0px auto;
        }

        .mypost{
            /*background-color:green; /*div를 다룰때는 background-color로 확인하는 것이 좋음*!*/

            /*500px까지 커질수있고 그전까지는 95%만 채움*/
            max-width : 500px;
            width:95%;

            margin : 20px auto 0px auto;

            box-shadow:0px 0px 3px 0px gray;
            padding : 20px;
        }
        .mybtn {
            display: flex;
            flex-direction: row; /*column : 세로, row : 가로*/
            justify-content: center;
            align-items: center;

            margin-top : 10px;
        }

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

<body>
<!--component -> card 참고-->
    <div class="mytitle">
        <h1>내 생애 최고의 영화들</h1>
        <button>영화 기록하기🔥</button>
    </div>
<!--Forms 의 Floating Labels 참고-->
    <div class="mypost">
        <div class="form-floating mb-3">
            <input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
            <label for="floatingInput">영화URL</label>
        </div>
<!--Input group의 Custom forms 참고-->
    <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>
<!--Forms 의 Floating Labels의 Textareas 참고-->
        <div class="form-floating">
            <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea2"
                      style="height: 100px"></textarea>
            <label for="floatingTextarea2">포인트</label>
        </div>
<!--component의 buttons 참고-->
        <div class="mybtn">
            <button type="button" class="btn btn-dark">기록하기</button>
            <button type="button" class="btn btn-outline-dark">닫기</button>
        </div>
    </div>


    <div class="wrap">
        <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>⭐⭐⭐</p>
                        <p class="mycomment">여기에 코멘트가 들어갑니다.</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>⭐⭐⭐</p>
                        <p class="mycomment">여기에 코멘트가 들어갑니다.</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>⭐⭐⭐</p>
                        <p class="mycomment">여기에 코멘트가 들어갑니다.</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>⭐⭐⭐</p>
                        <p class="mycomment">여기에 코멘트가 들어갑니다.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
<!-- ctrl + alt + l : 줄맞춤, 정렬 -->
</body>
</html>

1주차는 여기까지 만들었는데, 진짜 얻어가는게 많았던것같다.

특히

https://getbootstrap.com/docs/5.0/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

부트스트랩! 이미 다 만들어져있는 코드를 가져다 쓰기만 하면되는데

웹 강의를 배워본적있어도 이런 부분들은 몰랐었다.

웹 페이지만들때 필요한 모양 찾아서 쓰면되는데, 진짜 다양한 모양들이 있다.

버튼모양도 이쁜게 많은듯?

다른꿀팁 하나 더

https://kr.piliapp.com/facebook-symbols/

페이스 북 기호 : 웃는 기호, 이모티콘 기호, 이모티콘과 코드 목록

× 이모지 - 이모티콘 혹은 웃는 얼굴이라고도 불립니다. iOS와 Android는 기본적으로 845개의 이모티콘을 지원하고 있으며, 페이스북은 하트/사랑 기호, 별, 부호 및 동물 모양을 포함한 절반을 지원

kr.piliapp.com

영화 기록하기 옆에 불꽃 이모티콘은 여기서 가져다 쓰는데, 진짜 편한거같다.

이모티콘도 엄청많고 이런게 있었다니,,,

수업이 다 끝나면 숙제가 주차별로 나오는데 첫번째 주차는

나만의 팬명록 만들기!

나는 이석훈 팬이라 이석훈으로 만들어봤다!

먼저 만들고 숙제 코드를 따로 알려주어서 피드백이 바로바로 되는점이 좋았던것같다 :)

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

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
            crossorigin="anonymous"></script>

    <title>스파르타코딩클럽 | 부트스트랩 연습하기</title>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@200;300;400;500;600;700;900&display=swap"
          rel="stylesheet">
    <style>
        * {
            font-family: 'Noto Serif KR', serif;
        }

        .mytitle {
        / / background-color: green;

            height: 250px;
            width: 100%;

            background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)) /*이미지 어둡게하기*/, url("https://cdn.gukjenews.com/news/photo/201809/987374_761474_3135.jpg");
            background-position: center;
            background-size: cover;

            color: white;

            /*컨텐츠(내용물) 정렬, 4줄이 세트*/
            display: flex;
            flex-direction: column; /*column : 세로, row : 가로*/
            justify-content: center;
            align-items: center;
        }

        .mypost {
            /*background-color:green; /*div를 다룰때는 background-color로 확인하는 것이 좋음*!*/

            /*500px까지 커질수있고 그전까지는 95%만 채움*/
            max-width: 500px;
            width: 95%;

            margin: 20px auto 0px auto;

            box-shadow: 0px 0px 3px 0px gray;
            padding: 20px;
        }

        .mypost > button {
            margin-top: 15px;
        }

        .mybtn {
            margin-top: 10px;
        }

        .mycards {
            width: 95%;
            max-width: 500px;
            margin: auto;
        }

        .mycards > .card {
            margin-top: 10px;
            margin-bottom: 10px;
        }
    </style>
</head>

<body>
<div class="mytitle">
    <h1>이석훈 팬명록</h1>
</div>
<div class="mypost">
    <div class="form-floating mb-3">
        <input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
        <label for="floatingInput">닉네임</label>
    </div>
    <!--Forms 의 Floating Labels의 Textareas 참고-->
    <div class="form-floating">
            <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea2"
                      style="height: 100px"></textarea>
        <label for="floatingTextarea2">응원댓글</label>
    </div>
    <div class="mybtn">
        <button type="button" class="btn btn-dark">응원남기기</button>
    </div>
</div>
<div class="mycards" id="comment-list">
    <div class="card">
        <div class="card-body">
            <blockquote class="blockquote mb-0">
                <p>새로운 앨범 너무 멋저요!</p>
                <footer class="blockquote-footer">호빵맨 <cite title="Source Title"></cite></footer>
            </blockquote>
        </div>
    </div>
    <div class="card">
        <div class="card-body">
            <blockquote class="blockquote mb-0">
                <p>새로운 앨범 너무 멋저요!</p>
                <footer class="blockquote-footer">호빵맨 <cite title="Source Title"></cite></footer>
            </blockquote>
        </div>
    </div>
    <div class="card">
        <div class="card-body">
            <blockquote class="blockquote mb-0">
                <p>새로운 앨범 너무 멋저요!</p>
                <footer class="blockquote-footer">호빵맨 <cite title="Source Title"></cite></footer>
            </blockquote>
        </div>
    </div>
</div>
</body>

</html>

영화소개페이지를 만들면서 사용했던 코드를 그대로 쓰는 경우가 많았다. 살짝만 수정해서?

수업시간에 튜터님이 계속 코딩은 외우는게 아니라 가져다쓰는거라고 강조해주셨는데, 도움이 많이 된것같다!

결과물!

부트스트랩, 전에 사용했던 코드를 이용해서 금방 만들수있었다!

뿌듯뿌듯

그리고 실습과정전에는 이론과정도 진행했었는데, 서버와 브라우저 개념을 간단하게 배웠다.

우리가 보는 웹페이지는 모두 서버에서 미리 준비해두었던것을 "받아서", "그려주는"것이다.

즉, 브라우저가 하는 일은 1) 요청을 보내고 2) 받은 HTML 파일을 그려주는 일뿐인거다.

그러면 어디에 요청을 보내는건지 궁금했는데, 궁금증을 단번에 잡아주었다!

서버가 만들어놓은 "API"라는 창구에 미리 정해진 약속대로 요청을 보내는것!

간단하게 설명하자면, 브라우저는 naver.com이라는걸 치는 순간 네이버에 요청을 하고, 가져와서 보여주는것이다.

새로고침은 새로 받아오는것!

그럼 항상 이렇게 HTML만 내려주는건가?

그건 또 아니다, 데이터만 내려줄때가 더 많고

예를 들면 공연티켓을 예매하고 있을때, 좌석이 차고 꺼질때마다 보던 페이지가 리프레시되면 난감할수밖에 없을 것이다.

이럴때! 데이터만 받아서 끼우게 되는것이다.

그림으로 구조까지 설명해주어서 이해하기 더 편했던것같다.

참고) 데이터만 내려올 경우는 JSON 형식이라고 해서 이렇게 생겼다

간단간단하게 이론정리까지 완료!

그리고 좋았던점은 파이참 유료버전을 4개월동안 무료로 쓸수있다는 점이었는데,

처음 이용해본 프로그램이었는데 비주얼 스튜디오 코드보다 편하고 좋았던것같다!

1주차여도 많은것을 배울수있었는데, 앞으로 백엔드까지 배울생각하니 기대된다,,,,!

티스토리도 처음써보는데, 확실히 블로그보다는 코드를 적는게 편한것같다!

주차별로 배우고 복습할겸, 코드기록도 같이하면 좋을것같다.

'Web' 카테고리의 다른 글

[WEB] 인터렉티브 UI 기획 & 디자인 (0)	2022.07.09
[WEB] Flask 실행하기 (AWS 서버 이용) (0)	2022.03.11
[WEB] Flask시작하기 (Get, Post 정리) (0)	2022.03.07
[WEB] 웹 스크래핑, mongoDB (0)	2022.03.07
[WEB] JQuery, Ajax (0)	2022.03.03

ABOUT ME

Dev.Eunice Dev.Eunice

'Web' 카테고리의 다른 글

티스토리툴바

ABOUT ME

'Web' 카테고리의 다른 글

관련글 관련글 더보기

티스토리툴바