TIL(Today I Learned)

3월 14일 TIL - HTML 뼈대 만들기

Hyerin P. 2023. 3. 14. 20:47

▷ HTML의 구조

<!DOCTYPE html> <!-- 현재 문서가 HTML5 문서임을 명시 -->
<html lang="en"> <!-- HTML 문서의 루트(root) 요소를 정의 -->
<head> <!--  HTML 문서의 메타데이터(metadata)를 정의  
	*메타데이터(metadata)란 HTML 문서에 대한 정보(data)로 웹 브라우저에는 직접적으로 표현되지 않는 정보를 의미
    예)<title>, <base>, <link>, <meta>, <style>, <script> -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document 제목</title>
    
    <script> javascript </script>
    <style> css </style>
</head>

<body> <!-- 웹 문서의 내용 부분 -->
    <!-- 구역을 나누는 태그들 -->
    <div>구역을 나누는 태그</div>
    <p>문단 태그</p>
    <ul>
        <li> bullet point!1 </li>
        <li> bullet point!2 </li>
        <li> 리스트를 나타내는 태그 </li>
    </ul>

    <!-- 구역 내 콘텐츠 태그들 -->
    <h1>h1은 제목을 나타내는 태그, 가장 큰 제목으로 검색의 대상!</h1>
    <h2>h2는 소제목</h2>
    <h3>h3~h6 점점 작아지는 제목들</h3>
    <hr>
    span: 특정 <span style="color:red">글자</span>를 꾸밀 때 써요
    <hr>
    a: <a href="http://naver.com/"> 하이퍼링크 </a>
    <hr>
    img: <img src="url입력" />
    <hr>
    input: <input type="text" />
    <hr>
    button: <button> 버튼입니다</button>
    <hr>
    textarea: <textarea>긴 문장을 입력할 수 있는 양식</textarea>
</body>

</html>

 

▷ HTML의 구성요소

  • 요소(Elements): HTML에서 시작태그와 종료태그로 이루어진 모든 명령어들, 태그 명령어 종류들
  • 태그(Tag): 요소의 하나로서 시작태그와 종료태그로 이루어져 있다.
  • 속성(Attributes): 조금 더 구체화된 명령어, 요소의 시작태그안에 사용되어 진다. 다양한 효과를 부여할 수 있다.
  • 값(Arguments): 속성과 관련된 값을 의미

 

▷ HTML의 틀

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

</body>
</html>