[코드잇] HTML 핵심 개념 ② 링크, 텍스트, 리스트, 테이블

---

6. 멀티미디어

7. 폼

8. 다른 코드 불러오기

9. 의미있는 HTML

---

6. 멀티미디어

 

이미지 <img>

<img src="poster.jpg" alt="영화 명량 포스터" width="300" height="428">

src : 파일 주소

alt : 이미지 이름 (이미지 안 보일 때 설명이 나옴)

---

비디오 <video>

<video src="codeit-logo.mp4" autoplay muted controls width="480" height="360"></video>

 

autoplay : 자동재생 (일부 브라우저에서는 꼭 써줘야 함)

muted : 음소거

controls : 컨트롤바 (하단 재생, 소리, 화면 버튼)

 

이미지 태그 사이에 공백이 생기는 이유

  <div class="feeds">  
    <img src="1.png" alt="코드잇 스마일 로고">
    <img src="2.png" alt="코드잇 텍스트 로고">
    <img src="3.png" alt="실습화면">
    <video src="4.mp4" controls>
  </div>

이미지와 비디오 태그 사이에 공백이 생기는 이유는 HTML에서 인라인 요소(inline element)가 공백을 처리하는 방식 때문이다.

연달아 나오는 인라인 요소 사이에는 브라우저가 공백을 처리하고 그에 따라 렌더링한다.

  <div class="feeds">  
    <img src="1.png" alt="코드잇 스마일 로고"
    ><img src="2.png" alt="코드잇 텍스트 로고"
    ><img src="3.png" alt="실습화면"
    ><video src="4.mp4" controls>
  </div>

 

이미지 태그를 연달아 쓰면된다. 닫는 괄호만 밑으로 이어 붙이면 해결됨.

---

오디오 <audio>

<audio src="codeit-logo.mp3" controls autoplay></audio>

---

iframe <iframe>

iframe = 인라인 프레임

· frame : 사이트 화면을 나눠서 각각 다른 HTML 파일을 보여주는 기능
여러 가지 문제점이 많아서 최근에는 사용하지 않음.

 

· iframe : 프레임의 인라인 버전
HTML 문서 안에서 다른 HTML 문서를 보여주는 태그

 <iframe src="current.html" width="200" height="160"></iframe>

화면 내 지도삽입, 온라인 결제창 띄울 때 사용함.

---

7. 폼

폼 만들기

폼 구성요소
· input : 내용을 적는 칸
· label : input에 설명을 적음
· button : 입력한 내용 전송

      <!--인풋의 id와 for속성 일치-->
      <label for="signup-email">이메일</label> <!-- 라벨과 인풋 연결-->
      <input id="signup-email" name="email">

· email : input의 이름

· 뒤에 있는 값 : 웹 브라우저에서 입력한 값

 

라벨에 포커싱될 때

 

<label> 태그로 <input>을 감싸는 경우

<label>
  아이디
  <input name="...">
</label>

 

라벨의 for 속성과 인풋의 id속성 일치

<label for="username">아이디</label>
<input id="username" name="...">

 

기본적인 입력 폼 예시

    <form>
      <div>
        <label for="signup-email">이메일</label> 
        <input id="signup-email" name="email" type="email">
      </div>
      <div>
        <label for="signup-password">비밀번호</label> 
        <input id="signup-password" name="password" type="password">
      </div>
      <div>
        <label for="signup-password-repeat">비밀번호 확인</label> 
        <input id="signup-password-repeat" name="password-repeat" type="password">
      </div>
    </form>

 

---

버튼

button 태그는 기본적으로 form안에 있으면 눌렀을 때 적은 내용을 전송함.
· <button type="button"> : 버튼 누를 때 데이터 전송 X
· <button type="submit"> : 버튼 누를 때 데이터 전송 O
· <button type="reset"> : 버튼 누를 때 내용 초기화

 

---

다양한 인풋

 

checkbox

한 항목만 선택할 때 : label과 input 1개만 작성

여러 항목 중 몇 개를 선택할 때 : name값을 다 같이 해줘야함.

<label for="fruit">좋아하는 과일</label>
<label>
  <input type="checkbox" name="fruit" value="apple">
  사과
</label>
<label>
  <input type="checkbox" name="fruit" value="banana">
  바나나
</label>
<label>
  <input type="checkbox" name="fruit" value="orange">
  오렌지
