[파트9] HTML 두번째

1.HTML 두번째

제목 태그 (Headings)

• h1부터 h6까지 제목 태그는 문서의 구조를 나타냅니다.
• h1 태그는 페이지 당 한 번만 사용하는 것이 좋습니다.
• 제목 태그는 순서대로 사용하여 문서의 계층 구조를 명확히 해야 합니다.

텍스트 서식 태그

• <s> 태그: 텍스트에 취소선을 추가합니다.
• <del> 태그: 삭제된 텍스트를 나타내며, 취소선이 자동으로 적용됩니다.
• <ins> 태그: 새로 추가된 텍스트를 나타내며, 밑줄이 자동으로 적용됩니다.

하이퍼링크 (Anchor Tag)

• <a> 태그의 target 속성을 사용하여 링크된 문서가 어디에 표시될지 지정합니다.

멀티미디어 태그

• <figure>와 <figcaption> 태그를 사용하여 이미지나 동영상에 캡션을 추가합니다.
• <video> 태그와 <source> 태그를 사용하여 다양한 소스의 비디오를 포함할 수 있습니다.
• <audio> 태그는 소리 파일을 임베드하며, controls 속성을 추가하면 컨트롤러가 보여집니다.
• <svg> 태그와 <img> 태그는 이미지를 문서에 포함시키는 데 사용됩니다.

리스트 태그

• <ol>, <ul>, <li>: 순서가 있거나 없는 리스트를 만드는 데 사용합니다.
• <dl>, <dt>, <dd>: 설명 목록을 만드는 데 사용됩니다.(거의 사용하지 않음)

표 생성 태그

• <table>, <thead>, <tbody>, <tfoot>, <tr>, <td>: 데이터를 행과 열로 구성하여 표를 만들 때 사용합니다.

외부 콘텐츠 임베딩

• <iframe> 태그를 사용하여 다른 HTML 페이지를 현재 문서에 임베드합니다.

a 태그의 Target 속성과 Iframe 제어

• <a> 태그의 target 속성은 링크가 클릭될 때 해당 URL이 로드될 위치를 지정합니다.
• <iframe> 태그에 name 속성을 설정하고, <a> 태그의 target 속성에 해당 name 값을 사용하여 링크의 대상을 <iframe>으로 지정할 수 있습니다.
• 이를 통해, 사용자가 링크를 클릭하면 지정된 <iframe> 안에 새로운 콘텐츠가 로드되어 웹 페이지 내에서 다른 페이지로의 전환 없이 콘텐츠를 업데이트할 수 있습니다.

<iframe name="iframe1" src="example.html" width="600" height="400"></iframe>
<a href="https://www.naver.com" target="iframe1">NAVER</a>

*폼 태그*

• <form> 태그는 사용자 입력을 제출하기(get,post) 위해 사용합니다.
• <input>, <select>, <textarea>: 다양한 입력 필드와 옵션을 제공합니다.
• <button> 태그는 type="submit"이나 type="reset" 등의 속성을 이용해 폼 제출 또는 초기화 버튼으로 사용할 수 있습니다.

action 속성

• action 속성은 폼 데이터(form data)를 서버로 제출할 때 그 데이터가 전송될 URL을 지정합니다.

Label 태그와 For 속성

• <label> 태그는 사용자 인터페이스 항목의 설명을 제공합니다.
• for 속성을 사용하여 <label> 태그가 설명하는 입력 요소(input, select, textarea 등)를 명시적으로 연결합니다.
• for 속성의 값은 연결하려는 입력 요소의 id 속성 값과 일치해야 합니다. 이 연결을 통해 레이블을 클릭하면 연결된 입력 요소에 포커스가 맞춰지거나 활성화됩니다.
• 예를 들어, 사용자가 레이블을 클릭하면 자동으로 연결된 입력 필드로 포커스가 이동하여 사용성을 개선합니다

<label for="username">Username:</label>
<input type="text" id="username" name="username">

Select 태그와 Required 속성

• <select> 태그는 드롭다운 리스트를 생성하며, 사용자에게 여러 옵션 중 하나를 선택할 수 있게 합니다.
• <select> 태그에 required 속성을 추가하면, 사용자가 폼을 제출하기 전에 유효한 옵션(값이 있는 옵션)을 선택하도록 요구할 수 있습니다.
• 리스트의 첫 번째 <option> 태그에 value=""를 설정하고 이를 기본 선택으로 할 경우, 이 옵션은 유효한 선택으로 간주되지 않으며, 사용자는 다른 옵션을 선택해야 폼을 제출할 수 있습니다.

<select name="fruits" required>
  <option value="">--Please select an option--</option>
  <option value="apple">Apple</option>
  <option value="banana">Banana</option>
  <option value="cherry">Cherry</option>
</select>

 

기타 유용한 속성

• readonly, required, placeholder 등의 속성을 입력 필드에 사용하여 추가 기능을 제공할 수 있습니다.

HTML 작성 시 주의사항

• 모든 HTML 태그는 소문자로 작성합니다.
• 태그의 계층 구조를 유지하고 중첩을 피하며, 의미가 같은 태그의 중복 사용을 피합니다.

 

2.느낀점

이런 기능이 있다는것만 파악

주의사항 숙지 하기

 

See the Pen Untitled by Sungman Cho (@Sungman-Cho) on CodePen.

 

 

3.출처

GPT