[TIL] 2022.04.18 (HTML, CSS, Javascript, JQuery, Ajax 간단한 웹 페이지 만들어보기)

시작하기 전에 잠깐!

HTML, CSS, Javascript에 대해 짤막하게 알아보고 갑시다!

HTML 이란?
- Hyper Text Markup Language의 약어.
- 쉽게 말해 웹 페이지를 만들기 위한 프로그램 언어로, 제목과 내용을 위한 뼈대라는 느낌이다.
- 크게 페이지의 속성 정보인 <head>와 페이지의 내용을 구성하는 <body>로 이루어져 있다.

<head>에 들어가는 대표적인 태그들

<head>
1. <mata>
  - 해당 문서에 대한 정보를 정의할 때 사용한다.
  - 웹 페이지의 보이지 않는 정보를 제공한다.

  <meta> 태그의 속성
  > http-equiv : HTML4.~에서 content 속성에 명시된 값의 HTTP 헤더를 제공했으나, HTML5에서는 더욱 손쉽게 사용할 수 있는 charset 속성이 추가되었다.
  > charset : HTML5부터 추가되었으며, 문자 인코딩 방식을 정의하기 위해 사용된다.
  > name : 메타데이터를 위한 이름을 명시한다.
  > content : meta 정보 내용을 지정 해주고, name 속성이나 http-equiv 속성이 명시되었다면 반드시 사용되어야 하는 속성이다.

2. <script>
  - 자바 스크립트와 같은 다른 프로그래밍 언어를 연결하기 위해 사용한다.
  - 스크립트 코드를 직접적으로 명시해 주거나, src 속성을 사용하여 외부 스크립트 파일을 참조 할 수 있다.

3. <link>
  - 해당 문서와 외부 리소스를 연결할 때 사용한다.

4. <title>
  - 해당 문서의 제목을 정의할 때 사용한다.

<body>에 들어가는 태그들

<body>
1. <div> : 한 구역을 정의

2. <p> : 하나의 문단을 정의

3. <li> : 리스트(목록) 생성 태그
  3-1. <ol> : 목록을 숫자로 구분함(1, 2, 3 ~)
  3-2. <ul> : 목록을 모양으로 구분함 (·, ·, · ~)

4. <h#> : 섹션, 문단의 제목을 정의 (숫자(#)의 크기가 작을수록 글자 크기가 커짐)

5. <hr> : 가로 줄 생성 태그

6. <br> : 줄 바꿈 태그

7. <span> : 특정 문구에 대한 정의

8. <a> : 하이퍼링크 태그
  9-1. href : 클릭 시 이동할 링크
  9-2. target : 링크를 여는 방법을 정의
      9-2-1. self : 현재 페이지
      9-2-2. blank : 새 탭
      9-2-3. parent : 부모 페이지
      9-2-4. top : 최상위 페이지

10. <img> : 이미지 태그
  10-1. src : 이미지 경로 지정
  10-2. width : 이미지의 가로 크기
  10-3. height : 이미지의 세로 크기

11. <button> : 버튼 태그

12. <input> : 정보 입력 태그
  12-1. button : 버튼 형태
  12-2. checkbox : 체크박스 형태
  12-3. text : 텍스트 입력 박스 형태

13. <textarea> : 박스 형태의 일반 텍스트 편집 컨트롤

14. <style> : 해당 요소에 직접 CSS를 적용
  14-1. <body>태그에 사용 : 인라인 스타일
  14-2. <head>태그에 사용 : 내부 스타일
  14-3. <link>태그에 사용 : 외부 스타일

15. <select> : 드롭 다운 목록 생성 태그
  15-1. name : 드롭 다운 목록 이름
  15-2. size : 드롭 다운 목록에서 보이는 옵션의 수
  15-3. disabled : 목록 비활성화
  15-4. multiple : 다중 선택

16. <option> : <select>태그 내에서 목록의 항목을 정의
  16-1. value : 서버에 전달할 값
  16-2. label : 옵션 설명
  16-3. selected : 미리 선택
  16-4. disabled : 비활성화

