개발블로그
article thumbnail
Published 2020. 12. 27. 16:44
HTML Front-End

기초 HTML 문법

 

기본 형태

 

태그(TAG)는 각자의 의미를 가지고 있으며 다음과 같은 형태를 가진다.

<TAG></TAG>
<TAG>CONTENT</TAG>
<h1>토끼와 거북이</h1>
<p>옛날 옛적에 토끼와 거북이가 살았다.</p>

<!-- 다음과 같이 이해할 수 있다. -->
<주제1>토끼와 거북이</주제1>
<문단1>옛날 옛적에 토끼와 거북이가 살았다.</문단1>

태그는 열리고(open, start) 닫히는(close, end) 태그 구조를 가지고 있으며 이는 한 쌍이다. 이를 요소(element)라고 한다.

이 구조는 태그의 범위를 만들어 준다.

 

닫히는 태그는 태그 이름 앞에 /(슬래시)가 붙는다.

 

속성(Attributes)과 값(Value)

 

태그(요소)의 기능을 확장하기 위해 '속성'을 사용할 수 있다

<TAG 속성="값"></TAG>
<img src="./my_photo.jpg" alt="내 프로필 사진" />
<div class="name">홍길동</div>

<!-- 다음과 같이 이해할 수 있습니다. -->
<이미지삽입 소스위치="./my_photo.jpg" 대체텍스트="내 프로필 사진" />
<의미없는분할 태그별명="name">홍길동</의미없는분할>

 

<img />는 이미지를 삽입할 때 사용하는 태그

img는 이미지의 약어

src(source)를 사용해서 삽입할 이미지의 경로 지정

alt(alternative)는 대체 텍스트(이미지가 삽입되지 못했을 때 대신해서 나타나는 글자)를 의미

 

div(division = 분할)는 의미를 가지지 않는 태그로 어떤 내용이든 묶어낼(Wrap) 수 있다.

class는 태그가 가지는 별명을 지정하는 것.

 

<img />는 닫히는 태그가 없는 빈 태그(Empty Tag)라고 한다.

 

부모와 자식 요소

 

태그A가 태그B의 컨텐츠로 사용되면, 태그B는 태그A의 부모 요소, 태그A는 태그B의 자식 요소라고 한다.

<PARENT>
	<CHILD></CHILD>
</PARENT>
<section class="fruits">
  <h1>과일 목록</h1>
  <ul>
    <li>사과</li>
    <li>딸기</li>
    <li>바나나</li>
    <li>오렌지</li>
  </ul>
</section>

<!-- 다음과 같이 이해할 수 있습니다. -->
<섹션영역 태그별명="fruits">
  <주제1>과일 목록</주제1>
  <순서없는목록>
    <항목>사과</항목>
    <항목>딸기</항목>
    <항목>바나나</항목>
    <항목>오렌지</항목>
  </순서없는목록>
</섹션영역>

<section> 안에 컨텐츠는 <h1>, <ul>(unordered list), <li>가 있고 <ul> 안에는 <li>가 있다.

<section>은 <h1>과 <ul>의 부모 요소이고

<ul>은 <li>의 부모 요소이다.

반대로 <h1>과 <ul>은 <section>의 자식 요소이고

<li>는 <ul>의 자식 요소이다.

 

<section>은 <li>의 조상(상위) 요소이고, <li>는 <section>의 후손(자손, 하위) 요소라고 한다.

 

빈 태그 (혹은 Self-closing Tag라고 함)

 

HTML에는 닫히는 개념이 없는 태그들이 있다.

<!-- `/`가 없는 빈 태그 -->
<TAG>

<!-- `/`가 있는 빈 태그 -->
<TAG/>
<TAG />

(원래 /가 없는 태그는 HTML1,2,3,4에서 썼고 /가 있는 태그는 XHTML에서 쓸 수 있었는데 HTML5는 두 개 다 쓸 수 있다.)

 

XHTML 버전이나 린트(Lint) 환경 혹은 프레임워크 세팅에 따라 /를 사용하는 것이 필수가 될 수 있다.

