[1주차][웹 개발일지] HTML,CSS,JavaScript 연습

errSum·2022년 7월 28일
web스파르타코딩클럽

[스파르타코딩클럽][웹개발일지]

목록 보기
1/2
post-thumbnail

앱 개발일지를 쓰다보니까 그냥 이미 아는 거는 간단하게만 쓰고 내가 몰랐던 것만 자세히 써야겠다라는 생각이 들었다.
너무 개발일지에 시간을 많이 쓰는 것도 효율성이 떨어지니까 편하게 편하게 써야겠다...
그리고 1주차 내용을 한번에 쓰는 것도 억지인거 같아서 그냥 그날 배운 내용만 적어야겠다!
(복붙도 더 많이... ㅎ)

서버/클라이언트/웹의 동작 개념

우리가 보는 웹페이지는 모두 서버에서 파일을 받아서 브라우저에 그려주는 것이다.
브라우저가 하는 일은 아래와 같겠다.

    1. 서버에 요청을 보내서
    1. 받은 HTML 파일을 그려주기

혹은 JSON 형태등의 데이터만 받아서 데이터를 리프레싱 하는 경우도 있다.

Pycharm

이건 그냥 수업 잘 들었다고 생각하는 것 중 하나인데, 스파르타코딩클럽에서 강의를 수강하니 Pycharm Professional를 4개월간 무료로 이용할 수 있는 Redeem Code를 준다. 예전 대학 때는 Atom 같은 걸 썼던거 같은데 더 편한거 같기도하고 그냥 유료를 사용한다게 기분이 좋다 ㅎㅎ

HTML, CSS 기본내용

HTML, CSS의 개념

HTML은 뼈대, CSS 꾸미기.

HTML(Hyper Text Markup Language) 기초

head 안에는 페이지의 속성 정보 (meta, script, link, title 등)
body 안에는 페이지의 내용을 담는다. (div, p, h태그, img, span 등)

📝퀴즈

아래와 같이 만들기!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>로그인페이지</title>
</head>
<body>
    <h1>로그인 페이지</h1>
    <p>ID: <input type="text"/></p>
    <p>PW: <input type="text"/></p>
    <button>로그인하기</button>
</body>
</html>

CSS(Cascading Style Sheets) 기초

HTML에서는 부모-자식 구조가 아주 중요하다. 즉, 어떤 태그가 어떤 태그안에 있고 감싸고 있는지를 아는 것이 중요한 것이다. 이는 CSS에 큰영향을 미치기 때문이다.

CSS를 사용하는 방법은

  • 인라인 스타일(Inline Stlye) - 태그 안에 직접적으로 style 적용
  • 내부 스타일 시트(Internal Style Sheet) - <head>쪽에 <style> 태그를 사용하여 적용
  • 외부 스타일 시트(External Style Sheet) - 외부 CSS 파일을 연결시켜 적용(<link>태그를 사용하여 CSS 파일 불러옴)

이렇게 3가지가 있는 것으로 아는데 1주차 강의에서는 내부 스타일 시트를 사용하는 것 같다. 그러다보니 코드가 좀 길어지니까 헷갈리긴하다.

🔮Plus+

👉 자주 쓰는 CSS

배경관련
background-color
background-image
background-size

사이즈
width
height

폰트
font-size
font-weight
font-family
color

간격
margin
padding

자주 쓰이는 CSS 연습하기

위와 같은 화면을 만드는게 연습 문제인데, 풀면서 새로 안 사실들!

  1. 배경 이미지를 지정해줄 때 아래 세개는 거의 같이 쓰인다고 한다.
background-image: url('링크 주소');
background-position: center;
background-size: cover;

url은 당연한 것이고 position과 size를 설정해주는건 잘 안했던거 같은데 좋은 꿀팁이었다!

  1. 전체를 감싸고 있는 최상위 태그에 margin: auto를 주면 중앙 정렬이 된다.

