본문 바로가기
  • 내 손안 세상 보기 니 해피
IT

초 초보 HTML Tag 코딩 호기심

by 니해피 2024. 5. 8.
반응형

html tag

사용자 입장에서 web 속살(inside)이 궁금해졌다. 개발자로 입문을 위한 길목에서 걸음마도 못하는 html tag 초초보가 호기심을 해소하기 위하여 html css javascript를 시간 나는 데로 공부하기로 하고 출발선에서 html 구조 요소 속성이 무엇인지 알아보았다.

 

티스토리블로그를 사용 중이라면 스킨편집창 HTML CSS 파일업로드에 대해서는 기본적으로 알아야 하지만 아직 많이 부족하다. 천방지축 호기심을 해소하는 것이므로 코딩을 할 줄 알거나 개발자라면 이곳에서 시간 낭비하지 마시라. 다만 html을 모르고 있어도 게임이나 웹 등 개발에 꿈을 가지고 있다면 함께 배움의 시간은 의미가 될 수 있을 것이다.

 

HTML 구조/ 코딩 실습

 

 

 

HTML 구조는 head와 Body와 나눌 수 있다. 몇 가지 기본적으로 알아야 할 태그 요소 개념을 정리하고 태그 실습에 대한 결과물을 정리하였다.

 

<! doctype html> : 문서 형식을 나타 낸다.

<html></html> : 전체페이지의 콘텐츠를 포함하는 html의 기본 요소이다.

 

1. Head 영역

<head></head> : 페이지 이용자에게 보이지 않는 head 요소로서 검색결과에 노출되는 키워드, 페이지 설명, CSS스타일 character setdeclaration 등 html 페이지의 모든 내용을 담는다.

 

<meta charset="utf-8"> : html문서의 문자 인코딩 설정을 UTF-8로 지정하는 것이다. 전 세계 사용 언어 문자 대부분이 포함되어 페이지의 텍스트 내용을 처리하므로 그냥 기계적으로 설정해 놓으면 된다.

 

메타요소 : <head>와 </head> 사이에서 base, link, script, style, title과 같은 다른 메타 관련 요소로 나타낼 수 없는 메타데이터를 나타낸다. 열리는 태그만 존재하고 닫는 태그는 존재하지 않는다.

 

메타요소는 name과 content 속성을 가진다. 페이지의 관리자를 정리하고 머리말 요약에 유용하게 쓰인다.

  • name: 전체 페이지에 적용되는 문서 레벨 메타 데이터를 제공, 메타요소가 어떤 정보 형태를 갖고 있는지 알려준다.
  • charset: 문서 인코딩에 사용한 문자 인코딩을 나타내는 문자 집합 선언이다.
  • http-equiv: 유사한 이름 http헤더가 제공하는 정보와 동일한 프래그머 지시문이다.
  • itemprop: 사용자 정의 메타데이터를 제공한다.
  • content : 실제 메타데이터의 콘텐츠이다. http-equiv 또는 name 특성 값을 담는다

[메타테그 예시]

<meta name="author" content="니 뭐니" />

<meta name="description" content="need to know get started with developing web sites and applications">

 

다음의 meta property를 넣으면 사용자에게 더 좋은 정보를 제공하므로 블로그 웹 SEO( Search engine optimization)에 도움이 되므로 참조하기 바란다.

 

<meta property="og:title" content="블로그 이름">
<meta property="og:description" content="IT 정보 코딩 게임개발 이야기"> : 콘텐츠 관련 키워드를 포함시키면 검색엔진에서 페이지를 더 많이 노출시킬 가능성(SEO)을 제공하게 된다

<meta property="og:url; content="블로그 주소">

 

<meta name="viewport" content="width=device-width, initial-scale=1.0"> : 반응형 웹페이지를 나타냄

 

[링크예시]

CSS 링크는 head에 위치하며 문서의 스타일시트(rel="stylesheet") 임을 나타내줌과 동시에 파일경로(href="my-css-file.css")의 속성을 갖는다.

  • 속성 : rel과 href : <link rel="stylesheet" href="./style.css">

설명이 필요할 땐 type=" " 과 같이 주석을 사용하여 보완을 한다.

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /> 파비콘 링크 size="144x144"와 같이 사이즈 속성 추가 할 수도 있다.

 

[script 예시]

<script src="//t1.daumcdn.net/tistory_admin/lib/jquery/jquery-1.12.4.min.js"></script> 다음 스크립트
<style type="text/css">

 

head에 들어갈 필요는 없으며 </body> 태그 바로 앞 문서 본문 맨 끝에 넣는 것이 좋다. 자바스크립트를 적용하기 전에 모든 html내용을 브라우저에서 읽고 있는지 확인하는 것이 좋다. 외부파일을 지정하는 대신에 스크립트를 <script> 안에 넣을 수도 있다.

 

[title 예시]

<title> html 구조 실습 </title> : 페이지 제목으로 설정되고, 브라우저 탭에 표시되는 제목 title 요소로서 페이지 설명 책갈피에도 사용된다.

티스토리 스킨편집창 html의 title은 '<title> [##-page_title_##]</title>'와 같이 치환자로 되어 있음을 알 수 있다.

 

 

2. Body영역

<body></body> 페이지 이용자에게 보이는 텍스트 이미지 등등 모든 콘텐츠가 포함되는 body요소이다.

class="guide_title" : HTML tag 초 초보 호기심

 

<!-- html 요소들 --> : 주석을 표시할 때 사용하며 페이지에서 사용자에게는 보이지 않는다.

 