대부분의 경우 빈 태그들은 보통 닫히는 태그가 없어 범위가 존재하지 않아 태그의 의미보다 확장해서 쓰는 <속성="값">이 붙는 경우가 많다.

 

HTML 문서의 범위

 

index.html  같은 HTML 파일을 우리는 HTML 문서라고 표현할 수 있다.

HTML 문서의 범위를 나타내는 태그들을 알아보자.

<!DOCTYPE html>
<html>
  <head>
    문서의 정보
  </head>
  <body>
    문서의 구조
  </body>
</html>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="author" content="홍길동">
    <meta name="description" content="우리 사이트가 최고!">
    <title>내 사이트</title>
    <link rel="stylesheet" href="./css/main.css">
    <script src="./js/main.js"></script>
</head>
<body>
    <section>
      <h1></h1>
      <div>
        <ul>
          <li></li>
          <li></li>
        </ul>
      </div>
    </section>
</body>
</html>

 

<html>은 html 문서의 전체 범위를 나타낼 때 사용

<head>는 전체 문서의 정보에 해당하는 부분을 정의

<body>는 실제 화면에 출력 될 구조적인 부분을 정의

 

 

DOCTYPE(DTD, 버전 지정)

 

DOCTYPE(DTD, Document Type Definition)은 마크업 언어에서 문서 형식을 정의

웹 브라우저에서 어떠한 버전으로 해석해서 출력할지 정의하는 부분.

 

HTML은 크게 1, 2, 3, 4, X-, 5 버전이 있다.
<!-- HTML 5 -->
<!DOCTYPE html>

<!-- XHTML 1.0 Transitional -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

문서형 정보 보기

 

HTML 문서의 정보

 

<head></head> 안에서 사용하는 태그들은 HTML 문서의 정보를 가지고 있다.

 

TITLE(웹 페이지의 제목)

 

HTML 문서의 제목을 정의

웹 브라우저의 각 사이트 탭에서 이름으로 표시

<head>
  <title>네이버</title>
</head>

 

META(웹 페이지의 정보)

 

타이틀이나 링크나 스타일이나 스크립트 태그에서 나타낼 수 없는 기타 모든 정보들을 표시하는 정보를 나타내는 태그

HTML 문서(웹페이지)에 관한 정보(표시 방식, 제작자(소유자), 내용, 키워드 등)를 검색엔진이나 브라우저에 제공한다.

빈(Empty) 태그이다.

<head>
  <meta charset="UTF-8">
  <meta name="author" content="홍길동">
  <meta name="description" content="우리 사이트가 최고!">
</head>

<!-- 다음과 같이 이해할 수 있습니다. -->
<문서의정보범위>
  <정보 문자인코딩방식="UTF-8">
  <정보 정보종류="사이트제작자" 정보값="홍길동">
  <정보 정보종류="사이트설명" 정보값="우리 사이트가 최고!">
</문서의정보범위>

 

각 태그는 자신이 사용할 수 있는 속성과 값이 정해져 있다.

(어느 태그에서나 사용할 수 있는 '전역(Global) 속성'도 있음)

 

<meta>에서 사용할 수 있는 속성

  • char(acter)set : 전체 문서의 문자 인코딩 방식 정의
    • 문자 인코딩 방식 : 화면에 텍스트 출력 방식을 설정
    • UTF-8 : 아시아권 언어 문자를 표현하는데 특화되어 있는 문자 인코딩 방식(과거에는 EUC-KR 사용)
  • name : 검색 엔진 등에 제공하기 위한 정보의 종류(메타데이터)
    • author, description, keywords, viewport 등
  • content : 정보의 값
    • name이나 http-equiv 속성 값 제공

LINK(CSS 불러오기)

 

외부 문서(html, css, favicon 등) 연결할 때 사용

특히 HTML 외부에서 작성된 CSS문서를 불러와 연결할 때 사용

빈(Empty) 태그이다.

 

<head>
  <link rel="stylesheet" href="./css/main.css">
  <link rel="icon" href="./favicon.png">
</head>

<!-- 다음과 같이 이해할 수 있습니다. -->
<문서의정보범위>
  <외부문서연결 관계="CSS" 문서경로="./css/main.css">
  <외부문서연결 관계="사이트대표아이콘" 문서경로="./favicon.png">
