바다는 비에 젖지 않는다

[HTML] HTML 기본 개념 본문

IT Technical Note/HTML | CSS

[HTML] HTML 기본 개념

Soroya 2022. 10. 7. 15:58
728x90

HTML 기초

HTML은 크게 <head>, <body>로 구성된다.

 

<head>안에는 페이지의 속성, 정보

<body>안에는 페이지의 내용을 담는다.

<head>

<head>안에 들어가는 대표적 요소들:  <meta>, <script>, <style>, <link>, <title>

페이지의 속성을 정의하거나 필요한 스크립트들을 불러온다; 눈에 보이지않는 것들을 담는다. 

코드 예시

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML 기초</title>
</head>

<body>
    <!-- 구역을 나누는 태그들 -->
    <div>구역을 나누기</div>
    <p>문단</p>
    <ul>
        <li> 1 </li>
        <li> 2 </li>
    </ul>

    <!-- 구역 내 콘텐츠 태그들 -->
    <h1>h1은 제목을 나타내는 태그, 페이지마다 하나씩 꼭 써주는 게 좋아요. 그래야 구글 검색이 잘 되거든요.</h1>
    <h2>h2는 소제목</h2>
    <h3>h3~h6 나머지 Heading 태그들</h3>
    <hr>
    span 태그입니다: 특정 <span style="color:red">글자</span>를 꾸며 준다.
    <hr>
    a 태그입니다: <a href="http://naver.com/"> 하이퍼링크 </a>
    <hr>
    img 태그입니다: <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQpN4QtMstkdDxrcvjOdjOBu2zAbpS5u8-l72G5NwOIRg&s" />
    <hr>
    input 태그입니다: <input type="text" />
    <hr>
    button 태그입니다: <button> 버튼</button>
    <hr>
    textarea 태그입니다: <textarea> 여러줄의 긴 문장을 입력할수 있다.</textarea>
</body>
</html>

 

728x90

'IT Technical Note > HTML | CSS' 카테고리의 다른 글

[CSS] Flexbox  (0) 2022.10.07
[CSS] Bootstrap  (0) 2022.10.07
[CSS] 웹페이지에 Google font 이용하기  (0) 2022.10.07
[CSS] margin을 이용한 중앙정렬  (0) 2022.10.07
[CSS] CSS기초  (0) 2022.10.07
'IT Technical Note/HTML | CSS' Related Articles more