HTML II

📌콘텐츠

1. 제목 태그(h1 ~ h6)
2. 문단 태그(p)
3. 서식 태그(b/ strong, i/em, u, s/del)
4. 링크 이동(a)
5. 멀티미디어
6. 리스트
7. 표(table)
8. 외부 콘텐츠(iframe)

h1 ~ h6

• 문서 구획 제목을 나타내는 태그로 heading 태그라고 부른다.
• h1 부터 h6 까지 사용 가능
• h1 태그는 페이지 내에 '한번만' 사용되어야 하고 '구획의 순서'는 지켜져야 한다.

p

• 문서에서 하나의 문단을 나타내는 태그이다.
• 제목 태그와 함께 사용되기도 하고 단독으로 사용되기도 한다.

  <p> 문단 태그를 사용해보세요!</p>

서식태그(b/strong, i/em, s/del)

• b, string
  • 글씨의 두께를 조절할 수 있다.
  • b 태그는 의미를 가지지 않고 단순히 굵은 글씨로 변경만 해준다.
  • strong 태그는 굵은 글씨로 변경 후 '강조'의 의미를 부여한다.
    • b 와 strong 은 시각적으로 굵은 효과는 같지만 의미가 다름으로 사용에 주의
• i, em
  • 글씨의 기울기를 조절할 수 있다.
    • i 태그는 기울임과 동시에 텍스트가 문단의 내용과 구분되어야 하는 경우 사용할 수 있다.
      ex) 등장인물, 외국어 구절, 기술 용어 등
    • em 태그는 기울임과 내용에 '강조' 를 나타낸다.
• u
  • 글씨에 밑줄을 넣고 주석을 가지는 단어임을 나타낼 수 있다.
    • css로 스타일링 하여 빨간 밑줄을 넣는 것으로 '오타'를 나타내는 것 처럼 사용할 수 있다.
    • 단순하게 '밑줄'만 긋는 용도로는 사용하면 안된다.
• s , del
  • 글씨에 취소선을 추가할 수 있다.
    • s 태그는 단순히 시각적인 취소선만 추가되고 접근성 기기에 취소에 대한 안내는 하지 않는다.
    • del 태그는 문서에서 제거된 텍스트를 나타낼 수있다. ins 태그와 함께 사용하면 제거된 텍스트 옆에 추가된 텍스트를 표현할 수 있다.
• a
  • 클릭하면 페이지를 이동할 수 있는 링크 요소를 만들 수 있다.
    • href 속성을 사용해서 이동하고자 하는 파일 혹은 url 작성
    • target속성을 사용해서 이동해야 할 링크를 새 창(_blank), 현재창(__self)등 원하는 타겟을 지정할 수 있다.

      <a href="https://programmers.co.kr" target="_blank">프로그래머스로 바로가기</a>

멀티미디어

• 이미지
• 비디오,오디오
• SVG

• img
  • 문서 내에 이미지를 넣을 수 있는 태그
  • 가장 기본적인 이미지 넣는 방법
  • 'src' 속성을 사용해 이미지의 경로를 넣으면 이미지가 출력됨
  • 'alt' 속성을 사용해 이미지 로딩에 문제가 발생했을 때 대체 텍스트를 띄울 수 있음

  <img scr="/logo.png" alt="프로그래머스 로고">

• figure, figcaption
  • 하나의 독립적인 콘텐츠로 분리하고 그에 대한 설명을 넣을 수 있는 태그
    • figcaption 태그를 사용해 콘텐츠의 설명 혹은 범례를 추가할 수 있고 제일 처음이나 제일 아래에 추가해서 사용할 수 있다.
    • 보통 이미지를 넣는데 인용문, 비디오/오디오 등 문서의 흐름에 참조는 되지만 독립적으로 분리되어도 되는 내용을 담을 수 있다.

     <figure>
       <img src="/hotdog.png" alt="핫도그">
       <figcaption> 맛있는 핫도그 이미지 </figcaption>
     </figure>  

• video

  • 문서 내에 영상을 첨부할 수 있는 태그

    • 'src'속성을 사용하여 비디오를 문서 내에 첨부할 수 있다.
    • 'poster' 속성을 사용하면 비디오가 로드되기 전에 포스터를 보여줄 수 있다.
    • source 태그를 사용하면 여러 타입의 비디오를 제공할 수 있다.

    <video scr="/video.mp4" poster="/poster.png">
      비디오 태그가 실행되지 않을 때 보이는 글자예요.
    </video>
    
    <video poster="/poster.png">
     <source src="/video.mp4" type="video/mp4">
     <source stc="/video.webm" type="video/webm">
     비디오 태그가 실행되지 않을 때 보이는 글자예요.
    </video>

• audio
  • 문서 내에 소리를 첨부할 수 있는 태그
    • 'src' 속성을 사용하여 소리를 문서 내에 첨부할 수 있다.
    • 'source' 태그를 사용하면 여러 타입의 비디오를 제공할 수 있따.
    • 'controls' 속성을 사용하면 재생/정지 버튼 등이 있는 컨트롤러를 띄울 수 있다.
• svg
  • 그래픽으로 만들어진 이미지
    • 주로 크기를 자주 바꾸어야 하는 작은 아이콘에서 많이 사용
    • 확대 축소가 자유롭다

