Multi Developer SuHo

[HTML 기초] HTML 구조와 문법, 태그 및 종류, 경로, 주석 본문

HTML 기록

[HTML 기초] HTML 구조와 문법, 태그 및 종류, 경로, 주석

Dreaming Developer Student 2024. 12. 31. 17:45
SMALL

목차

1. HTML 개념

2. HTML 구조

3. 





안녕하세요~ HTML의 구조와 문법, 자주 사용되는 태그 및 종류를 알아보겠습니다. HTML 이 어떤 것인지? 알고 계신가요? 아시는 분들도 있으실거고, 모르시는 분들도 있으실겁니다. 소개할 내용에서는 자주 사용되는 태그들과  태그들이 웹 브라우저에서 어떤 기능과 효과를 나타내는지 알아보겠습니다.  




HTML이란? 
HTML을  들어보신 적 있으신가요? 전공자 분들은 들어보셨을지도 모르겠지만, 비전공자 분들은  처음듣는 키워드일 수 있습니다.  
HTML은 hyperText Markup Language  하이퍼 링크  쉽게 말해서 하이퍼 링크가 포함된 문서 라고 생각하시면 편합니다. 




하이퍼 링크란?
하이퍼 링크는 원하는 텍스트에  하이퍼 링크를 추가하면 텍스트를 클릭하고 원하는 페이지로 요청을 보낼 수 있습니다.

문서란? 
문서라는 뜻은 우리가 흔히 알고 있는 메모장 이라고 생각하시면 됩니다. 

메모장? 
메모장은 브라우저가 해석할 수 있는 문서 파일 입니다.

왜? 메모장을 냅두고 vscode를 사용목적은? 
간단하게 메모장으로 작성을 해도 무방하지만, 일일히 하나하나 작성하기에는 무리가 있어, vscode를 사용합니다.  
vscode는 개발자가 HTML 혹은 CSS, JS 등등의 파일을 작성할 때 기능을 제공해줍니다.




태그가 무엇인지? 
`<태그이름>` 이런 형태를 '태그' 라고 부른다.

HTML 문법
우리가 사용하는 언어들은 문법이 정해져 있습니다. 예를 들면 영어에서도 문법이 있는데요 컴퓨터 프로그래밍 언어에서도 문법이 있습니다. 개발자가 정해놓은 방법으로 코드를 작성하기 때문에 HTML도 문법이 있고 HTML 문법으로 코드를 작성해야 합니다. 

부모 태그 , 자식 태그 

태그는 자식과 부모가 있습니다. 

<!-- 
    <태그 이름> 
        <자식 태그></자식 태그> 
    </태그 이름>
 -->


여기서 <태그 이름>과 </태그 이름> 사이에 다른 태그들이 포함될 수 있습니다. 이처럼 태그들은 서로 포함 관계를 이루며, 부모 태그와 자식 태그의 관계를 형성합니다.
HTML의 구조

<!--
<!DOCTYPE html> : 문서의 형식을 html5를 사용한다는 뜻  (시멘틱 태그)
<html lang="en"> : html 문서라는 내용이고 lang은 이후 내용 속성이라고 부른다 
이후에 나올 내용~ en은 영문으로 작성된 문서라고 알려주는 것.
 -->

 

HTML 기본 구조 자동 생성 단축키 
1. 코드에서 !를 입력하고 엔터키를 누르면 HTML 기본 구조를 완성해줍니다.
개발자가 따로 입력할 필요없이 다음 코드처럼 자동으로 생성해줍니다. 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>


2. html 를 키워드를 입력하면 다음 이미지처럼 키워드가 자동으로 생성됩니다. 여기서 html : 5 를 선택하시면 위에 있는 코드를 생성해줍니다. 



자주 사용되는 태그

<div></div>
<span></span>
<a></a>
<img/>


<div> 태그 
<div> 태그는  기본적으로 많이 사용하는 태그 중에 하나입니다. 영역을나눌 때 사용되는 태그입니다.

<a> 태그 : 앵커 태그라고도 불리는데요, 페이지를 이동할 때 사용하는 태그입니다. 

<img> 태그 : 웹 페이지에 미디어 콘텐츠를 넣고 싶을 때 사용하는 태그입니다.
src 속성 - 이미지의 경로를 작성하면 해당 이미지를 가져와서 웹 브라우저에 나타냅니다.
alt 속성 - 이미지를 정상적으로 가져오지 못한경우 깨진 이미지의 대한 설명을 작성할 수 있습니다. 

