티스토리 뷰

Front-End/HTML

HTML 기본 문법과 태그 정리

on1ystar 2019. 6. 24. 23:16
728x90
반응형

HTML = 태그들로 이루어져 있고 각각의 태그는 속성과 값을 가지고 있다.

 

태그는 부모와 자식관계를 가질 수 있다.

조상(상위)

부모

자식

자손(하위)

ex)

<ul> 순서 없는 목록 - 부모 

    <li> 항목 - 자식</li>

</ul>

 

닫히는 태그가 없는 태그를 빈 태그라 한다.

(or self closing tag)

닫히는 태그의 경우 태그 자체로도 콘텐츠에 의해 의미를 가지게 되지만 대부분의 빈 태그들은 속성과 값을 가지게 된다.

<h1> ~ <h6> 제목

<p> 문단

 

html 문서의 범위를 나타내는 태그들로 반복적으로 쓰일 수 없는 틀 같은 태그들

<!DOCTYPE html>
<!-- Document Type Definition(DTD) 마크업 언어에서 문서 형식을 정의
HTML은 1, 2, 3, 4, X, 5가 있는데, 위의 경우 HTML5 버전을 나타냄-->

 <html><!-- 전체 문서의 HTML 범위-->
    <head>
    <!-- 문서의 정보-->
    </head>
    <body>
    <!-- 문서의 구조, 내용-->
    </body>
</html>

 

기본적인 태그들

<!DOCTYPE html>

<html>
    <head><!--안에 들어가는 태그들, 즉 웹 페이지의 정보를 나타내는 태그들-->
        <title>웹 페이지의 제목</title>
        
        <meta> <!--기타 모든 정보를 나타내는 태그-->
        <meta charset="인코딩 하는 방식">
        <meta name="검색엔진 등에 제공하기 위한 정보 종류(메타데이터)" content="정보값">
        
        <link><!--외부 문서를 연결할 때 사용 ex)css -->
        <link rel(필수)="관계 ex)stylesheet = CSS" href="문서경로">
        
        <style></style><!--html에 직접 CSS를 작성할 때-->
    
        <script></script><!--외부에서 작성된 JS를 불러오거나 HTML에 직접 작성할 때-->
        <script src="JS가 작성된 경로"></script>
    </head> 
    
    <body><!--HTML 문서의 구조-->
        <div></div><!--본질적으로는 아무런 의미를 가지지 않고 단지 분할을 할 떄 사용
                    후에 묶은 부분에 CSS나 JS를 적용할 때 용이하게 사용-->
    
        <img><!-- HTML에 이미지를 삽입할 때 사용-->
        <img src(필수) = "이미지 경로" alt(필수) = "이미지가 제대로 삽입되지 못했을 경우 대체텍스트">
    
    
    </body>
</html>

 

웹 표준 검사 = W3C validator

728x90
반응형
댓글