오늘도 개발

HTML 기본용어 본문

웹 프로그래밍/HTML & CSS

HTML 기본용어

Sueeeeeee 2022. 3. 15. 15:55

HTML (Hypertext Markup Language)

웹페이지의 뼈대 역할.   

웹브라우저는 HTML을 해석하여 화면에 보여줌.

 

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>HTML Elements</title>
    </head>
    <body>
        <h1>제일 큰 헤딩</h1>
        <h6>제일 작은 헤딩</h6>
        <p>이건 <strong>볼드체</strong>, 이건 <i>이탤릭체</i></p>
        <p>링크는<a href="www.sue-is-programming.tistory.com">Link</a></p>

        <p>Unordered List(순서 없는 목록)</p>
        <ul>
            <li>항목 1</li>
            <li>항목 2</li>
        </ul>

        <p>Ordered List(순서 있는 목록)</p>
        <ol>
            <li>항목 1</li>
            <li>항목 2</li>
        </ol>

        <p>이미지 넣기</p>
        <img src="https://res.cloudinary.com/dxeibizaf/image/upload/v1634139902/daniels-joffe--SmCKTIcH5E-unsplash_pltgg3.jpg" width="100px">

        <p>띄우기</p>
        <br/>

        <p>테이블 만들기</p>
        <table>
            <thead>
                <th>빵</th>
                <th>개수</th>
                <th>가격</th>
            </thead>
            <tbody>
                <tr>
                    <td>치아바타</td>
                    <td>2개</td>
                    <td>3,000원</td>
                </tr>
                <tr>
                    <td>소금빵</td>
                    <td>4개</td>
                    <td>1,000원</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

 

<!DOCTYPE html> 

브라우저에게 HTML5으로 해석하라고 알려주는 부분

 

Tags(태그)

HTML 문서에서 <, >안에 들어있는 단어.

예 :  <h1>, </h1>

 

Elements(요소)

opening tag, closing tag와 그 사이에 있는 내용물 전체.

예 : <h1>This is a title</h1>

 

Attributes(속성)

element의 성질을 알려주는 부분.

예 : <html lang="en">, <img src="1.jgp>

 

Forms

유저 인풋을 받을 수 있는 요소 

<form>
   <input type="text" placeholder="아이디" name="id">
   <input type="password" placeholder="비밀번호" name="password">
   
   <div>
   숫자를 하나 고르세요:
      <input type="radio" name="number" value="1"> 1
      <input type="radio" name="number" value="2"> 2
   </div>
   
   <input type="submit">
</form>

 

DOM (Document Object Model)

브라우저가 웹페이지(=document)를 로드할 때, HTML의 각 요소를 object로 만든 후 트리 구조로 나타낸 것.

js같은 프로그래밍 언어가 웹페이지에 접근해서 웹페이지 변경할 수 있게 해줌.

 

'웹 프로그래밍 > HTML & CSS' 카테고리의 다른 글

CSS display 이해하기 1 (inline, block, inline-block)  (0) 2022.05.13
CSS 박스 모델 이해하기  (0) 2022.05.12
HTML로 웹 접근성을 높이는 방법  (0) 2022.05.12
CSS 선택자 활용하기  (0) 2022.03.15
HTML문서에 CSS를 적용하는 세 가지 방법  (0) 2022.03.15
'웹 프로그래밍/HTML & CSS' Related Articles more