CSS 란?
- Cascading Style Sheets의 약어.
- HTML와 세트로 사용되며, HTML의 구조를 디자인하는 데 사용된다.

CSS의 속성

> 배경
  1. background-color : 배경 색상
  2. background-image : 배경 이미지, 지정 > url("링크");
  3. background-size : 배경 크기
    3-1. contain : 이미지의 한도 내에서 제일 크게 설정
    3-2. cover : contain과 비슷하지만, 지정 크기에서 벗어나면 가로와 세로를 조절
    3-3. auto : 원본 크기 그대로 사용
  4. background-position : 배경 위치

> 사이즈
  1. width : 가로 크기
  2. height : 세로 크기

> 폰트
  1. font-size : 긁자 크기
  2. font-weight : 글자 굵기
  3. font-family : 글자 형태
    3-1. sans-serif
    3-2. cursive
  4. color : 글자 색상

> 간격
  1. margin : 바깥 여백
  2. padding : 안쪽 여백
    순서 : 위(top), 오른쪽(right), 아래(botton), 왼쪽(left)
    예) margin(10px, auto, 5px, auto) - auto는 자동
  3. border-radius : 테두리 형태
  4. border : 테두리 (너비, 스타일, 색)

JavaScript 란?
- 객체 기반의 스크립트 언어
- 웹의 동작을 구현할 수 있도록 한다.
- 주로 웹 브라우저 내에서 사용하며, 다른 응용 프로그램 객체에서도 접근할 수 있다.

이제 시작!

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

html 코드의 첫 시작은 항상 이렇게 시작합니다.

여기서 잠깐!

저것들은 무슨 역할을 하는 것일까요?

<!doctype html> : 선언된 페이지의 HTML 타입이 무엇인지 웹 브라우저에 알려주는 역할

<html lang="en"> : 웹 접근성에 관한 언어 코드이며, en은 영어를 ko는 한글을 정의합니다.

<head>
	<meta charset="utf-8">

또한 웹 페이지의 글자가 깨지지 않도록 <meta charset="utf-8">을 정의해주도록 하자!

이것을 정의하지 않는다면..?

▼

아니..? 이건 무슨 말이지..?

<!-- 부트스트랩 지정 -->
<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>

이후 부트스트랩(bootstrap)을 지정해주기 위한 코드를 추가해줍니다.

이번에도 잠깐!

부트스트랩(bootstrap)이 뭐지?

부트스트랩(bootstrap)이란?
- 웹 디자이너나 개발자들에게 편하게 제공받을 수 있는 프레임워크입니다.
- 부트스트랩은 각종 레이아웃, 버튼 등의 디자인을 CSS와 JavaScript로 만들어 놓은 것!
- 미리 만들어진 부트스트랩을 사용함으로써, 많은 양의 코드를 짧게 줄여준다는 장점이 있다.

이후 브라우저 제목을 지정해주기 위해 <head> 태그에 <title>~</title>을 적어줍니다.

<!-- 브라우저 제목 지정 -->
<title>n주차 숙제</title>

왠지 저는 밋밋한 폰트를 사용하기보단 새로운 폰트를 사용해보고 싶다는 생각이 들었습니다.

폰트 사용을 위해서는 추가로 코드를 짜 넣어야 합니다.

하지만, 코드는 어떻게..?

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

Google Fonts

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

fonts.google.com

폰트를 제공해주는 사이트는 많이 있습니다.

저는 그중 Google Fonts 사이트에 들어갔습니다.

검색을 통해 원하는 무료 폰트를 사용해보았고, 'Yeon Sung'이라는 폰트체가 맘에 들어 채택했습니다!

생각한 폰트를 추가하기 위해 <head>에 폰트 링크를 달고 html에 있는 전체 글자에 적용하기 위해 <style> 태그 안에 추가로 코드를 넣어줬습니다.

<!-- 전체 폰트 지정 -->
<link href="https://fonts.googleapis.com/css2?family=Yeon+Sung&display=swap" rel="stylesheet">