리스트

• 정렬되지 않는(순서가 없는) 목록
• 정렬된(순서가 있는)목록
• 설명 목록

• ol, li
  • 정렬된 목록 태그
    • 기본 숫자(1,2,3...)형식으로 목록을 그린다.
    • li 태그를 사용하여 목록을 구성할 수 있고 다양한 태그를 포함할 수 있다.
    • ol 태그의 자식요소로는 li 태그만 들어와야 한다.
    • 하위 리스트를 만드려면 li 태그 안에 ol, ul 태그를 사용하면 된다.

      <ol>
        <li>리스트</li>
        <li>리스트</li>
        <li>
          리스트 3
          
          <ul>
            <li> 하위 리스트1</li>
            <li> 하위 리스트1</li>
          </ul>
        </li>
      </ol>

• dl, dt, dd
  • 설명 목록 태그
    • dt 태그에 사용된 단어 혹은 내용의 설명을 dt 태그에 작성
    • 주로 용어사진이나 키-값 이 있는 쌍의 목록을 나타낼 때 사용
    • dt 태그 하나에 여러개의 dd 태그를 가질 수 있다.

표

• table
  • 표를 만드는 태그
    • tr 태그로 행을 구분할 수 있다. (보통 row; 로우 라고 부른다)
    • td 태그로 열을 생성할 수 있다. (보통 cell; 셀 이라고 부른다)
    • th
      • 열의 제목 태그
      • th 태그를 사용하면 셀의 제목을 만들 수 있다.
    • thead
      • 제목 그룹 태그
    • tbody
      • 표 본문 요소 태그
      • tbody 태그 안에 여러' 열(cell)의 행' 을 넣음으로써 본문 요소를 그룹 지을 수 있다.
    • tfoot
      • 표 바닥글 요소 태그
    • caption
      • 표 설명 태그

외부 콘텐츠(iframe)

• 현재 문서 안에 다른 html 페이지를 삽입할 수 있는 태그
  • 'src' 속성에 원하는 html 문서 또는 url 을 넣을 수있다.

📌양식 태그

1. Form
2. 설명과 입력
3. 버튼

form

• 정보를 제출하기 위한 태그
  • 정보를 입력하고 선택할 수 있는 input, selectbox, textrea 등을 가질 수 있다.
  • 정보를 제출하기 위한 button을 가진다.
  • 'action' 속성으로 정보가 제출되었을 때 페이지를 이동시킬 수 있다.
  • 'method'속성으로 정보가 제출될 때 처리 방식을 결정할 수 있다.

설명과 입력

• label
  • input, textarea, selectbox 의 설명을 작성할 수 있는 태그
    • 'for' 속성을 사용하여 연결하고자 하는 태그에 'id' 속성을 지정하면 label을 클릭하면 연결된 태그가 선택된다.
    • label 태그 안에 input 을 넣으면 자동으로 for -> id 연결과 같은 처리를 해준다.
    • 'id' 속성은 값이 절대로 중복되면 안된다.
• input
  • 사용자에게 데이터를 입력 받을 수 있는 대화형 태그
    • 'type' 속성의 값에 따라 받을 수 있는 input 의 유형이 달라진다.(기본값: text)
    • 'value' 속성을 사용해 기본 내용의 입력 해둘 수 있다.
    • 'name' 속성을 사용해 input 의 이름을 지정할 수 있다.
  • 자주 사용되는 input 타입
    1. checkbox: input 을 체크박스 형태로 만든다.
    2. radio : 라디오 버튼으로 만든다.
    3. file: 파일을 첨부할 수 있게 만든다.
    4. button: 'value' 속성에 입력된 값을 이름으로 갖는 버튼으로 만든다.
    5. hidden: input을 시각적으로 숨겨준다. 정보 제출 시 'value' 속성에 입력된 값은 전송된다.
• select
  • 옵션 메뉴를 제공하는 태그
    • option 태그를 사용해 옵션을 정의할 수 있다.
    • 첫번째 option은 이름이 된다.
    • 'value' 속성을 선언하지 않은 경우 option 태그의 콘텐츠가 기본값이 된다.
    • 흔히 셀렉트박스라고 불리워진다.
    • 첫번째 옵션이 버튼명이기 때문에 ' placeholder' 속성을 사용할 수 없다.
• textarea
  • 여러 줄을 입력할 수 있는 대화형 태그
    • 콘텐츠를 넣으면 사용자가 입렫하지 않아도 표시되는 기본값이 된다.
    • 'cols/rows' 속성으로 기본 너비와 높이를 지정할 수 있따.
    • 너비와 높이는 글자 크기 기준으로 정의된다.

알아두면 좋은 속성
1. readonly : 사용자가 수정할 수 없는 '읽기 전용' 으로 만든다.
2. required: form이 제출될 때 '필수 입력 사항'으로 만든다.
이 때, 필수 입력에 대한 태그에 따른 안내 문구, 행동 등은 브라우저가 자동으로 처리해준다.
3. placeholder: input, testarea 에 부가 설명을 입력해둘 수 있다.
select 태그에선 사용할 수 없다.
4. disabled: 요소가 비활성화 되며 정보 제출 시 값이 제출되지 않는다.