HTML이란?

  HTML(Hyper Text Markup Language)은 페이지에 제목, 문단, 표, 이미지, 동영상 등을 정의하고 그 구조와 의미를

  부여하는 정적언어로 웹의 구조를 담당한다.

 

HTML문법

  HTML의 문법의 기본형태로는 태그를 사용한다.

  <tag></tag>형태로 열리고 닫히는 구조를 갖고 있으며 한쌍으로 태그의 범위를 만들어 준다.

 

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

  <img />는 이미지를 삽입하기 위해 사용하는 태그지만 태그만 사용하게 되면 어떤 이미지를 삽입하려는지 알 수 없다.

  그래서 src(source)라는 속성을 사용해서 삽입할 이미지의 경로를 지정하고 alt(alternative)라는 속성으로 이미지를

  출력하지 못하는 경우에는 이미지대신 보여질 텍스트를 지정해준다.

 

  태그에는 부모와 자식 요소가 존재한다.

<parent>
  <child> </child>
</parent>

  이러한 형태처럼 child태그가 parent태그의 컨텐츠로 사용이 된다면 child태그는 parent태그의 자식요소가 된다.

 

<section>
  <h1></h1>
  <ul>
    <li></li>
    <li></li>
  </ul>
</section>

  HTML태그들을 보면 이러한 형태들을 많이 볼 수 있는데 h1태그와 ul태그는 section태그의 자식요소가 되는것이고

  li태그는 ul태그의 자식요소가 된다. 이처럼 부모와 자식 요소는 상대적인 개념이다.

  이러한 부모와 자식요소로 작성하는것은 선택자를 통해 CSS와 JS로 HTML을 다룰 때 중요하게 사용된다.

 

  태그에는 '빈태그'라고 해서 닫히는 태그가 없는 태그들이 있는데 다음과 같은 형태를 갖는다.

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

<tag>

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

</tag>

  이렇게 두가지 형태의 빈 태그가 있고 둘다 사용할 수 있지만 XHTML버전이나 린트(Lint)환경 혹은 프레임워크

  셋팅에 따라 /를 사용하는것이 필수가 될 수 있다.

 

HTML문서의 범위

  웹 개발을 하며 볼 수 있는 index.html 같은 HTML파일을 HTML문서라고 표현할 수 있다.

 

<!DOCTYPE>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="aurthot" 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문서의 전체 범위를 지정한다. 웹 브라우저가 해석해야 할 HTML문서가 어디에서 시작하며,

  어디에서 끝나는지 알려주는 역할을 한다.

  <head>태그는 웹 브라우저가 해석해야 할 HTML문서의 정보 범위를 지정한다.

  정보에는 웹 페이지의 제목, 웹 페이지의 문자 인코딩 방식, 연결할 외부 파일의 위치, 구조화 하기 위한 기본셋팅 값

  등을 말한다.

  다르게는 화면을 구성하기 위한 기본 설정이라고 표현할 수 있다.

  <body>태그는 웹 브라우저가 해석해야 할 HTML문서의 구조 범위를 지정한다.

  구조는 사용자가 화면을 통해서 볼 수 있는 내용(컨텐츠)의 형태나 레이아웃등을 의미하며 로고, 헤더, 푸터, 

  네비게이션, 메뉴, 버튼, 입력창, 팝업, 광고 등 보이는 모든 것들이 구조에 해당한다.

  구조는 body 범위 안에서만 생성한다.

  DOCTYPE(DTD, DocumentType Definition)은 마크업 언어에서 문서 형식을 정의한다.

  이는 웹 브라우저에 우리가 제공할 HTML문서를 어떤 HTML버전의 해석 방식으로 구조화하면 되는지를 알려준다.

  HTML은 크게 1, 2, 3, 4, X-, 5 버전이 있고 현재의 표준 모드는 HTML5다.

<!-- HTML5 -->
<!DOCTYPE html>

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

 

HTML 문서의 정보

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

  title태그

    <title>은 HTML문서의 제목을 정의한다. 웹 브라우저의 각 사이트 탭에서 이름으로 표시된다.

<head>
  <title>글쓰기</title>
</head>

    우리가 보통 웹페이지에 들어가면 볼 수 있는 탭에 이렇게 표시된다.

  

  meta태그

    <mata>는 HTML문서(웹페이지)에 관한 정보(표시방식, 제작자(소유자), 내용, 키워드 등)를 검색엔진이나

    브라우저에 제공한다. meta태그는 빈태그이다.

    아래코드로 좀 더 편하게 이해할 수 있다.

<head>
  <meta charset="UTF-8">
  <meta name="author" content="홍길동">
  <meta name="description" content="샘플 사이트">
</head>


<문서의 정보범위>
  <정보 문자 인코딩방식="UTF-8">
  <정보 정보종류="사이트제작자" 정보값="홍길동">
  <정보 정보종류="사이트설명" 정보값="샘플 사이트">
</문서의 정보범위>

 

  meta태그에서 사용할 수 있는 속성은 다음과 같다.

속성

의미

값

charset

문자 인코딩 방식

UTF-8, EUC-KR등

name

검색엔진 등에 제공하기 위한 정보의 종류(메타데이터)

author, description, keywords, viewport등

content

name이나 http-equiv 속성의 값을 제공

 

   

  link태그

    link태그는 외부 문서를 연결할 때 사용한다.

    특히 HTML 외붕에서 작성된 CSS파일을 불러와 연결할 때 사용하며 link태그도 빈태그이다.

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


<문서의 정보범위>
  <외부문서연결 관계="css" 문서경로="./css/main.css">
  <외부문서연결 관계="사이트대표아이콘" 문서경로="./favicon.png">
</문서의 정보범위>

속성

의미

값

rel

(필수) 현재 문서와 외부 문서와의 관계를 지정

stylesheet, icon 등

href

외부 문서의 위치를 지정

경로

 

  style태그

    CSS를 외부문서에 작성하여 연결하는 방식이 아닌 HTML내부에 작성할 때 사용한다.

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



<스타일정의>
  <!-- CSS 코드 -->
</스타일정의>

 

  script태그

    HTML문서에서 CSS는 link로 불러오거나 style태그 안에 작성할 수 있지만 JS는 script태그로 가져오거나

    작성할 수 있다

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

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



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

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

 

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>

    이런 형태로 볼 수 있다. div태그에는 클래스로 각 div를 구분하도록 할수 있다.

<body>
  <div class="content">
    <p></p>
  </div>
</body>

    이런 형태로 작성하며 class를 이용해 CSS에서 구분할 수 있다.

 

  IMG태그

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

   

<body>
  <img src="./image.png" alt="사진">
</body>



<body>
  <이미지 경로="./image.png" 대체텍스트="사진">
</body>

속성

의미

값

src

(필수) 이미지의 URL

URL

alt

(필수) 이미지의 대체 텍스트(alternative)를 지정

 

 

 

 

레퍼런스

패스트캠퍼스 올인원패키지 - HTML

'HTML&CSS' 카테고리의 다른 글

CSS선택자(가상클래스 선택자)  (0) 2021.04.10
CSS 선택자(Selector)  (0) 2021.04.08
CSS란?  (0) 2021.04.07

+ Recent posts

티스토리툴바