Notice
Recent Posts
Recent Comments
Link
«   2025/04   »
일 월 화 수 목 금 토
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
Tags
more
Archives
Today
Total
관리 메뉴

민수야, 너도 할 수 있어

HTML 본문

WEB

HTML

devpola 2020. 9. 12. 01:22

Element

html의 element는 start tag, content, 그리고 end tag로 정의된다. (self closing tag들도 존재)

⇒ <tag> content </tag>

⇒ <tag> (self closing tags)

Tags

아래의 html 코드에서 자주 사용되는 html tag들을 볼 수 있다. 

<!DOCTYPE html>
<head>
    <title>My first website!</title>
</head>
<body>
    <!-- 1. header 1 tag -->
    <h1>hello world!</h1>
    <!-- 2. paragraph tag & 3. strong, 4. emphasized tag-->
    <p>Programming <strong>language</strong> C</p>
    <p>Programming <em>language</em> Python</p>
    <!-- 5. ordered list tag -->
    <ol>Course 
        <!-- list tag -->
        <li>Software Engineering</li>
        <li>Operating System</li>
    </ol>
    <!-- 5. unordered list tag -->
    <ul>
        <!-- 6. horizontal line tag -->
        <li>C</li><hr>
        <!-- 7. image tag -->
        <img src="https://irvinewebschool.com/wp-content/uploads/2017/06/C%EC%96%B8%EC%96%B4.jpg"
        alt="picture" width="42" height="42">
        <!-- 8. break line tag -->
        <br>
        <li>Python</li>
    </ul>
    <!-- 9. anchor tag -->
    <a href="newpage.html">New Page</a>
    <a href="register.html">Register Page</a>
</body>
</html>

  1. <h1> : header 1. h1 ~ h6 의 태그가 있어 6개의 크기를 가짐.

  2. <p> : paragraph. <p> 태그를 사용하여 '단락'을 정의.

  3. <strong> : <b> 태그(bolded)와 같은 결과를 나타내며 굵은 글씨체를 정의.

  4. <em> : emphasized. <i> 태그(italicized)와 같은 결과를 나타내며 기울임 글씨체를 정의

  5. <ol>, <ul> : ordered, unordered list. <li> 태그(list)를 자식 element로 가지며 리스트를 정의.

  6. <hr> : horizontal break. 수평선을 정의.

  7. <img> : image.

    ex) `<img src = "source of image" width = "width of image" height = "height of image"

    alt = "alternate text">`

    위 start tag에 포함된 "src"와 같은 요소는 "attribute", "" 안에 들어가는 요소는 "value"

  8. <br> : break line. single break line을 정의.

  9. <a> : anchor. '닻'이라는 의미를 가지며 hyperlink를 정의.

    ex) <a href = "hypertext reference"> some content </a>

위 코드를 Chrome browser에서 열면 아래와 같은 웹페이지를 볼 수 있다.

Reference

  • W3Schools.com

W3Schools Online Web Tutorials

  • Udemy "Andrei Neagoie 의 The Complete Web Developer in 2020: Zero to Mastery" 강의
저작자표시 비영리 변경금지