[JavaScript] - HTML / CSS / JavaScript

JavaScript

[JavaScript] - HTML / CSS / JavaScript

nam_ji 2023. 12. 31. 23:22

자바스크립트 기초

HTML

HTML이란 Hyper Text Markup Language의 약어로 Hyper Text (웹 페이지에서 다른 페이지로 이동할 수 있도록 하는 것) 기능을 가진 문서를 만드는 언어입니다.
구조를 설계할 때 사용되는 언어로 Typer Link 시스템을 가지고 있으며, 흔히 말하는 웹 페이지를 위한 마크업 언어라고 할 수 있습니다.
- 웹 페이지는 월드 와이드 웹 상에 있는 개개의 문서를 가리킵니다.
- .gif / .jpg / .Ai / .pdf / .doc / .hwp 이와 같은 확장자 포맷이 있듯리 HTML은 .htm / .html 확장자 포맷을 가지고 있습니다.
- 이 HTML 문서는 단순히 텍스트 파일에 불과하고 웹 브라우저가 해석을 해서 구조를 통해 화면에 렌더링 해주게 되고 사용자는 View라고 하는 스크린을 통해 접하게 되는 것입니다.
- 월드 와이드 웹(World Wide Web, WWW, W3)은 인터넷에 연결된 컴퓨터들을 통해 사람들이 정보를 공유할 수 있는 전 세계적인 정보 공간을 말합니다.

Visual Studio Code로 html 작성 방법을 설명해 보겠습니다.

VScode를 실행하고 새파일 생성을 통해 파일을 생성할 수 있습니다.
파일은 파일명.html이라고 생성하면 됩니다.
이후 html을 입력하면 html, html5, html:xml 의 3가지 선택지가 나오는데 html5를 선택하면 html의 기본 구조가 작성됩니다.
head에는 html의 제목과 같은 영역입니다.

head에 대한 자세한 내용은 body에 작성하면 됩니다.

몇가지 태그에 대한 설명

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

CSS는 Cascading Style Sheets의 약어로 HTML, XHTML, XML 같은 문서의 스타일을 꾸밀 때 사용하는 스타일 시트언어입니다.
VScode로 CSS 작성 방법을 설명해 보겠습니다.
CSS는 HTML파일 생성 후 기본 틀을 잡은 코드를 작성하고 그 안에 style 태그를 만들어 사용하면 됩니다.

style태그는 head태그 안에서 사용하게 됩니다.

CSS 예시

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>1주차 1-9강의</title>
    <style>
      @import url("https://fonts.googleapis.com/css2?family=Hahmlet:wght@300&display=swap");

      * {
        font-family: "Hahmlet", 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>
  <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>
    <!-- 줄맞춤 alt + shift + f -->
  </body>
</html>

JavaScript

자바스크립트는 '웹페이지에 생동감을 불어넣기 위해' 만들어진 프로그래밍 언어입니다.
자바스크립트로 작성한 프로그램을 스크립트라고 부릅니다. 스크립트는 웹페이지의 HTML 안에 작성할 수 있는데, 웹페이지를 불러올 때 스크립트가 자동으로 실행됩니다.
스크립트는 특별한 준비나 컴파일 없이 보통의 문자 형태로 작성할 수 있고, 실행도 할 수 있습니다.
이런 관점에서 보면 자바스크립트는 자바와는 매우 다른 언어라고 할 수 있습니다.

스크립트는 HTML을 이용하여 기본 뼈대를 잡고 CSS를 이용하여 뼈대를 꾸민 후 생동감을 부여하기 위해 사용하는 언어입니다. 그래서 html의 head 안에 스크립트 태그를 만들고 그 안에서 사용하면 됩니다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>javascript 기초문법</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>
    	이 안에 html을 꾸면주는 코드를 작성하면 됩니다.
    </style>
    <script>
        let ages = [15, 30, 25, 5, 40, 10];
        // for (let i = 0; i < ages.length; i++) {
        //     console.log(ages[i]);
        // }
        ages.forEach(e => {
            if (e < 20) {
                console.log('청소년입니다.');
            } else {
                console.log('성인입니다.');
            }
        });
        let age = 15;
        if (age < 20) {
            console.log('청소년입니다.')
        } else {
            console.log('성인입니다.')
        }
    </script>
  </head>
  <body>
 	html를 이용하여 틀을 잡고 이 내용을 script를 통해 생동감 있게 사용할 수 있습니다.
  </body>
</html>