태그 종류는 수만 가지이므로 많이 사용하는 것 위주만 알고 필요시 태그사전을 이용할 수 있을 것이며 html에서는 구조, 구체적인 표시 방법은 CSS에서 정의하므로 HTML과 CSS는 함께 공부해야 한다.

 

요소 : 기본으로 사용되는 요소들이다. 태그 요소는 셀 수 없이 많다.

  • <h1> 제목 </h1> : 제목 태그로서 h1부터 h5까지 사용하며 H1은 body요소 시작 태그 바로 아래에 넣는다.
  • <strong> 중요한 단어 </strong> : 강조할 때 사용한다. <b> 텍스트 </b> 텍스트를 굵게 표시할 때 사용 strong보다 주의력이 약하다.
  • <div> 문단 그룹 </div> 여러 문단 단락을 한 번에 지정한다.
  • <p id="nowhitespace"> 나는 html 구조를 배우는 중 </p>한 문단에 사용 줄 간격이 넓다
  • <p id="whitespace"> 나는 html 구조를 배우는 중 </p>

 

<script src="https://example.com/script.js"></script>: javascript 파일을 외부파일로부터 연결한 것이다.

 

html은 동적인 화면구성이 어려워서 자바스크립트와 같은 각종 스크립트 도움이 필요하다. 멀티미디어는 외부프로그램을 불러올(embedding) 수 있지만 브라우저에 의존하여 브라우저에 따라 엉망으로 되는 경우가 있어서 html5는 비디오 오디오처리를 위해서 별도 <video>, <audio> 태그 추가, 동적 그래픽은 <svg>, <canvas> 태그 사용을 권고하고 있다.

 

<embed> <object>를 통한 외부플러그가 제한적으로 사용가능하더라도 사용하지 말 것을 권고하고 있다. http, CSS, 자바스크립트(또는 Node.js)등으로 통합 사용되는 이유이다.

편집프로그램 VS Code(맥 Xcode), VIM, Notepad++를 이용하여 편집하는 것이 요즘은 대세로 보인다.

 

코딩 능력을 키우기 위해서는 VS Code 사용법을 하루빨리 익혀야 할 것으로 생각된다. 간단한 페이지를 만들고자 한다면 로컬웹 서버 실행보다는 월 500-1000 원의 저렴한 가격으로 웹호스팅이나 무료 웹 호스팅 계정을 개설한뒤 FTP를 통해 이용하는 방법이 추천되고 있다.

 

웹서버는 설정과정이 필요하여 초보자에게는 설정파일을 직접 편집하는 것이 간단치 않으므로 웹호스팅은 설정과정을 업체에서 해줌으로써 편하기 때문이다.

 

참고로 Html관련하여 MDN Web Docs 한국 커뮤니티에서 자세하게 알아볼 수도 있고 구글 HTML/CSS style guide를 이용할 수도 있겠다. 나와 같이 왕초초보의 경우라면 chatGPT를 활용하여 공부할 수도 있을 것이다.

 

[요약]

html파일 형식 확장자 :. html

html인코딩 : UTF-8

반응형 웹 : meta name="viewport" content="width=device-width, initial-scale=1.0"

CSS 링크 : link rel="stylesheet" href="./style.css"

Java 스크립트 : script src="000.com/script.js"

스크립트는 head에 넣을 필요가 없으며 body하단에 넣는 것이 바람직하다.

 

코딩 실습 1

덧셈 계산기







 

 

코딩 결과

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>덧셈 계산기</title>
</head>
<body>
    <h2>덧셈 계산기</h2>
    <div>
        <label for="num1">첫 번째 숫자:</label>
        <input type="number" id="num1" placeholder="첫 번째 숫자 입력"><br><br>

        <label for="num2">두 번째 숫자:</label>
        <input type="number" id="num2" placeholder="두 번째 숫자 입력"><br><br>

        <button onclick="calculate()">계산하기</button><br><br>

        <div id="result"></div>
    </div>

    <script>
        function calculate() {
            var num1 = parseFloat(document.getElementById('num1').value);
            var num2 = parseFloat(document.getElementById('num2').value);
            var result = num1 + num2;
            document.getElementById('result').innerHTML = '<strong>결과:</strong> ' + result;
        }
    </script>
</body>
</html>

 

사진=주목

 

실습 2

할부 계산기











 

 

 

 

코딩결과

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>할부 계산기</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h2>할부 계산기</h2>
    <div id="calculator">
        <label for="loanAmount">대출 금액:</label>
        <input type="number" id="loanAmount" placeholder="대출 금액 입력"><br><br>

        <label for="loanTerm">대출 기간 (개월):</label>
        <input type="number" id="loanTerm" placeholder="대출 기간 입력"><br><br>

        <label for="interestRate">연 이자율 (%):</label>
        <input type="number" id="interestRate" placeholder="연 이자율 입력"><br><br>

        <label for="repaymentType">상환 방식:</label>
        <select id="repaymentType">
            <option value="principalAndInterest">원리금균등상환</option>
            <option value="principalOnly">원금균등상환</option>
        </select><br><br>

        <button onclick="calculate()">계산하기</button><br><br>

        <div id="result"></div>
    </div>
    <script src="script.js"></script>
</body>
</html>

 

 

반응형
저작자표시 비영리 변경금지

'IT' 카테고리의 다른 글

데이터온에어 데이터 가치와 분석  (0) 2024.05.20
스마트 스위치 설치 스마트폰 데이터 백업 복원  (0) 2024.05.13
니해피의 HTML CSS 리뷰  (0) 2024.05.07
비주얼 스튜디오 코드 다운로드 개발 환경 설정  (1) 2024.05.03
자동차 할부 계산기 HTML CSS JavaScript 코드  (0) 2024.04.29

관련글

댓글

티스토리툴바