</label>

 

날짜 date

<input name="birthdate" type="date">

 

파일 file

<input name="protile" type="file" accept=".png, .jpg" multiple>

accept : 업로드 가능한 파일 형식

multiple : 있으면 여러 개 선택 가능, 없으면 1개만 선택

 

이메일 email

<input name="email" type="email">

 

숫자 number

<!-- 100에서 1000사이, 버튼을 눌렀을 때 100씩 증가, 감소 -->
<input type="number" min="100" max="1000" step="100">

 

라디오 radio

동그란 선택 버튼으로 1개만 지정 가능함

<input id="very-good" name="feeling" value="0" type="radio">
<label for="very-good">최고</label>
<input id="soso" name="feeling" value="1" type="radio">
<label for="soso">보통</label>

 

범위 range

막대기 늘리는 거

<label for="signup-feeling">현재 기분</label>
<input id="signup-feeling" name="feeling" min="1" max="10" type="range">

 

텍스트 text

기본값이라 굳이 지정하지 않아도 됨

<input name="nickname" type="text">

 

긴 글 textarea

꼭 닫아주는 태그를 써야 함

<textarea name="content"></textarea>

 

옵션 선택 select

아래 내리면 목록 나와서 고르는 거

<label for="genre">장르</label>
<select id="genre" name="genre">
  <option value="korean">한국 영화</option>
  <option value="foreign">외국 영화</option>
</select>

---

 

8. 다른 코드 불러오기

link 태그

· 외부 파일을 불러올 때 사용, 용도와 경로를 지정할 수 있음.

· rel : 불러올 파일이 어떤 종류인지 적기
- preconnect : 불러올 파일들이 어떤 사이트에 있는지 미리 브라우저에 알려줌
- icon : 파비콘 등록 가능 (브라우저 제목 왼쪽 아이콘)
· href : 파일의 주소 (현재 폴더를 기준으로 파일을 찾아줌)

  <head>
    <meta charset="utf-8">
    <title>코드잇 캠핑장</title>
    <link rel="stylesheet" href="style.css">
    <link rel="icon" href="favicon.ico">
  </head>

---

script 태그

· 자바스크립트 파일을 불러올 떄 사용하는 태그

· 주로 body 안 맨 마지막에 써줌. 

· 반드시 </script>로 닫아줘야 함.

 

화면에는 출력되지 않지만, 크롬 개발자 도구 console창에 실행됨.

  <body>
    <script>
      console.log('아무 문장이나 넣자!'); <!--콘솔창에 출력됨-->
    </script>
  </body>

 

script.js 파일이 실행됨.

  <body>
      <script src="script.js"></script>
  </body>

---

9. 의미있는 HTML

사이트에 대한 정보

<head> 안에는 메타데이터가 있음.
메타데이터 : 데이터에 대한 데이터, 컴퓨터가 읽어서 처리

<meta charset="utf-8">

웹 브라우저에서 한글이 깨질 수 있기 때문에 인코딩 지정한 코드

<meta property="ogLtitle" content="라멘">

og : 오픈 그래프, 페이스북에서 제작한 메타데이터, 미리보기를 보여줄 때 사용

---

시맨틱 태그

· 의미를 가진 태그로 <div> 태그와 기능은 완전히 같음
· 작성자 의도를 잘 표현하는게 중요함
· 엄격한 규칙을 갖고 있는 것이 아님

header	사이트 위쪽에 공통으로 들어가는 내용 여러 곳에서 쓸 수 있음
nav	메뉴 영역
main	영역의 본격적인 내용
footer	사이트에서 아래쪽에 공통적으로 들어가는 내용 영역 아래 여러가지 정보, 여러 영역에서 쓸 수 있음
main	한 페이지에 딱 한번만 쓴다
article	하나의 독립적인 내용 ex. 블로그 본문, 블로그 댓글
section	어떤 것의 부분 ex. 주제별로 나눠진 부분
figure	이미지 + 이미지에 대한 설명

---

시맨틱 태그를 사용하면 좋은 점

• 검색 최적화(SEO) : 메타태그 및 시맨틱 태그 꼼꼼히 작성
• 접근성(A11y) : 시각장애인을 위한 스크린리더가 읽어줄 때 편리함
• 개발자 관점 : 코드를 통해 사이트를 이해하기 편리함