<img /> 태그 같은 경우는 여는 태그와  닫는 태그의 구분이 없는 특별한 동작하는 태그입니다. 빈 태그가 닫는 태그 없이 사용되는 이유는 내용이 포함될 태그가 아니기 때문이다.

중요한 요소 2가지 
블록 요소 : 블록은 한줄을 다 차지하는 영역을 가집니다. 옆에 내용이 영역을 차지할 수 없습니다. 
인라인 요소 : 인라인 요소는 태그안의 내용의 크기만큼 영역을 차지합니다. 반비례한다고 생각하시면 더 편하겠죠?

리스트 형식의 내용을 작성할 때 사용하는 태그

  • <ul> 태그 : 순서가 없는 리스트 작성할 때 사용하는 태그
  • <ol> 태그 : 순서가 있는 리스트 작성할 때 사용하는 태그
  • <li>  태그 : 리스트를 표현하는 태그 리스트 아이템

이렇게   <ul> 태그를 사용하면 순서 없이 검은 불렛(bullet) 처럼 나열되고, <ol> 태그를 사용하면 1,2,3,4 순서대로 나열됩니다. 




입력창의 내용을 작성할 때 사용하는 태그

<input> 태그 : 입력창의 기능을 사용할 때 사용하는 태그 

- input 태그의 속성 : type input에 작성하는 내용이 어떤 타입인지 정의하는 것 text  OR 비밀번호 password 등

 

<label> 태그 : input 태그에 해당하는 내용을 작성해야하는지 알려줄 때

다음 이미지는 <input> 태그와 <label> 태그를 사용한 화면입니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>로그인 페이지</title>
    <style>
        h1{
            text-align: center;
        }
        label, input {
            color:rgb(54, 67, 212);
            font-size: 20px;
            
        }
        div{
            text-align: center;
            
        }
        a{
           line-height: 5rem;
        }
        body {
            background-color: khaki;
        }
    </style>
</head>
<body>
    <h1> 로그인 </h1>

    <div>
        <label>아이디</label>
        <input type="text">
        <label>비밀번호</label>
        <input type="password">
    </div>

    <div>
        <a href="./index2.html"> 회원가입 페이지로 이동</a>
    </div>
    
    <div>
        <img src="https://mblogthumb-phinf.pstatic.net/MjAyMTA0MDVfNjkg/MDAxNjE3NTUwMDA5OTEx.KyKQjl3D2BM3w5-P4oxrt7bjHJtcr3ASTo7FWVBWFYIg.w08gRxcdpt0ws4b5pFNrYLpmV6gsceiipwBfq1JluAwg.JPEG.se413496/ea025fa1eb6c40ea08071bf4b828d9cb.jpg?type=w800" alt="">
    </div>
</body>
</html>

<style> 태그는 제가 따로 학습한 부분이니 넘어가 주시면 됩니다.  여기서는 아이디와 비밀번호 입력창을 <input> 태그와 <label> 태그를 사용하였습니다.




텍스트를 작성할 때 글자의 크기를 조절할 수 있는 태그 
<h1>, <h2>, <h3>, <h4>, <h5> 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>안녕하세요</h1>
    <h2>안녕하세요</h2>
    <h3>안녕하세요</h3>
    <h4>안녕하세요</h4>
    <h5>안녕하세요</h5>
    <h6>안녕하세요</h6>
</body>
</html>


 

경로(Route)
보통 루트라고 읽습니다.  우리가 알고 있는 네비게이션을 보시면 경로가 나타나죠?  같은 의미입니다. 
여기서는 경로의 종류가 2가지 입니다. 
/ :  절대 경로를 말하며, 경로 작업 환경의 가장 위에 있는 폴더, 쉽게 말해 경로 작업 환경의 최상단의 경로의 위치 부터 경로를 지정하는 것을 말합니다.  

./ : 상대 경로를 말하며, 파일이 있는 경로의 위치로 부터 경로를 지정하는 것 입니다. 


주석이란? 
개발자가 코드의 이해를 돕기 위해서 사용하는 메모
주석의 영역으로 만드는 단축키 ( CTRL + K + C)

html의 주석 영역

<!-- 내용 --> 
<!-- <태그 이름></태그 이름> *** 중요 -->


이상으로 HTML 기본 구조와 태그 개념 및 종류들을 알아보았습니다. 

LIST
저작자표시

'HTML 기록' 카테고리의 다른 글

[HTML 실습] 간단한 로그인 페이지 , 회원가입 페이지 만들기  (2) 2024.12.31
'HTML 기록' Related Articles more