단, 컨텐츠의 크기에 맞추어 width는 지정을 해줘야한다. 꽉 채운 넓이는 그 자체가 중앙정렬이 된 상태이니 말이다.

.wrap {
	margin: 10px auto;
	width: 300px;
}

전체 코드

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>스파르타코딩클럽 | 로그인페이지</title>
    <style>
        .mytitle {
            color: white;
            width: 300px;
            height: 200px;
            background-image: url('https://www.ancient-origins.net/sites/default/files/field/image/Agesilaus-II-cover.jpg');
            background-position: center;
            background-size: cover;

            border-radius: 10px;
            text-align: center;
            padding-top: 40px;
        }

        .wrap {
            margin: 10px auto;
            width: 300px;
        }
    </style>
</head>

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

</html>

폰트, 주석, (파일분리)

파일 분리는 위에서 설명했으니까 스킵.

폰트 (구글 웹 폰트)

강의에서는 구글 웹 폰트를 사용했다. 나도 예전에 한번 사용했던 것 같은데 이번에 쓰면서 완전히 방법을 터득했다. 사용법은 아니까... 안 적을련다 ㅎㅎ

구글 웹폰트

까먹지 않게 스크린샷!

두개 head랑 적용하려는 CSS 선택자에 붙여넣기!

주석

주석도 잘 알고 있기 때문에 스킵! 근데 주석을 습관처럼 다는 연습은 더 필요할 것 같다 ㅠ (귀찮...)

부트스트랩(bootstrap)

제일 알고 싶던 부분이다. 말로만 듣던 bootstrap. 직접 사용해 본 적이 없는데 막상 써보니 그냥 API랑 똑같네...

bootstrap이란?

  • 그냥 남들이 만들어놓은 CSS를 갖다 쓰는거였다. EZ

부트스트랩을 쓰려면 외부 CSS 가져오듯이 head에 정보를 넣어주어야 한다. 아래는 스파르타코딩클럽에서 사용했떤 부트스트랩 시작 템플릿이다.

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

<body>
    <h1>이걸로 시작해보죠!</h1>
</body>

</html>

이제 이 CSS를 사용하려면
https://getbootstrap.com/docs/5.0/components/buttons/
이 사이트에서 자신이 사용하고 싶은 디자인을 가져다가 쓰면 된다!
예를 들면

~~
<body>
	<h1>이걸로 시작해보죠!</h1>
    <button type="button" class="btn btn-success">Success</button>
</body>
~~

위와 같이 작성하면 <h1> 태그 아래 예쁜 버튼이 하나 생긴다!

이렇게 간단하게 아름다운 CSS를 가져다가 쓸 수 있다!

부트스트랩을 이용하면 이렇게 예쁜 타이틀도 만들 수 있다!

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

    <style>
        .mytitle {
            width: 100%;
            height: 250px;

            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;

            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }
        .mytitle > button {
            width: 200px;
            height: 50px;

            background-color: transparent;
            color: white;

            border-radius: 50px;
            border: 1px solid white;

            margin-top: 10px;
        }

        .mytitle > button:hover {
            border: 2px solid white;
        }
    </style>
</head>

<body>
    <div class="mytitle">
        <h1>내 생애 최고의 영화들</h1>
        <button>영화 기록하기</button>
    </div>
</body>

</html>

위 코드에서 다른 것은 응용하면 어찌저찌 알 수 있었는데
background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('')
이 부분에서 gradient를 넣어 줌으로 배경을 조금 어둡게해 텍스트를 돋보이게 하는 효과를 줄 수 있다고 한다. 새로 알게 된 꿀팁!

Quiz_포스팅박스

위와 같은 이미지의 사이트를 만드는 것이 지금까지 배운 것의 총합본이 되겠다. 우선 내가 작성한 코드는 아래와 같다.

