To Be myself

[Web] HTML 기초 본문

웹

[Web] HTML 기초

투비마 2023. 8. 27. 00:53

HTML

HTML은 웹페이지를 구성하는 하이퍼텍스트 마크업 언어로 프로그래밍 언어가 아닌, 페이지 뼈대를 위한 표현언어에 가깝다.

자주 사용하는 HTML 태그

Head

페이지의 정보나 링크 등이 포함됨

  • meta : 해당 페이지의 기본 정보 (예. og태그 등)
  • title : 페이지 이름으로 파비콘에 표시됨

Body

페이지의 본문(내용)이 담김

  • div : 구역을 나누는 공간 태그, 단락이 나뉨
  • p : 문단 태그, 단락이 나뉨
  • ul : 순서가 없는 리스트 태그 (・)
  • ol : 순서가 있는 리스트 태그 (1, 2, 3)
    – li : ul과 ol 태그의 하위 리스트 태그
  • h1 : 제목1, SEO 등 검색의 데이터로 활용
  • h2~h6 : 제목2~제목6, 숫자가 커질 수록 크기가 작아짐
  • span : 특정 부분을 꾸밀 때
  • a : 하이퍼링크 태그
  • hr : 구분선 태그
  • img : 이미지 태그
  • button : 버튼 태그
  • input : 입력값 태그, type 속성으로 button, password 등 지정할 수 있음
  • textrea : 장문 쓰기 태그

Foot

주로 출처나 주소 등 페이지 제작자에 대한 정보가 들어감

 

HTML 예제코드

<!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>
    <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"/>
    <div>
        <h1><span style="color:green">회원가입 </span> 페이지</h1>
        <h3>아이디, 비밀번호, 자기소개를 입력해주세요</h3>
        <ul>
            <li> 1인당 1개 계정만 가능</li>
            <li> 탈퇴 후에는 동일 ID로 가입 불가</li>
        </ul>
    </div>

    <p>ID : <input type="text"></p>
    <p>PW : <input type="password"></p>
    <p>자기소개: <textarea>소개글을 입력하세요.</textarea></p>
    <button>회원가입</button>
    <button>로그인</button>
    
    <hr>
    <a href="http://google.com/"> 하이퍼링크</a>
    </body>
</html>
제목

회원가입 페이지

아이디, 비밀번호, 자기소개를 입력해주세요

  • 1인당 1개 계정만 가능
  • 탈퇴 후에는 동일 ID로 가입 불가

ID :

PW :

자기소개:

하이퍼링크

 

 

 

 

'웹' 카테고리의 다른 글

[Web] CSS 기초 + Bootstrap  (0) 2023.08.27
'웹' Related Articles more