기타 공부들

[HTML] 기본 개념 & 태그 정리

diddl 2021. 10. 1. 16:26
반응형

내가 보려고 정리하는 html 기본 문법.. 간단하게 정리해본다.

 

HTML(Hyper Text Markup Language)은 웹페이지를 만들기 위한 언어로 웹에서 "뼈대"의 역할을 담당한다.

Hyper Text - 문서와 문서가 링크로 연결되어 있음

Markup - tag로 이루어져 있음

Language - 언어

HTML의 구성 요소

Ex)  <p class = "test">This is test</p>

  • 태그(tag)
    - 정보를 정의하는 형식
    - 여는 태그(opening tag), 위 예시에서 <p class = "test">에 해당
    - 닫는 태그(closing tag), 위 예시에서 </p>에 해당

  • 속성(attribute)
    - 요소의 여는 태그에서 사용되는 구체화된 명령어 체계를 의미
    - 위 예시에서 class가 이에 해당한다.
    - 태그에 속성을 부여하면 태그의 성격을 좀 더 구체화 시킬 수 있다. 

  • 내용(content)
    - Text에 해당
    - 위 예시에서 This is test와 같은 텍스트가 이에 해당한다.

  • 요소(element)
    - 여는 태그와 닫는 태그로 나타내어지는 모든 명령어들
    - 즉 위 예시 전체가 한 요소이다.

  • 변수(Arguments)
    - 속성과 관련된 값
    - 위 예시에서 test에 해당하는 부분이 변수라 할 수 있다.

 

HTML 문서 기본 구조

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html>
  • <!DOCTYPE html>
    - DTD(Document Type Definition) 선언
    - 문서의 유형 지정, 웹 브라우저가 이 문서를 어떻게 해석해야 하는지 알려준다.

  • <html></html>
    - 전체 페이지의 모든 내용을 감싸는 요소이다.

  • <head></head> 태그
    - HTML문서에 대한 메타 데이터가 위치(문서를 정의하는 데이터)
    - 메타 데이터: <title>, <style>, <meta>, <link>,<script>,<base>
    - 위에서 <meta charset="UTF-8">은 문자셋으로 저장되어 있음을 나타내는 용도이다.
    - <title>은 제목, 브라우저 탭에 보여지는 제목에 해당한다.

  • <body></body> 태그
    - 문서의 몸체, 문서에서 보여지는 모든 것을 관장한다.
    - 몸체 부분에서 사용되는 태그들은 아래에 따로 정리했다.

 

HTML에서의 주석

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--이렇게 주석을 달 수 있다-->
</body>
</html>
  • <!-- 쓰고 싶은 설명.. -->
    - 이러한 형식으로 주석을 달 수 있다.

HTML 주요 태그들

1. <div>

  - 구역을 나누는 태그, 콘텐츠들을 묶을 때 사용한다.

 

2. <p>

  - 문단을 나누는 태그, 내용을 한 문단으로 나눠 내용의 위 아래 단락이 생김.

 

3. <ul>

  - unordered list, 순서가 없는 list

  - 쉽게 말해 글자 앞에 • <- 요론게 붙는 것이다.

  • 요로케..
  • 불릿이 붙는다

4. <ol>

  - ordered list, 순서가 있는 list

  - 순서가 있기 때문에 <ul>과 달리 숫자나 영문이 들어간다.

  1. 이러케
  2. 숫자가 붙는다.

5. <li>

  - <ul>이나 <ol>안에서 각 항목 작성 시 사용.

<ul> <ol>
<ul>
    <li> bullet point 1 </li>
    <li> bullet point 2 </li>
</ul>		 <ol>
    <li> number point 1 </li>
    <li> number point 2 </li>
</ol>

 

6. <h1> ~ <h6>

  - 제목을 나타내는 태그.
  - <h1>은 대제목 --> 페이지마다 하나씩은 꼭 쓰는, <h2>는 소제목

  - 숫자가 커질수록 그냥 크기가 작아진다..

 

7. <hr>

  - 구분선을 나타낸다.

 

8. <span>

  - 특정 글자를 꾸밀 때 사용한다, 아래 예시 참고..

span 태그입니다: 특정 <span style="color:red">글자</span>를 꾸밀 때 써요

결과는 위와 같이 <span> 태그에 감싸져 있는 부분만 꾸며져서 나온다.

 

9. <a>

  - 하이퍼링크, 특정 사이트 연결할 때 사용

a 태그입니다: <a href="http://naver.com/"> 하이퍼링크 </a>

이런 식으로 사용 가능하다. 만약 null링크로 사용하고 싶다면 따옴표 자리에 #을 넣어주면 된다.

a 태그입니다: <a href="#"> null링크 </a>

 

10. <img>

  - 이미지 태그, 이미지를 삽입하고 싶을 때 사용한다.

img 태그입니다: <img src="이미지 주소" />

 

11. <input>

  - 사용자가 정보를 입력하는 부분을 만들 때 사용

  - 지정하는 type에 따라 어떤 형식으로 받을지 정보를 결정할 수 있다.

 input 태그입니다: <input type="text" />

12. <button>

  - 버튼을 생성하는 태그

button 태그입니다: <button> 버튼입니다</button>

13. <textarea>

  - 글 작성 박스? 구역을 나타내는 태그

textarea 태그입니다: <textarea>글을 작성하세요</textarea>

 

반응형
저작자표시 (새창열림)