</문서의정보범위>

 

  • rel(=relationship) : (필수)현재 문서와 외부 분서와의 관계 지정
    • stylesheet, icon 등..
  • href(=hypertext reference) : 외부 문서의 위치(경로)를 지정

 

STYLE(CSS 작성하기)

 

CSS를 외부 문서에서 작성해 연결하는게 아니라 HTML 문서 내부에서 작성할 때 사용

 

<style>
  img {
    width: 100px;
    height: 200px;
  }
  p {
    font-size: 20px;
    font-weight: bold;
  }
</style>

<!-- 다음과 같이 이해할 수 있습니다. -->
<스타일정의>
  <!-- CSS 코드 -->
</스타일정의>

 

SCRIPT(JS 불러오거나 작성하기)

 

HTML 문서에서 CSS는, 작성된 CSS를 <link>로 불러오거나 <style>태그를 통해 직접 작성할 수 있었지만

JHS는 <script></script>로 이 2가지 방식(불러오거나 직접 작성하는것)을 모두 사용할 수 있다.

 

<!-- 불러오기 -->
<script src="./js/main.js"></script>

<!-- 작성하기 -->
<script>
  function windowOnClickHandler(event) {
    console.log(event);
  }
  window.addEventListener('click', windowOnClickHandler);
</script>

<!-- 다음과 같이 이해할 수 있습니다. -->

<!-- 불러오기 -->
<자바스크립트 문서경로="./js/main.js"></자바스크립트>

<!-- 작성하기 -->
<자바스크립트>
  <!-- JS 코드 -->
</자바스크립트>

 

HTML문서의 구조

 

<body></body> 안에서 사용하는 태그들은 HTML 문서의 구조를 나타낸다.

 

DIV(막 쓰는 태그)

<div></div>의 div는 division의 약자로 분할을 뜻하고 '문서의 부분이나 섹션을 정의'한다.

많은 경우 단순히 특정 범위를 묶는(wrap) 용도로 사용하며 보통 이렇게 묶인 부분들에 CSS나 JS를 적용한다.

 

<body>
  <div>
    <p></p>
  </div>
  <div>
    <div>
      <h1></h1>
      <p></p>
    </div>
  </div>
</body>

<!-- 다음과 같이 이해할 수 있습니다. -->
<body>
  <묶음1>
    <p></p>
  </묶음1>
  <묶음2>
    <묶음2-1>
      <h1></h1>
      <p></p>
    </묶음2-1>
  </묶음2>
</body>

 

IMG(이미지 넣는 태그)

 

<img>는 HTML에 이미지를 삽입할 때 사용

(이미지 삽입 방식은 크게 2가지로, html의 img와 css의 background가 있다)

 

<body>
  <img src="./kitty.png" alt="냥이">
</body>

<!-- 다음과 같이 이해할 수 있습니다. -->
<body>
  <이미지 경로="./kitty.png" 대체텍스트="냥이">
</body>

 

  • src(=source) : (필수) 이미지의 URL
  • alt(=alternative) : (필수) 이미지의 대체 텍스트 지정
    • 누락되면 웹 표준에 어긋난다

웹 표준 검사하기

 

우리가 작성한 HTML 문서가 표준에 부합하는지 테스트 할 수 있다.

W3C validator에 접속해서 작성한 HTML 문서를 업로드하고 테스트 하면 기본적인 표준 여부 판단 할 수 있다.

 

HTML 예제

 

예제 사이트

 

 

저작자표시

'Front-End' 카테고리의 다른 글

HTML 콘텐츠 구분 / 문자 콘텐츠  (0) 2021.01.22
HTML 태그  (0) 2021.01.20
HTML / 개요, 요소 - 주요범위 & 메타데이터  (0) 2021.01.03
CSS  (0) 2020.12.27
HTML, CSS, JavaScript  (0) 2020.12.27
profile

개발블로그

@ORIONPOINT

포스팅이 좋았다면 "좋아요❤️" 또는 "구독👍🏻" 해주세요!

검색 태그

티스토리툴바