<!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>
    <link href="https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap" rel="stylesheet">


    <title>스파르타코딩클럽 | 부트스트랩 연습하기</title>

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

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

            background-color: green;

            width: 100%;
            height: 250px;

            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;
        }

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

            background-color: transparent;
            color: white;

            border-radius: 50px;
            border: 1px solid white;

            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 {
            max-width: 500px;
            width: 95%;

            margin: 20px auto 0px auto;

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

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

            margin: 10px;
        }

        .mybtns > button {
            margin-right: 10px;
        }
    </style>
    <script>
        function hey() {
            alert('안녕!');
        }
    </script>
</head>

<body>
    <div class="mytitle">
        <h1>내 생애 최고의 영화들</h1>
        <button onclick="hey()">영화 기록하기</button>
    </div>
    <div class="mypost">
        <div class="form-floating mb-3">
            <input class="form-control" id="floatingInput" placeholder="영화 URL" type="email">
            <label for="floatingInput">영화 URL</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">
            <textarea class="form-control" id="floatingTextarea" placeholder="코멘트"></textarea>
            <label for="floatingTextarea">코멘트</label>
        </div>
        <div class="mybtns">
            <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 alt="..." class="card-img-top"
                         src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg">
                    <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 alt="..." class="card-img-top"
                         src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg">
                    <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 alt="..." class="card-img-top"
                         src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg">
                    <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 alt="..." class="card-img-top"
                         src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg">
                    <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>
</body>

</html>

조금 길다... ㅎ 아래는 완성된 페이지!

얼추 비슷하다.

만들면서 겪은 어려움은 딱히 없었는데 하나 있었다면...

  • 기록하기 닫기 버튼 중앙정렬 및 두 사이 간격
    - 이게 항상 겪는 문제인데, 이제 정확히 중앙 정렬을 하는 법을 안 거 같다. 
     .mybtns {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        margin: 10px;
    }
    flex를 사용하면 jusify-content와 align-items를 center로 두어 하위 요소들을 중앙 정렬 할 수 있다.
    그리고 이 버튼들에 margin-left를 10씩 주어서 두 사이의 간격을 조정하였는데, 나는 이 10이라는 숫자가 적당하다는 결론이 나오기까지 시간이 좀 걸리는 거 같다. 감으로 빨리 익혀야겠다.

새로 알게된 팁 하나더!
모바일은 가로 크기가 가장 문제라고 한다.(어차피 세로는 스크롤 해서 보니까.)
그럴때는 가로의 최대 크기를 설정해 주면 된다.

width: 95%;
max-width: 500px;

최상위 부모에게 이렇게 적용 되면 가로로 화면이 500px이 넘어가면 아무리 가로 크기가 커져도 500px 크기로 보이고, 500보다 작아지면 화면 가로 크기의 95%만 최상위 태그가 영역을 차지하게 된다.
이렇게 쉬운 방법이...

2022-07-28 자바스크립트 기초...
를 쓰려고 보니까 이미 앱개발에서도 배웠고 알고 있는 내용들이라 중복해서 쓰면 정신병 걸릴거 같다. 충분히 알고 있는 내용을 또 보는 것은 전공서 앞 부분만 계속 반복해서 보는 것 같다... 물론 반복 학습은 필요하지만 나에겐 지금 Too Much! 다음 개발 일지에 새로 안 JavaScript를 작성하는 걸루....

자바스크립트 연습

위에 날짜에는 저렇게 생각해서 다음 개발일지를 쓰려고 보니까 정말 쓸게 없어서 연습 문제 하나정도 그냥 여기다 붙여넣기로 했다. 다음 코드는 JSON 데이터 구조를 가진 서울시 미세먼지 값을 가지고 반복문과 조건문을 이용한 연습한 문제이다.

