Front-End/HTML

HTML 문서와 태그

코드깎는머슴 2024. 2. 22. 09:35
728x90
반응형

문서

        1. html 문서 파일의 기본확장자는 일반적으로 *.html을 사용
        2. html 문서를 작성하기 위해 아래와 같은 기본 구조

<!DOCTYPE html>    
<html lang="ko">        
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    </body>
</html>


 

<!DOCTYPE html>   

        해당 html 문서가 html 최신 버전의 표준을 따르고 있다

        새로운 최신 버전이 나오면 자동적으로 그걸 따라간다.

        꺽쇠를 사용했지만 태그는 아님


<html></html>

        해당 html 문서의 모든 내용을 포함


lang="ko"

        해당 html 문서가 인간의 어떠한 언어로 작성되어 있는가에 대한 선언

<head></head> 

        화면에 실질적으로 표시되지 않는, 문서의 제목이나 정보를 포함


<meta charset="UTF-8">

        html 문서의 인코딩 방식을 UTF-8로 설정한다.


 <title></title>

        html 문서의 제목 설정


<body></body>

        화면에 실질적으로 표시되는 내용 포함

주석
1. 문서 실행에 영향을 미치지 않는 간단한 메모
2. html 문법에서 한 줄용 주석은 따로 없음, 여러 줄 주석은 <!--' 내용 '-->

 

 

태그

        html 문서의 구성요소를 표현하기 위한 단위

작성 방법
    

여는 태그(Opening Tag) 
        여는 꺽쇠 괄호(<)로 시작, 태그 이름 작성, 닫는 꺽쇠 괄호(>)


img 태그의 여는 태그는

<img>



닫는 태그(Closing Tag) 
        여는 꺽쇠 괄호(<)로 시작, 슬래쉬(/), 태그 이름 작성, 닫는 꺽쇠 괄호(>)


div 태그의 닫는 태그는

</div>



여는 태그와 닫는 태그 사이에 태그의 내용을 작성, 반드시 쌍으로 이루어져야 함.   

<body>
            body 태그 내용
</body>


태그 중에 자동으로(스스로) 닫는 태그(Self-Closing Tag)가 있는데, 닫는 태그가 없다.

<meta charset="UTF-8">
<input ...>
<img ...>



태그 사이의 관계
    태그 사이에는 선조(조상), 부모, 자식, 손자(자손), 인접 형제, 형제 등의 관계를 정의할 수 있다.
    선조 : 기준 태그의 한 단계 이상 상위 태그(들)
    부모 : 기준 태그의 한 단계 상위 태그
    자식 : 기준 태그의 한 단계 하위 태그(들)
    손자 : 기준 태그의 한 단계 이하 하위 태그(들)
    형제 : 기준 태그와 동일한 부모를 가지고, 보다 후행하는 태그(들)
    인접 형제 : 기준 태그와 동일한 부모를 가지고, 바로 뒤에 후행하는 태그


속성
    html 태그는 속성(attribute)을 가질 수 있다.
    여는 태그에 속성 이름, 등호(=), 쌍따옴표(")를 활용, <태그 속성="값">의 형식으로 작성할 수 있다.
    html은 속성값으로 문자열만 가능
    <a num=17>로 작성해도 "17"로 자동 치환됨

값이 없고, 단순히 정의되는 것만으로 의미를 가지는 속성도 존재한다.

<input autofocus disabled readonly type="text">


input은 4개의 속성 autofocus, disabled, readonly, type을 가짐
autofocus, disabled, readonly은 값이 없다.

 

 

728x90
반응형