티스토리 뷰

Web/HTML

HTML의 문법

투런포 2021. 5. 8. 23:22
반응형

기본 형태

  • 태그는 각자의 의미를 가지고 있으며 다음과 같은 형태를 가집니다.
<TAG></TAG>
<TAG>CONTENT</TAG>
  • 또한 태그는 열리고 닫히는 태그 구조를 가지고 있으며 이는 한 쌍입니다.

속성(Attributes) 과 값(Value)

  • 태그(요소)의 기능을 확장하기 위해 속성을 사용할 수 있다.
  • 닫히는 태그가 없으면 빈 태그라고 한다.
<TAG 속성="값"></TAG>
<img src="값" />

부모와 자식 요소

  • 태그A가 태그B의 콘텐츠로 사용되면, 태그B는 태그A의 부모 요소, 태그A는 태그B의 자식 요소라고 한다.
<PARENT>
	<CHILD></CHILD>
</PARENT>

<!-- ex -->

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

빈태그

  • HTML에는 닫히는 개념이 없는 태그가 있다.
<!-- '/'가 없는 빈 태그 -->
<TAG>

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

 

DOCTYPE(DTD, 버전지정)

  • DOCTYPE은 마크업 언어에서 문서 형식을 정의한다.
  • 이는 웹 브라우저에 우리가 제공할 HTML 문서를 어떤 HTML 버전의 해석 방식으로 구조화하면 되는지를 알려준다.
  • 표준 모드는 HTML5이다.
<!-- HTML5 -->
<!DOCTYPE html>
<html>
    <head>
        문서의 정보
    </head>
    <body>
        문서의 구조
    </body>
</html>

문서의 정보

TITLE(웹 페이지의 제목)

  • HTML 문서의 제목으 정의한다.
  • 웹 브라우저의 각 사이트 탭에서 이름으로 표시됩니다.
<head>
	<title>제목</titlle>
</head>

META(웹 페이지 정보)

  • HTML 문서에 관한 정보를 검색엔진이나 브라우저에 제공한다.
<head>
    <meta charset="UTF-8">
    <meta name="author" content="홍길동">
    <meta name="description" content="우리 사이트가 최고!">
</head>

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

LINK(CSS 불러오기)

  • 외부 문서를 연결할 때 사용한다.
  • 빈태그이다.
<head>
    <link rel="stylesheet" href="./css/main.css">
    <link rel="icon" href="./favicon.png">
</head>

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

STYLE(CSS 작성하기)

  • CSS를 외부 문서에서 작성하여 연결하는 것이 아니고 HTMLL 문서 내부에 작성할때 사용한다.
<style>
    img{
        width: 100px;
        height: 200px;
    }
    p{
        font-size: 20px;
        font-weight: bold;
    }
</style>

 

SCRIPT

  • script태그는 JS를 불러오거나 JS를 작성할 수 있다.
<!-- 불러오기 -->
<script src="./js/main.js"></script>

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

 

HTML 문서의 구조

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

DIV

  • div는 문서의 부분이나 섹션을 정의한다.
  • 특정 범위를 묶는 용도로 사용한다.
<body>
    <div>
    	<p>
            내용
        </p>
    </div>
</body>

 IMG

  • <img>는 HTML에 이미지를 삽입할 때 사용한다.
<body>
    <img src="./kitty.png" alt="냥이">
</body>
저작자표시

'Web > HTML' 카테고리의 다른 글

HTML 요소 - 인라인 텍스트 & 수정  (0) 2021.11.28
HTML 요소 - 문자 콘텐츠  (0) 2021.11.27
HTML 요소 - 컨텐츠 구분  (0) 2021.11.22
블럭요소와 인라인요소  (0) 2021.11.22
이미지에 대한 이해  (0) 2021.05.08
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2025/01   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
글 보관함