<style>
    /* 폰트 지정 : Yeon Sung 사용 */
    * {
        font-family: 'Yeon Sung', cursive;
    }
</style>

우선 <body>부터 만들어줬습니다.

<body>
<div class="mytitle">
    <h1>한요한 2집 앨범 감상편</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>
    <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-primary" onclick="button_click()">등록하기</button>
    </div>
</div>
<div class="myquote">
    <div class="card">
        <div class="card-body">
            <blockquote class="blockquote mb-0">
                <p>다음 앨범이 나왔으면 좋겠어요!</p>
                <footer class="blockquote-footer">엄준식</cite>
                </footer>
            </blockquote>
        </div>
    </div>
    <div class="card">
        <div class="card-body">
            <blockquote class="blockquote mb-0">
                <p>다음 앨범이 나왔으면 좋겠어요!</p>
                <footer class="blockquote-footer">엄준식</cite>
                </footer>
            </blockquote>
        </div>
    </div>
    <div class="card">
        <div class="card-body">
            <blockquote class="blockquote mb-0">
                <p>다음 앨범이 나왔으면 좋겠어요!</p>
                <footer class="blockquote-footer">엄준식</cite>
                </footer>
            </blockquote>
        </div>
    </div>
</div>
</body>

처음 볼 때는 이게 뭔가.. 싶었습니다.

그런데 차츰 이해하며 공부하다 보니까 그렇게 어렵진 않았습니다!

<div class="card">
    <div class="card-body">
        <blockquote class="blockquote mb-0">
            <p>다음 앨범이 나왔으면 좋겠어요!</p>
            <footer class="blockquote-footer">엄준식</cite>
            </footer>
        </blockquote>
    </div>
</div>

<body>에 들어가는 부분 중 윗부분들은 추가해주면 계속 나열되지만 첫 화면에는 굳이 추가를 안 해줘도 되는 부분입니다.

저는 일단 보기 쉽도록 2구역 정도를 추가해줬습니다.

하지만 여기서 <body>만 추가해줬다고 html이 바로 돌아가는 것은 아닙니다.

왜냐? <body>에서 정의된 class가 <head>에선 만들어지지 않았기 때문입니다.

지금부터 <head>에 하나씩 추가해볼까요?

<style>
        /* 메인 배경으로 들어갈 사진 및 효과들 지정 */
        .mytitle {
            width: 100%;
            height: 250px;

            /* 백그라운드 사진 및 명암, 위치 설정 */
            background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url('https://image.bugsm.co.kr/album/images/500/203151/20315104.jpg');
            background-position: center; /* 백그라운드 이미지 위치 조정 */
            background-size: cover; /* 이미지 한도 내 크게 설정 */

            color: white; /* 폰트 색상 */

            /* mytitle의 Flex Container 정의 */
            display: flex;
            flex-direction: column; /* 주 축 정의 : 수직 */
            align-items: center; /* 주 축 정렬 방식 : 중앙 */
            justify-content: center; /* 교차 축 정렬 방식 : 중앙 */
        }
        
~

<body>
<div class="mytitle">
    <h1>한요한 2집 앨범 감상편</h1>
</div>

해당 사진처럼 만들어 주기 위해 <head>에. mytitle이라는 클래스를 정의해주었고, <body>에 넣어줌으로써 해당 사진처럼 만들어지는 것을 볼 수 있습니다.

/* 감상평이 등록된 칸에 들어갈 설정 */
.myquote {
    width: 95%;
    max-width: 520px;
    margin: 10px auto 10px auto;
    padding: 15px;

    display: grid;
    grid-row-gap: 20px;
}

~

