[동영상 강의] Do it! HTML + CSS + 자바스크립트 웹 표준의 정석 - HTML (텍스트, 목록, 표, 이미지, 오디오와 비디오, 하이퍼링크, form)

웹 개발

스페이스 X 우주선의 대시보드 인터페이스가 크롬 기반의 웹브라우저에서 HTML, CSS, Javascript로 개발되었다고 함 

 

---

HTML

텍스트 태그 알아보기

• em은 강조해서 이탈릭체.
• strong은 강조해서 진하게.
• br은 break의 약자로 줄 바꿈을 해줌. 닫는 태그 없음.
• hr은 가로줄을 추가해줌. 닫는 태그 없음. 분위기 전환 용도로도 사용됨.
• b는 bold의 약자. strong은 강조의 의미가 있지만 b는 단순히 텍스트를 진하게만 해줌. 글자를 단순히 굵게 표시할 목적이라면 b태그보다는 css를 사용하는 것이 좋음

목록 만들기

• ol은 ordered list의 약자로 순서가 있는 목록 표시에 사용. type 속성을 통해 알파벳으로 표기 가능.
• ul은 unordered list의 약자로 순서가 없는 목록 표시에 사용. 불릿(• , bullet)으로 표시됨.

표 만들기

표의 구성 요소

• table: 표 전체
• caption: 표 제목
• tr: 행
• td: 셀
• th: 제목 셀, 진하게 표시되면서 셀의 중간에 표시해줌.

참고) 표 테두리 스타일 추가 예시

table, th, td {
  border:1px solid #222;  /* 표 테두리 */
  border-collapse: collapse;  /* 테두리 1줄만 표시 */
}
th, td {
  padding:10px;  /* 셀 안쪽의 여백(패딩) */
}

이미지 삽입하기

• img 태그 사용
  • src 속성으로 이미지 파일 경로 지정
  • alt 속성으로 대체 텍스트 추가

오디오와 비디오 삽입하기

• audio, video 태그 사용
  • src 속성으로 경로 지정
  • controls 속성으로 재생 막대(컨트롤 막대) 표시
  • autoplay 자동으로 실행. 크롬 브라우저나 모바일 웹 브라우저에서는 자동재생을 지원하지 않음. muted 속성을 추가하면 자동 재생 가능
  • loop 반복 재생
  • muted 소리를 제거
  • preload 페이지를 불러올 때 오디오나 비디오 파일을 어떻게 로딩할 것인지 지정. auto, metadata, none 사용 가능. auto가 기본 값.
  • poster 비디오가 재생되기 전까지 화면에 표시될 포스터 이미지를 지정. 지정하지 않으면 검은색 화면이 노출됨

하이퍼링크 삽입하기

• 텍스트 링크, 이미지 링크가 있음
• a 태그 사용
  • href 속성으로 연결
  • target 속성으로 새 탭으로 열리도록 수정 가능. ex) target="_blank"

 

입력 양식 작성하기

• form 태그 사용
  • input 태그 사용하여 한 줄짜리 정보 입력란을 생성
    
    • type="text", type="password" 등
      • value 속성 값은 input 박스 안에 입력된 값을 의미
      • label 태그를 꼭 같이 붙여줘야 함(화면낭독기 등을 위해).

        • <!-- 사용방법1 -->
          <label>아이디: <input type="text"></lable>
          
          <!-- 사용방법2 -->
          <label for="user-id">아이디: </lable>
          <input type="text" id="user-id">

    • type="submit"으로 버튼 만들기.
      • value 속성 값은 버튼에 표시되는 텍스트.

      • <input type="submit" value="전송">

    • type="checkbox"는 복수 선택 가능.
      • value 속성 값은 서버로 전송될 값
    • type="radio"는 한 개만 선택 가능.
      
      • value 속성 값은 서버로 전송될 값
      • 그룹으로 묶기 위해서는 name 속성 값에 똑같은 값을 넣어줘야 함
    •  type="range"
      • 슬라이드 막대로 숫자를 지정할 수 있게 해 줌.
      • 모든 브라우저에서 다 지원되지는 않음. caniuse.com에서 확인 가능.
      • min, max 속성으로 최솟값, 최댓값 지정 가능
    • type="year", type="month", type="week"
      • 날짜 선택 폼이 노출됨
    • type="time", type="datetime-local"
      • 시간 선택 폼이 노출됨
      • 옆에 시계 및 캘린더 아이콘이 노출됨
    • type="hidden"
      • 화면에 보이지는 않지만 원하는 데이터를 함께 보낼 수 있음.
  • input 태그 주요 속성
    • required: 필수 필드라는 것을 알려줌
    • readonly: 읽기 전용
    • autofocus: 페이지 진입 시 커서가 깜박깜박하게 해 줌.
  • textarea 태그
    • 텍스트 영역
    • cols, rows 속성으로 노출될 영역을 지정 가능.
  • select 태그
    • option 태그를 이용하여 항목 지정.
    • value 속성 값이 서버로 넘겨줄 값.

 

 

 

 

Reference

• 예제 소스 깃허브
• 01 웹 개발 시작하기 
• 02 웹 개발 환경 만들기
• 03 HTML 기본 문서 만들기
• 04-1 웹 문서에 다양한 내용 입력하기
• 04-2 웹 문서에 다양한 내용 입력하기
• 05-1 입력 양식 작성하기
• 05-2 입력 양식 작성하기
• 05-3 입력 양식 작성하기