html/css) 태그 tag 활용

⭐태그
tag

마크업 언어의 기본 구성 요소
꺽쇠 <>로 둘러싸여 있다.

주요태그
<h1>~<h6> 제목태그, 숫자가 클수록 작아진다
<p> 문단을 나타낸다
<a> 링크를 생성, href 속성으로 목적지를 지정한다
<img> 이미지를 삽입, src(속성) alt(대체속성) 필수
<div> 콘텐츠를 블록으로 나눈다
<ul><li> 순서가 없는 목록을 표시한다
<ol><li> 순서가 있는 목록을 표시한다
<button> 클릭 가능한 버튼을 만든다

<form> 사용자 입력을 수집한다

<input> 입력필드를 만든다

<table> 표를 만든다

    <!-- h1~h6 제목태그, 숫자가 클수록 작아진다 -->

    <h1>큰 제목</h1>

    <h2>중간 제목</h2>

    <h3>작은 제목</h3>

 

    <!-- p 태그: 문단을 나타낸다 -->

    <p>이것은 하나의 문단이다. 텍스트를 묶어주는 것이다.</p>

    <!-- a 태그: 링크를 생성, href 속성으로 목적지를 지정한다 -->

    <a href="https://www.naver.com" target="_self">여기를 클릭</a>

    <!-- img 태그: 이미지를 삽입, src(속성) alt(대체속성) 필수 -->

    <img src="https://picsum.photos/id/237/200/300" alt="샘플이미지">

    <!-- div 태그: 콘텐츠를 블록으로 나눈다 -->

    <div>

        <p>이 문단은 div 안에 있다</p>

        <p>div는 레이아웃을 나눌 때 유용하다</p>

    </div>

    <!-- ul->li 태그: 순서가 없는 목록을 표시한다 -->

    <UL>

        <LI>항목1</LI>

        <LI>항목2</LI>

        <LI>항목3</LI>

    </UL>

    <!-- ol -> li 태그: 순서가 있는 목록을 표시한다 -->

    <ol>

         <li>첫 번째 단계</li>

         <li>두 번째 단계</li>

        <li>세 번째 단계</li>

     </ol>

     <!-- button 태그: 클릭 가능한 버튼을 만든다

     이벤트 핸들러 처리.. 함수 -->

    <button onclick="alert('버튼이 클릭됨!')">눌러봐</button>

<!-- form 태그

    action 태그로 목적지 지정 -->

    <h3>학생 정보 입력</h3>

    <form action="/submit" method="post">

    <!-- input태그: 텍스트 입력 필드 -->

    <label for="name">이름:</label>

    <input type="text" id="name" name="user_name" placeholder="이름을 입력" />

    <!-- input태그: 숫자 입력 필드 -->

    <label for="korean">국어 점수</label>

    <input type="number" id="korean" name="korean" min="0" max="100" />

    <button type="submit">제출하기</button>