<div class="myquote">
    <div class="card">
        <div class="card-body">
            <blockquote class="blockquote mb-0">
                <p>다음 앨범이 나왔으면 좋겠어요!</p>
                <footer class="blockquote-footer">엄준식</cite>
                </footer>
            </blockquote>
        </div>
    </div>
    <div class="card">
        <div class="card-body">
            <blockquote class="blockquote mb-0">
                <p>다음 앨범이 나왔으면 좋겠어요!</p>
                <footer class="blockquote-footer">엄준식</cite>
                </footer>
            </blockquote>
        </div>
    </div>
    <div class="card">
        <div class="card-body">
            <blockquote class="blockquote mb-0">
                <p>다음 앨범이 나왔으면 좋겠어요!</p>
                <footer class="blockquote-footer">엄준식</cite>
                </footer>
            </blockquote>
        </div>
    </div>
</div>

밑에 들어가는 감상평에 대한 정의도 해주었습니다.

/* 닉네임, 감상평 남기기, 등록하기가 들어갈 칸 */
.mypost {
    width: 95%;
    max-width: 500px;
    margin: 20px auto 0px auto;
    padding: 20px;

    /* 박스 그림자 설정(그림자 위치 수평, 그림자 위치 수직, 그림자 명암, 그림자 확장값, 그림자 색 */
    box-shadow: 0px 0px 3px 0px gray;
}

/* 등록하기 버튼 상세 설정 */
.mybtns {
    /* mybtns의 Flex Container 정의 */
    display: flex;
    flex-direction: row; /* 주 축 정의 : 수평 */
    align-items: center; /* 주 축 정렬 방식 : 중앙 */
    justify-content: center; /* 교차 축 정렬 방식 : 중앙 */

    margin-top: 20px; /* 바깥 여백에 대한 정의(위) */
}

~

<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>
    <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-primary" onclick="button_click()">등록하기</button>
    </div>
</div>

마지막으로 .mytitle과 .myquote의 중앙에 있는 감상평 남기기를 적는 칸도 추가로 정의해줍니다.

이렇게 코드를 짠 뒤 html을 실행하면 다음과 같은 모습을 볼 수 있습니다.

여기서 끝내긴 아쉽기 때문에 Javascript를 이용하여 "등록하기" 버튼을 누르면 메시지가 출력되게끔 짧은 코드도 추가해볼까요?

<head> ~ </head>에 <script> 태그를 추가해준 뒤 코드를 입력하면 됩니다.

<script>
    // 등록하기 버튼을 누르면 출력되는 상태 창
    function button_click() {
        alert("n주차 완성!");
    }
</script>

~

<button type="button" class="btn btn-primary" onclick="button_click()">등록하기</button>

function으로 button_click()이라는 함수를 선언해준 뒤 button_click() 함수가 지정된 버튼을 누르면 "n주차 완성!"이라는 팝업 창(alert)이 뜨게끔 만들어 줍니다.

이렇게 지정해준다면?

등록하기 버튼을 누르니 "n주차 완성!"이라는 팝업 창이 출력되는 것을 볼 수 있었습니다.

여기서 잠깐!

추가로 몇 개 더 추가해볼까요?

사진처럼 JQuery와 Ajax를 이용하여 서울시의 실시간 현재 기온을 <h1> ~ </h1> 밑에 추가해보려고 합니다.

그전에..

JQuery와 Ajax에 대한 짧은 설명 한 번 보고 갑시다!

JQuery이란?
- HTML의 요소들을 조작하는 편리한 Javascript를 미리 작성해둔 라이브러리
- Javascript로 길게 써야 하는 코드를 JQuery를 이용해 보다 쉽고 짧게 작성이 가능하게끔 도와준다.
- JQuery를 사용하려면 $(function() { 여기! })에 적어줘야 한다.

Ajax란?
- Asynchronous Javascript And Xml의 약어.
- Javascript를 통해 서버에 데이터를 비동기 방식으로 요청하는 것.
- 비동기 방식이란? 웹 페이지를 리로드(Reload) 하지 않고 데이터를 불러오는 방식이다.
- 비동기 방식을 채용함으로써 필요한 부분만 사용할 수 있으므로 불필요한 리소스 낭비를 줄인다.

이제 JQuery와 Ajax를 코드에 짧게 추가해봅시다!

