HTML

Hyper Text Markup Language로 언어이자 문서의 한 종류로서 웹을 이루는 가장 기본적인 문서다.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>title</title>
</head>
<body>
  
</body>
</html>

위 코드는 html을 구성하는 가장 기본적인 형태이다. 무슨 뜻인지 하나하나 살펴보자

html의 구성요소

html을 하면 알아야 할 4가지가 있는데 

1.요소

  •  요소는 시작태그와 종료태그로 이루어진 모든 명령어를 의미한다.

2.태그

  • 태그는 <괄호 안에 들어가는 명령어를 뜻한다.> 얼핏 들으면 요소와 같아 보이지만 요소의 하위 개념이다.
  • 대개 태그는 시작태그와 종료태그로 이루어져 있다.
  • ex) <title>title<title> : <title> 타이틀 태그, <p> 문단태그

3.속성

  • 속성은 설정 값으로 태그의 세부 설정 기능을 담당한다.
  • ex) <p align=””> : p태그에 align이라는 속성(세부설정)을 가진다.

4.변수(Argument)

  • 속성이 가지는 값을 의미한다.

즉, 종합하자면 <p align=”center”></p> : 여러가지 요소 중 p태그는 align이라는 속성에 center라는 변수를 가지고 있다. 라고 말 할 수 있다.

자 그럼 위 코드를 하나씩 해석해 보자

  1. <!DOCTYPE html> : html5에서 부터 적용되는 것으로 현재 문서가 html이라는 것을 명시해 주고 있다.
  2. <html> : 모든 태그들은 <html> 태그 안에 작성 되어야 한다.
  3. <meta> :해당 html 파일의 구성요소를 설정하는 태그라고 생각하면 된다. 해당 html파일은 charset(캐릭터셋)으로 utf-8을 가진다.
  4. <title> : 해당 문서 상단의 타이틀을 성정하는 태그이다.
  5. <head> : 해당 문서의 제목, 제작자, 설정등 문서에 대한 설명이 들어가 있는 부분으로 해당 문서에 대한 참고사항들이 들어있는 태그이다.
  6. <body> : html에서 가장 의미있고 중요한 태그로 실제 사용자에게 보여지는 태그이다. 따라서 <body>태그 안에 있는 명령어와 글자들은 웹에 보여지게 된다.
주석

html 주석은 <! —주석 — > 이런 식으로 작성하게 된다.

특징
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>title</title>
</head>
<body>
   html 언어의 특징
  1. 개행이 되지 않는다.
  이렇게              말    이    다
  . 참
  신
             기          하 다.
  2. <!--주석 처리 한 것은 보이면서 보이지 않는다. -->
  3. 사실 태그를 안해도 된다. 그럼 왜하는가? 설정을 하지 않는다면
  이렇게 사실 그냥 메모장과 다름이 없다.
  태그 설정을 하여 이 부분이 정확히 무엇인지를 명시하는것이 훨씬 효율적이기 때문이다.
  
</body>
</html>

위 코드 실행 결과

위 코드 실행 결과는 흰 배경이고 메모장은 해당 문서에서 소스보기를 한 결과이다.

여기서 html주석의 문제점이 나타나게 된다.

html주석은 실행결과에서 나오지 않지만 실제로 소스 보기를 통해서 확인하면 볼 수 있으므로 보안이 좋지 않다.

그리고 두 번째 문제점은 그럼 어떻게 개행을 해야 하는가 이다. 이는 아래 태그에서 학습할 수 있다.

태그

모든 태그를 다 언급할 수 없지만 자주 사용하는 태그들을 몇 개 알아보자

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>title</title>
  <writer></writer>
</head>
<body>
  <header>
    <h1>여기는 header 영역입니다.</h1>
  </header>
  <nav>
    <ul>
      <li><h1>리스트1</h1></li>
      <li><h2>리스트2</h2></li>
      <li><h3>리스트3</h3></li>
      <li><h4>리스트4</h0></li>
      <li><a href="apple.co.kr"> apple홈페이지</a></li>
    </ul>
  </nav>
  <main>
    여기는 main입니다. <br>
    개행이 됩니다.
    이것은 개행이 안됩니다. &nbsp
    이것은 띄어쓰기 입니다.
    <p>여기는 1문단 입니다.</p>
    따라서 1문단이 끝나므로 뒤 아래로 개행이 됩니다.
    <pre>
pre 태그 안의 이곳에 작성하는 모든 것은 전부 그대로 나타나게 됩니다.
개행 태그 없이 그냥 작성해도 되고 <br>개행태그 해서 작성해도 됩니다.
    </pre>
  </main>
  <footer>
    <h2>여기는 footer 영역입니다.</h2>
  </footer>
</body>
</html>

위 코드 실행 결과

먼저 레이아웃이다.

레이아웃은 말 그대로 틀을 잡아주는 것인데 아래 그림과 같이 html레이아웃이 정해져있다. 이에 맞춰 위치에 작성 해 주면 된다.

http://tcpschool.com/html/html_space_layouts

여기서 레이아웃 외에 다른 태그들을 볼 수 있는데

  1. <ul> unordered list : 순서 없는 목록을 만들 때 사용하게 된다.
  2. <li> list item : 리스트 목록을 작성할 때 사용하게 된다.
  3. <h?> heading : 표제로 정의된다. h뒤의 숫자가 작을수록 큰고 굵은 문자가 나오게 된다.
  4. <a> anchor : 링크를 만들 때 사용하게 된다. 속성으로 href를 가지고 뒤에 경로를 작성하면 클릭시에 해당 경로로 이동하게 된다.
  5. <br> line break : 개행시에 사용하게 된다.
  6. &nbsp : 띄어쓰기를 할 때 사용하게 된다. 여러번 쓰면 여러면 띄어쓰기 할 수 있다.
  7. <p> paragraph : 문단을 형성할 때 사용하게 된다. br태그로 개행하여 문단을 나눌 수 있지만 br태그를 남용하게 되면 가독성이 떨어지기 때문에 p태그를 사용하는것을 권장한다.
  8. <pre> : 해당 태그 안에 적은 문자는 태그를 제외하고 전부 작성한 형식과 똑같이 나오게 된다.

이렇게 기본적인 태그가 있다. 이 외에 table 태그나, img 태그 등 여러가지 태그가 더 있지만 이는 사용하면서 필요할 때 마다 더 찾아보도록 하자. 이는 프로젝트 부분에서 더 볼 수 있을 것이다.

 

 

'FRONT > Html' 카테고리의 다른 글

[Front] HTML input 태그(tag)  (0) 2020.06.13
[Front] HTML 작성 가이드  (0) 2020.06.11
[Front] HTML 태그(tag)  (0) 2020.06.10

+ Recent posts

티스토리툴바