<!--미세먼지 값이 40보다 낮은 구 출력!-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script>
        let mise_list = [
            {
                MSRDT: "201912052100",
                MSRRGN_NM: "도심권",
                MSRSTE_NM: "중구",
                PM10: 22,
                PM25: 14,
                O3: 0.018,
                NO2: 0.015,
                CO: 0.4,
                SO2: 0.002,
                IDEX_NM: "좋음",
                IDEX_MVL: 31,
                ARPLT_MAIN: "O3",
            },
            {
                MSRDT: "201912052100",
                MSRRGN_NM: "도심권",
                MSRSTE_NM: "종로구",
                PM10: 24,
                PM25: 18,
                O3: 0.013,
                NO2: 0.016,
                CO: 0.4,
                SO2: 0.003,
                IDEX_NM: "좋음",
                IDEX_MVL: 39,
                ARPLT_MAIN: "PM25",
            },
            {
                MSRDT: "201912052100",
                MSRRGN_NM: "도심권",
                MSRSTE_NM: "용산구",
                PM10: 0,
                PM25: 15,
                O3: 0.012,
                NO2: 0.027,
                CO: 0.4,
                SO2: 0.003,
                IDEX_NM: "점검중",
                IDEX_MVL: -99,
                ARPLT_MAIN: "점검중",
            },
            // 더 긴데 생략
		]

        for (let i = 0; i < mise_list.length; i++) {
            if (mise_list[i].IDEX_MVL < 40)
                console.log(mise_list[i].MSRSTE_NM)
        }
    </script>
</head>
<body>

</body>
</html>

JavaScript는 이제 진짜 끝

📝 숙제! (팬명록 만들기)

HTML기초부터 부트스트랩과 구글 웹폰트를 모두 이용해서 위와 같은 페이지를 만드는 것이 숙제였다. 굳이 10cm님이 아니더라도 괜찮아서 내가 좋아하는 이바다님 팬명록을 만들었다.

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

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

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

  <link href="https://fonts.googleapis.com/css2?family=Stylish&display=swap" rel="stylesheet">

  <title>다금바리🐠 | 팬명록 작성</title>

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

    .title {
      display: flex;
      justify-content: center;
      align-items: center;

      width: 100%;
      height: 250px;

      background-image:  linear-gradient(0deg, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.35)), url("https://img.hankyung.com/photo/201909/2019093009473121424-540x540.jpg");
      background-position: center;
      background-size: cover;

      color: white;
    }


    .quoteForm{
      width: 95%;
      max-width: 500px;

      margin: 20px auto 20px auto;

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

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

    .quotes {
      width: 95%;
      max-width: 500px;

      margin: auto;
    }

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

<body>
  <div class="title">
    <h1 class="titleText">이바다 팬명록</h1>
  </div>
  <div class="quoteForm">
    <div class="form-floating mb-3">
      <input class="form-control" id="floatingInput" placeholder="name@example.com" type="text">
      <label for="floatingInput">닉네임</label>
    </div>
    <div class="form-floating">
      <textarea class="form-control" id="floatingTextarea" placeholder="Leave a comment here"></textarea>
      <label for="floatingTextarea">응원 댓글</label>
    </div>
    <button type="button" class="btn btn-dark">응원 남기기</button>
  </div>
  <div class="quotes">
    <div class="card">
      <div class="card-body">
        <blockquote class="blockquote mb-0">
          <p>너무 예뻐요~</p>
          <footer class="blockquote-footer">errSum</footer>
        </blockquote>
      </div>
    </div>
    <div class="card">
      <div class="card-body">
        <blockquote class="blockquote mb-0">
          <p>너무 예뻐요~</p>
          <footer class="blockquote-footer">errSum</footer>
        </blockquote>
      </div>
    </div>
    <div class="card">
      <div class="card-body">
        <blockquote class="blockquote mb-0">
          <p>너무 예뻐요~</p>
          <footer class="blockquote-footer">errSum</footer>
        </blockquote>
      </div>
    </div>
  </div>
</body>

</html>

👆 웹 화면

👆 전체적인 화면

1주차 끝!

profile
errSum
Future' ME
다음 포스트

[2주차][웹 개발일지] jQuery, AJAX

0개의 댓글