// 웹 페이지 시작 시 서울시의 현재 기온이 표시되게끔 설정
$(document).ready(function(){
    // 웹 브라우저 시작 시 해당 메시지를 출력
    alert('웹 페이지 로딩 완료')
    $.ajax({
        type: "GET", // 방식 : GET (데이터 조회)
        url: "http://spartacodingclub.shop/sparta_api/weather/seoul", // URL 지정
        data: {}, // data 값이 없는 이유? GET 방식은 별도로 지정하지 않음
        success: function (response) {
            // 서울시 실시간 기온 값(temp)을 weather 함수에 저장 후 출력
            let weather = response['temp'];
            $('#text_weather').text(weather);
        }
    })
})

~

<div class="mytitle">
    <h1>한요한 2집 앨범 감상편</h1>
    <p>현재 기온 : <span id="text_weather">00.0</span>도</p>
</div>

$(document).ready(function(){ ~ 에 콜백 함수를 정의하여 웹 페이지가 시작될 때 "웹 페이지 로딩 완료"라는 팝업이 나타나게끔 설정해줍니다.

Ajax 안에 들어가는 내용들은 무슨 의미일까요?

1. type

클라이언트 > 서버 요청 방식을 결정해줍니다.

코드 블록에 적힌 방식은 GET방식으로 데이터 조회 시 사용됩니다.

2. url

요청할 URL 값을 적어줍니다.

저는 서울시의 실시간 기온값을 요청할 것이기 때문에 서울시 실시간 기온값의 URL을 적어줬습니다!

3. data

요청하면서 줄 데이터를 { } 안에 적어줍니다.

GET 방식에서는 사용하지 않아요!

4. success : function(response) {

Success(성공) 결과를 해당 response(변수명)에 넣어줍니다.

5. let weather = response['temp'];

http://spartacodingclub.shop/sparta_api/weather/seoul

해당 링크에 있는 내용 중 "temp"의 값이 실시간 기온 값이기 때문에 weather라는 변수를 선언해주고 response에 'temp'의 값을 넣습니다.

6. $('#text_weather').text(weather);

JQuery 형태로 text_weather라는 id에 text의 형태로 표시해줍니다.

꼭! $(document).ready(function(){ 안에 담아주어야 합니다!

이렇게 코드를 설정해준다면..

코드를 설정해준 대로 "웹 페이지 로딩 완료"라는 문구가 원활하게 돌아가며, 서울시의 실시간 기온 값이 출력되는 것을 확인할 수 있었습니다!

이렇게 짧게나마 공부를 해보고 웹 페이지 소스 코드까지 만들어 보았습니다.

웹 프로그래밍은 처음 접해보는 것이라 처음에는 많이 어려웠었지만, 열심히 공부하니 의욕이 생겨났습니다.

그리고 이렇게나마 짧은 코드로 작은 웹 페이지를 만든 것인데도 많이 재미있었습니다!

그렇지만 자만하지 말고 아직은 많이 부족하니 더욱 열심히 공부해야겠습니다.

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

[TIL] 2022.04.26 (Python 문법 기초2, 짧은 개인 프로젝트 영상) (1)	2022.04.26
[TIL] 2022.04.25 (Python 문법 기초1) (0)	2022.04.25
[TIL] 2022.04.21 (팀 소개 웹 페이지 - 미니 프로젝트2) (0)	2022.04.21
[TIL] 2022.04.20 (팀 소개 웹 페이지 - 미니 프로젝트1) (1)	2022.04.20
[TIL] 2022.04.19 (Python, MongoDB, Flask 만든 웹 페이지를 도메인 등록해 보기) (1)	2022.04.19

너구리 개발일지

[TIL] 2022.04.18 (HTML, CSS, Javascript, JQuery, Ajax 간단한 웹 페이지 만들어보기)

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

티스토리툴바

[TIL] 2022.04.18 (HTML, CSS, Javascript, JQuery, Ajax 간단한 웹 페이지 만들어보기)

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

'TIL 및 WIL/TIL (Today I Learned)' Related Articles

티스토리툴바