1주차 - HTML 기초학습 (+CSS, Bootstrap, Javascript)

개발일지/웹개발

1주차 - HTML 기초학습 (+CSS, Bootstrap, Javascript)

FeelsKim 2022. 9. 18. 00:14

드디어 웹개발의 기초이자 기본인 html 언어에 대해 배워보았다.

일단 '웹'이라는 것이 어떤 방식으로 돌아가는지 알기 위해선

클라이언트와 서버에 대한 기본개념이 필요하다!

0. 클라이언트와 서버

네이버를 보자. 상단에 naver.com이라는 주소가 있고,

그 밑으로 각종 로고와 이미지, 텍스트들이 모여있다.

우리(사용자)는 이곳에서 뉴스기사를 보고, 로그인을 하며, 검색어를 입력해 필요한 정보를 찾게 되는데,

이 모든 활동을 하는 곳이 '클라이언트'다.

근데 눈 앞에 보이는 이 모든 자료들은 개개인의 컴퓨터에서 만들어진 게 아니라,

인터넷을 통해 '어딘가'로부터 전달받은 자료(데이터)일 것이다.

이 어딘가가 '서버'다.

예를들어 네이버라는 홈페이지는 고유한 도메인(naver.com)을 통해 볼 수 있으며

다시 접속하거나, 새로고침을 할때마다 시시각각 정보들이 업데이트 된다.

또한 ID와 PW를 입력하면 나의 회원정보를 볼 수도 있다.

즉, 클라이언트는 주어진 자료들을 다양한 목적으로 사용하고

필요하면 추가적인 자료를 서버에 '요청'(로그인을 하거나 특정 페이지로 이동, 검색 등)하는 프로그램이며,

서버는 클라이언트이 필요한 자료들을 제공하고, 클라이언트가 보낸 요청들에 '응답'하는 프로그램인 것이다.

(클라이언트 > 프론트엔드 / 서버 > 백엔드)

웹페이지 개발에 쓰이는 html, css, javascript는 이러한 클라이언트(프론트엔드)의 영역이라 볼 수 있다.

1. 세팅

일단, 프로그래밍(코딩)을 하려면 당연히 그걸 할 공간이 필요하다.

프로그래밍을 하기위한 프로그램을 '통합 개발 환경(Integrated Development Environment, IDE)'이라고 한다.

내가 듣는 강의에서는 Pycharm이라는 프로그램을 사용했다.

2. HTML, CSS, Javascript의 개념

웹페이지는 크게 저 세 언어(?)를 통해 구조적으로 짜여져있다.

HTML은 웹페이지의 기본적인 구성과 레이아웃, 서식 등을 만드는 뼈대 역할이고,

CSS는 이러한 HTML을 꾸며주는 역할을 하며,

Javascript는 이렇게 만들어진 웹페이지에 각종 동작(창 띄우기, 이미지 불러오기, 페이지 이동 등등)을 심어주는 역할이라고 볼 수 있다.

3. 부트스트랩(Bootstrap)

'라이브러리', '프레임워크' 는 누군가 미리 코드를 짜둔 일종의 템플릿이다.

대학교 ppt 발표를 앞두고 파워포인트를 만들때, 열심히 인터넷을 뒤지며 그럴싸한 디자인의 템플릿을 다운받아 사용한는 것과 마찬가지다.

프레임워크가 완전히 짜여진 하나의 완제품이라면,

라이브러리는 부분적으로 수정하여 사용할 수 있는 DIY제품같은 개념인것.

이걸 '제어권한의 역전'이라고 표현하는것같다.

라이브러리의 경우 프로그램을 짜는 개발자가 해당 코드들을 능동적으로 쓸 수 있는데, 프레임워크의 경우 설계대로만 코드를 다룰 수 있어 수동적으로 사용할 수 있는 것 정도로 이해하고 있다.

4. Javascript

앞선 html과 css로 웹페이지의 모습을 만들었다면 이제 페이지가 움직일 수 있도록 여러 기능들을 심어줘야한다.

그 역할을 하는게 자바스크립트인데,

여기서부터 여타 프로그래밍 언어들과 공통적인 문법요소들이 많다보니 프로그래밍언어의 느낌이 난다.

해당 강의를 들으며 따라 만들었던 영화기록 웹페이지.

'영화 기록하기' 버튼을 클릭하면(onclick) 숨겨진 포스트박스가 드러나게끔 만들었다.

다시 '닫기' 버튼을 누르면(onclick) 포스트박스가 숨겨진다.

실제 해당 포스트를 작성 후 하단에 기록되는 기능까지는 따로 구현하지는 않았지만,

2주차 영상 수강내용에 포함된 Jquery의 temp_html을 사용하면 충분히 가능하긴 하다..

<!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 {
            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');
            /* opacity로 투명도를 줄 경우 자식요소에도 모두 투명도가 적용되므로,
            liner-gradient로 시작점과 끝점에 투명도를 줘서 배경만 투명도 조절 가능 */
            background-position: center;
            background-size: cover;

            color: white;

            display: flex;
            flex-direction: column;
            justify-content: center; /* flex item의 위치를 메인축 기준으로 중앙으로 정의 */
            align-items: center; /* flex item의 위치를 수직축 기준으로 중앙으로 정의 */
        }

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

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

        .mypost {
            width: 95%;
            max-width: 500px;
            margin: 20px auto 0px auto;
            padding: 20px;
            box-shadow: 0px 0px 3px 0px gray;
            display: none;
        }

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

            margin-top: 20px;
        }
        .mybtns > button {
            margin-right: 10px;
        }
    </style>
    <script>
        function open_box(){
            $('#post_box').show()
        }
        function close_box(){
            $('#post_box').hide()
        }
    </script>
</head>

<body>
<div class="mytitle">
    <h1>내 생애 최고의 영화들</h1>
    <button onclick="open_box()">영화 기록하기</button>
</div>
<div class="mypost" id="post_box">
    <div class="form-floating mb-3">
        <input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
        <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" placeholder="Leave a comment here" id="floatingTextarea2"
                  style="height: 100px"></textarea>
        <label for="floatingTextarea2">코멘트</label>
    </div>
    <div class="mybtns">
        <button type="button" class="btn btn-dark">기록하기</button>
        <button onclick="close_box()" 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" id="card_box">
        <div class="col">
            <div class="card h-100">
                <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 h-100">
                <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 h-100">
                <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 h-100">
                <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>
</body>

</html>

'개발일지 > 웹개발' 카테고리의 다른 글

최종 - AWS로 웹페이지 배포하기 / 회고 (0)	2022.10.10
2주차 - jQuery, Ajax (0)	2022.09.26

현재글1주차 - HTML 기초학습 (+CSS, Bootstrap, Javascript)

코딩 비비기

코딩공부 기록용 https://github.com/JavaBoy94

데이터유형, 다차원배열, HTML, Casting, SQL, for문, vscode, 팀프로젝트, github, ERD Cloud, DB, 서브쿼리, 웹개발, 프로그래밍, Java, 깃허브, while문, GIT, mysql, 자바,

Today :
Yesterday :

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

코딩 비비기