멀티미디어
- 이미지
→ 이미지는 <img> 태그를 사용 src라는 속성에 이미지 주소를 넣어주면 된다.
→ 이 주소는 a태그에서 href 속성과 같은 방식으로 쓰면 된다.
→ 이미지에서 중요한 속성 중 하나는 alt 속성으로 이미지에 대한 정보를 텍스트로 적을 수 있는 속성
→ alt 속성을 활용하면 마크업만 보고 어떤 이미지인지 알 수 있고,
시각장애인용 스크린 리더기에서 해당 이미지가 어떤 내용인지 읽어줄 수 있다.
또, 이미지를 다운받는데 실패했을 때에도 이 글자를 보여줄 수 있다.
→ width와 height 속성은 각각 너비와 높이를 정하는 속성으로 이미지를 다운 받지 않아도 크기를
알 수 있어서 웹 브라우저 입장에서는 훨씬 효율적으로 동작할 수 있다.
또, 페이지를 로딩할 때 미리 자리를 비워 놓을 수 있다.
→ HTML 태그 안에서 width와 height의 크기를 지정하더라도 CSS로 얼마든지 크기를 수정할 수 있다.
- 비디오
→ 비디오는 <video>라는 태그를 사용하고, img 태그처럼 src 속성으로 파일 주소를 적어준다.
→ video 태그에는 몇 가지 속성을 더 지정해줘야 하는데 autoplay, muted, controls, width,
height 등이 있다.
→ autoplay라는 속성은 페이지가 로딩되면 해당 비디오가 자동으로 재생되는 기능인데,
속성 이름만 적어주면 해당 속성을 사용하겠다는 뜻
구글 chrome에서는 해당 기능이 동작을 하지 않고, 사파리에서 열어보면 자동재생이 동작한다
→ 자동 재생 기능은 갑자기 광고가 큰 소리로 재생된다거나 할 수 있기 때문에 사람들에게 거부감을
줄 수 있는 기능이다.
그래서 chrome 브라우저에서는 muted라는 속성과 함께 사용해야 자동재생이 된다.
→ controls라는 속성은 프로그레스 바와 재생 버튼이 나타난다.
→ 비디오의 크기는 이미지와 같이 width, height의 값을 지정할 수 있다.
- 오디오
→ 오디오는 audio라는 태그를 사용하고, 마찬가지로 src 속성으로 파일을 지정할 수 있다.
→ 기본적으로 audio 태그는 화면에 나타나지 않는데, controls라는 속성을 추가하면
화면에 나타난다.
→ 비디오와 마찬가지로 오디오도 자동 재생 속성이 있는데 autoplay라는 속성을 사용하면
chrome에서는 동작하지 않지만 사파리에서는 잘 동작한다.
- Iframe
→ youtube는 공유버튼을 눌러서 Embed에 들어가보면 HTML 코드가 나온다.
→ 이 HTML코드를 보면 iframe이라는 태그를 사용하는데 iframe은 Inline Frame이라는 뜻으로
예전에는 frame 태그가 있어서 frame 태그를 사용하면 사이트 화면을 나눠서 각각 다른 HTML 파일을
보여주는 기능이었는데 여러가지 문제점이 많아서 최근에는 사용하지 않는다.
→ ifrmae은 frame의 인라인 버전으로 HTML 문서 안에서 다른 HTML문서를 보여주는 태그
→ 그냥 비디오를 보여주는 것처럼 보이지만 HTML 페이지이다.
→ 개발자 도구를 열어서 확인해보면 iframe 태그 안에 HTML 태그가 있는걸 볼 수 있다.
→ <iframe src="current.html"></iframe> 이렇게 작성해보면 우리가 만든 HTML 파일에
current.html 이라는 파일이 불러와져 있는 모습을 볼 수 있다.
→ iframe에도 여러가지 속성이 있는데 width와 height를 지정할 수 있다.
→ iframe은 지도를 넣고 싶을 때에도 활용할 수 있고, 온라인 쇼핑에서 결제창을 띄우거나
강의를 보여줄 떄에도 iframe 태그를 사용할 수 있다.
- 멀티미디어 정리
이미지 <img>
→ 파일 주소는 src 속성으로 지정
→ 크기는 width와 height 속성으로 단위 없이 지정
(물론 CSS로도 크기를 조절 가능)
→ 이미지에 대한 설명은 alt라는 속성을 사용
<img src="poster.jpg" width="750" height="530" alt="영화 명량 포스터">
비디오 <video>
→ 파일 주소는 src 속성으로 지정
→ 크기는 width와 height 속성으로 단위 없이 지정
(물론 CSS로도 크기를 조절 가능)
→ 그 외에 자동 재생을 하는 autoplay 속성, 음소거를 하는 muted, 조작하는 버튼들을
보여 주는 controls 속성이 있다.
→ 특히 자동 재생은 불쾌감을 줄 수 있기 때문에 일부 브라우저에서는 반드시 muted와 함께 써야
동작한다는 점
<video autoplay muted controls src="trailer.mp4" width="750" height="530"></video>
오디오 <audio>
→ 파일 주소는 src 속성으로 지정
→ 자동 재생을 하는 autoplay 그리고 조작하는 버튼들을 보여 주는 controls 속성
<audio autoplay controls src="intro.mp3"></audio>
iframe <iframe>
→ 인라인 프레임이라는 뜻으로, 다른 HTML 문서를 문서 안에 집어넣을 때 사용
→ src로 불러올 문서의 경로를 지정
→ 이미지, 비디오, 오디오랑 마찬가지로 크기를 width, height라는 속성으로 지정
<iframe src="banner.html" width="750" height="135"></iframe>
폼
- 폼이란?
→ 회원가입이나 쇼핑을 하기 위해서는 웹사이트에서 단순히 데이터를 받기만 하는 게 아니라
내 데이터를 웹사이트로 보낼 수 있어야 한다.
이럴 때 폼(Form)이라는 걸 사용한다.
→ 회원가입을 할 때에는 아이디와 비밀번호를 적고 확인 버튼을 누르면 내가 적은 내용을 서버로 보내서
회원 가입이 되는 것
→ 회원 가입 페이지에 있는 내용을 적는 부분을 폼(Form)이라고 한다.
내용을 적는 칸은 인풋(Input)이라고 하고, 각 인풋 옆에 붙은 이름을 라벨(Label)이라고 한다.
→ 보통 버튼이 하나 있어서 버튼을 누르면 입력한 내용을 전송할 수 있다.
→ 인풋(Input)에는 문자, 숫자, 비밀번호, 라디오, 체크박스, 버튼 등 다양한 형태로 입력 가능
- 폼 만들기
→ 폼을 만들기 위해서는 <form>태그로 감싸야 한다.
input을 만들기 위해서는 <input>태그를 사용하고, 사용자가 입력하여 내용을 넣기 때문에
닫는 태그 없이 시작 태그만 쓴다.
label은 <label>이라는 태그를 사용하고 input에 설명을 적는 용도로 사용된다.
→ input과 label에는 특별한 기능이 있는데 input을 label로 감싸면 label을 클릭할 때마다 input에
커서가 생긴다.
→ <label>에는 for라는 속성을 사용하여 signup-email이라고 작성하고, <input>에는
id라는 속성으로 signup-email이라고 값을 넣어주면 label과 input이 연결된다.
→ 폼에 입력한 데이터를 전송하려면 input에 name이라는 속성이 꼭 필요하다.
input에 입력한 데이터에 이름을 붙여주는 기능
→ 입력한 값이 적힌 주소로 이동하는 것을 확인할 수 있다.
→ form태그가 데이터를 전송할 때 각 데이터의 이름으로 쓰는 것이 name 속성이다.
→ input에서 비밀번호를 입력받을 때 값이 다 보인다면 type이라는 속성을 사용해준다.
type="password"라고 적으면 입력한 값이 가려져셔 나오는 것을 확인할 수 있다.
- 버튼
→ 버튼은 <button>이라는 태그를 사용하여 만들 수 있다.
→ 버튼 태그는 기본적으로 form 안에 있으면 눌렀을 때 적은 내용을 전송한다.
→ 버튼 태그에서 type이라는 속성을 바꾸면 버튼 동작을 바꿀 수 있는데
button이라는 type을 사용하면 버튼을 눌러도 전송되지 않는다.
submit이라는 type은 기본값으로 버튼을 눌렀을 때 데이터를 전송하고,
reset이라고 type을 지정하면 내용을 초기화하는 버튼을 만들 수 있다.
→ 버튼이 form태그 바깥쪽에 위치하면 form의 내용을 전송하거나 리셋하지는 않는다.
→ 간혹 form 없이 버튼만 따로 쓰는 경우가 있으므로 참고로 알아두자.
- 폼 전송하기
action 속성
→ 폼 내용을 전송할 주소를 정하는 방법을 알아보자
→ 아래는 확인 버튼을 누르면 페이지를 이동하는 코드이다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>코드잇</title>
</head>
<body>
<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>
<button>
확인
</button>
</form>
</body>
</html>
→ 현재 페이지의 주소가 http://127.0.0.1:3000이라고 가정할 때,
이메일에 html@codeit.kr 비밀번호로는 ilovehtml이라고 적고 나서 확인 버튼을 누르면
http://127.0.0.1:3000/?email=html%40codeit.kr&password=ilovehtml&password_repeat=
ilovehtml
이렇게 주소창에 주소가 나타난다.
→ 위의 주소를 풀어보면 다음과 같다.
http://127.0.0.1:3000/
?
email=html%40codeit.kr
&
password=ilovehtml
&
password_repeat=ilovehtml
→ 물음표 이후로 폼에 입력한 값이 들어가 있는데 이런 걸 쿼리 문자열(Query String)이라고 한다.
→ <input> 태그마다 name 속성 값이랑 입력한 값이 짝지어 적혀 있다.
→ http://127.0.0.1:3000이라는 부분은 폼이 보이는 현재 페이지의 주소
→ 기본적으로는 현재 페이지 주소의 맨 끝에다 쿼리 문자열을 붙여서 이동
→ 현재 페이지 주소 말고, 다른 주소를 쓰고 싶다면 직접 정해 줄 수도 있다.
→ <form>태그의 action 속성을 사용
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>코드잇</title>
</head>
<body>
<form action="https://google.com/search">
<input name="q">
<button>검색</button>
</form>
</body>
</html>
→ "코드잇"이라고 적고 검색 버튼을 누르면
https://google.com/search?q=코드잇이라는 주소로 이동
method 속성
→ 웹 브라우저는 페이지를 이동하거나, 어떤 데이터를 전송할 때 서버에 "리퀘스트"라는 걸 보내는데
퀘스트의 종류에는 여러 가지가 있다.
→ GET 리퀘스트는 데이터를 받을 때 사용하고, POST 리퀘스트는 데이터를 보낼 때 사용
→ 폼 버튼을 눌렀을 때 페이지를 이동하는 건, 웹 브라우저가 어떤 서버로 GET 리퀘스트를 보낸 것
→ 프로필 사진 파일을 업로드하는 경우는 파일은 크기가 너무 크기 때문에 GET 리퀘스트와
쿼리 문자열 만으로는 보낼 수 없다.
→ 이럴 때는 POST 리퀘스트를 주로 사용
<form> 태그의 method 속성을 바꿔 주면 POST 리퀘스트를 보낼 수 있다.
→ method 속성의 기본 값은 get
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>코드잇</title>
</head>
<body>
<form method="post">
<div>
<label for="profile">프로필</label>
<input id="profile" name="profile" type="file">
</div>
<button>
확인
</button>
</form>
</body>
</html>
→ POST 메소드를 잘 보내는지 간단히 확인해 보기 위해서 테스트용 서버를 하나 사용해보자.
→ Request Bin(https://requestbin.com/)이라는 서비스를 사용
→ Request Bin을 이용하면 간단한 서버를 만들어서 내가 보내는 리퀘스트를 확인할 수 있다.
→ Create Request Bin을 클릭하고, 간단히 가입하면 아래와 같은 관리 화면이 나오는데,
여기서 m.pipedream.net으로 끝나는 주소가 테스트용으로 만들어진 서버
→ 만약에 리퀘스트가 들어오면 왼쪽 화면에 기록되는데 만들어진 서버 주소를 복사해서 새 탭을 열고,
접속해보면 다시 관리화면으로 돌아오면 왼쪽에 GET 리퀘스트가 기록된다.
→ 이 주소를 폼의 action 속성으로 붙여 넣고, method 속성으로는 post를 써서 폼을 전송하면
Request Bin 페이지에 POST 리퀘스트가 들어와 있다.
body라는 걸 클릭해 보면 아까 작성한 폼의 내용이 보인다.
- 다양한 인풋
type에 쓸 수 있는 값에는 password 말고도 다른 값을 알아보자.
체크박스 checkbox
- 한 항목만 선택하는 경우
→ 아래 예시에서는 "동의합니다"에 체크하는 경우 agreement의 값이 on이라는 문자열로 지정
<label>
<input name="agreement" type="checkbox">
동의합니다
</label>
- 여러 항목 중에서 몇 항목을 선택하는 경우
→ <input> 태그에 value 속성으로 값을 지정해 주면, 선택된 항목의 지정된 값이 쓰인다.
→ 예를 들자면 아래 코드에서는 "액션"이랑 "코미디"를 선택했을 때 film의 값으로 action과
comedy라는 문자열이 지정
→ 폼을 전송했을 때 쿼리 문자열에서는 &film=action&film=comedy처럼 전송
<label for="film">좋아하는 영화 장르</label>
<label>
<input type="checkbox" name="film" value="action">
액션
</label>
<label>
<input type="checkbox" name="film" value="comedy">
코미디
</label>
<label>
<input type="checkbox" name="film" value="romance">
로맨스
</label>
날짜 date
→ 선택한 날짜로 값을 지정
<input name="birthdate" type="date">
파일 file
→ 파일을 선택할 수 있는 인풋
<input name="avatar" type="file">
- 파일 형식 지정하기
→ accept라는 속성을 써서 허용할 파일 확장자들을 지정
<input name="avatar" type="file" accept=".png,.jpg">
- 파일 개수 지정하기
→ multiple이라는 참/거짓 속성을 사용하면 여러 개 또는 한 개만 선택하도록 정할 수 있다.
<input name="photos" type="file" multiple>
<input name="avatar" type="file">
이메일 email
→ 텍스트를 입력할 수 있는 건 똑같지만, 버튼을 눌러서 폼을 전송할 때 올바른 이메일 형식인지
자동으로 검사
<input name="email" type="email">
숫자 number
→ 숫자를 입력하고, 최소 최대 값이나 버튼을 눌렀을 때 증가, 감소할 양을 정할 수 있다.
<input type="number">
<input type="number" min="100" max="1000">
<input type="number" min="100" max="1000" step="100">
비밀번호 password
→ 값을 입력했을 때 입력한 내용이 가려진다.
<input type="password">
라디오 radio
→ 동그란 선택 버튼
→ 체크박스와 다르게 여러 항목 중 하나의 항목만 선택할 수 있다.
→ value 속성과 같이 사용하면, 같은 name을 가진 <input> 태그들 중에, 선택한 <input>의
value 값을 입력하도록 할 수 있다.
→ 예를 들어서 아래 코드에서 "좋음"을 선택하면 feeling의 값으로 3이라는 값이 들어간다.
<input id="very-bad" name="feeling" value="0" type="radio">
<label for="very-bad">아주 나쁨</label>
<input id="bad" name="feeling" value="1" type="radio">
<label for="bad">나쁨</label>
<input id="soso" name="feeling" value="2" type="radio">
<label for="soso">보통</label>
<input id="good" name="feeling" value="3" type="radio">
<label for="good">좋음</label>
<input id="very-good" name="feeling" value="4" type="radio">
<label for="very-good">아주 좋음</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">
옵션 선택 <select>
→ 미리 정해져 있는 여러 값들 중에서 하나를 선택할 수 있는 태그
→ <select> 태그 안에 <option> 태그를 value와 함께 사용
→ 예를 들어서 아래 코드에서 드라마를 선택하면 genre의 값이 drama가 된다.
<label for="genre">장르</label>
<select id="genre" name="genre">
<option value="korean">한국 영화</option>
<option value="foreign">외국 영화</option>
<option value="drama">드라마</option>
<option value="documentary">다큐멘터리</option>
<option value="vareity">예능</option>
</select>
긴 글 <textarea>
→ 긴 글을 입력할 수 있는 인풋
→ <input> 태그와 달리 반드시 종료 태그(</textarea>)를 써 주어야 한다.
<textarea name="content"></textarea>
- 유용한 인풋 태그 속성
값이 비어있을 때 보여주는 값 placeholder
<input name="username" placeholder="이메일 또는 휴대전화">
→ 이때 placeholder 의 디자인을 바꾸려면 CSS 선택자로 ::placeholder 를 활용
input::placeholder {
color: #dddddd;
}
반드시 입력해야 하는 값 required
→ 폼에서 반드시 입력해야 하는 값이 있다면 required 속성을 써준다.
→ 만약 required인 인풋의 값이 비어있다면, 전송 버튼을 눌러도 전송되지 않는다.
<input name="email" type="email" required>
자동 완성 autocomplete
→ 이 속성을 지정해 두면 폼이 전송될 때마다 입력한 값을 웹 브라우저에 저장해 두고,
나중에 인풋에 값을 입력할 때 추천
→ 참고로 required와 달리 on이라는 값을 지정해 주어야 동작
<input name="search" type="text" autocomplete="on">
→ 만약에 이메일을 채워 넣게 하고 싶다면 email이라는 값을 쓸 수 있고,
전화번호를 채워 넣고 싶다면 tel이라는 값을 쓸 수 있다.
<input name="email" type="email" autocomplete="email">
<input name="telephone" autocomplete="tel">
HTTP attribute
- 폼 정리
기본적인 폼의 형태
<form>
<label for="username">아이디</label>
<input id="username" name="username">
<label for="password">비밀번호</label>
<input id="password" name="password" type="password">
<button>로그인</button>
</form>
라벨
→ <label> 태그로 <input>을 감싸면 라벨을 클릭했을 때 인풋에 포커싱
<label>
아이디
<input name="...">
</label>
→ 혹은 라벨의 for 속성과 인풋의 id 속성을 일치시키면 클릭했을 때 인풋에 포커싱
<label for="username">아이디</label>
<input id="username" name="...">
인풋 <input>
→ name 속성은 폼을 전송했을 때 입력한 값에 매칭되는 이름
→ 예를 들어서 아래 코드에서는 인풋에 입력한 값이 username이라는 이름에 매칭
<label for="...">아이디</label>
<input id="..." name="username">
→ type 속성을 사용하면 다양한 인풋을 사용할 수 있다.
→ 대표적으로 입력한 값을 가려주고 싶을 때는 type="password"를 사용
<label for="password">비밀번호</label>
<input id="password" name="password" type="password">
다른 코드 불러오기
- link 태그
→ link 태그는 HTML 문서에서 외부에 있는 걸 불러올 때 사용
대표적으로 CSS 파일이나 ICON같은 것들을 불러올 때 사용한다.
→ link태그는 head태그 안에 작성하고, rel이라는 속성과 href 속성을 같이 쓴다.
→ rel은 relation, 관계라는 뜻으로 불러올 파일이 어떤 종류인지 적는다.
→ href는 a태그에서 보는 것과 같이 파일의 주소를 작성
- script 태그
→ 웹사이트를 프로그램처럼 사용할 수 있는 건 JS라는 프로그래밍 언어 덕분
→ JS를 쓰면 웹사이트 안에서 코드를 실행해서 유용한 일들을 할 수 있다.
→ body태그 안에 <script>태그를 작성할 수 있는데 JS도 CSS처럼 파일로 불러올 수 있다.
→ script에서도 src속성으로 JS파일의 경로를 지정하여 적용할 수 있다.
→ 주의할 점은 script 태그는 반드시 닫는 태그가 필요하다.
- link, script 정리
<link> 태그
→ 외부에 있는 것을 불러올 때 사용하는 태그
→ 어떤 목적인지를 rel 속성에 작성, 위치는 href로 지정하고, 주로 <head> 태그 안에서
맨 마지막에 써준다.
CSS 파일을 불러올 때는 rel="stylesheet"라고 작성
<head>
...
<link rel="stylesheet" href="style.css">
</head>
사이트 아이콘을 불러올 때는 rel="icon"이라고 작성
<head>
...
<link rel="icon" href="favicon.ico">
</head>
<script> 태그
→ 자바스크립트 파일을 불러올 때 사용하는 태그
→ 파일의 위치는 src로 적고, 주로 <body> 태그 안에서 맨 마지막에 써준다.
→ 종료 태그인 </script>를 써야한다.
<body>
..
<script src="like.js"></script>
</body>
의미있는 HTML
- 사이트에 대한 정보
→ head 태그는 페이지에 대한 정보를 담고 있는 태그라고 했는데 이런 걸 메타데이터(Metadata)
라고 한다.
→ head 태그 안에는 컴퓨터가 읽고 사용하는 메타데이터가 담겨 있다.
→ 메타데이터란 데이터에 대한 데이터라고 할 수 있는데 예를 들어 도서관의 책을 생각해보면
책의 제목과 저자이름, 출간날짜는 데이터 라고 할 수 있고, 도서 분류 번호는 데이터에 대한
데이터로 메타데이터라고 할 수 있다.
→ head안에 있는 정보가 모두 메타 데이터라고 할 수 있는데 meta태그는 여러가지 데이터를
자유롭게 담는데 사용한다.
- 시맨틱 태그란?
→ 지금까지 배운 태그는 내용을 적을 때 해당 내용이 문서 안에서 어떤 의미인지
즉, 제목인지, 본문인지, 이미지인지 등을 정해주기 때문에 문서의 구조를 만들 수 있었다.
→ 이런식으로 사이트를 제작할 때 각 영역을 div태그로 나누어서 구조를 만들고,
그 안에 내용을 채우고 CSS를 적용하여 스타일링했는데
각각의 영역은 똑같은 div 태그로 나누었지만 문서 안에서는 다른 의미를 가진 영역이다.
→ 의미를 가진 태그라고 하여 시맨틱 태그라고 하고,
이름은 달라도 성질은 div 태그와 완전히 똑같은 태그들이다.
→ 영역의 위쪽에서 로고나 제목, 메뉴와 같이 영역의 도입부를 담고 있는 header태그
사이트 안에서 이동하는데 쓰이는 메뉴 영역은 nav태그
영역의 본격적인 내용에는 main태그
영역의 아래쪽에서 여러가지 정보를 담고 있는 footer태그
→ main태그는 한 페이지 안에서 딱 한 번만 쓸 수 있는 태그이지만
header와 footer 태그는 여러 영역에서 사용이 가능한 태그이다.
→ 블로그 사이트에서 블로그 글 하나는 그 자체로 완성된, 독립된 내용을 가지고 있다.
이런 경우에는 article이라는 태그를 사용하여 구분해준다.
(= article 안의 내용은 하나의 완전한 내용이라고 볼 수 있다.)
→ 블로그 글 밑에 달린 댓글은 블로그 글의 일부가 아닌 그 자체로 독립적인 내용이므로
이것도 하나의 article로 볼 수 있다.
→ 어떤 것의 부분을 나타낼 때 쓰는 section이라는 태그가 있다.
블로그 사이트 메인 화면에서 글 목록을 보여줄 때 주제별로 앵무새 소식, 먹이 리뷰
이렇게 여러 부분으로 나누어서 글들을 보여준다면 section으로 나눌 수 있다.
→ 그리고 이미지와 이미지에 대한 설명을 묶어놓은 영역은 figure라는 태그로 사용
→ HTML문서는 단순히 화면을 보여 주기 위한 것만은 아니기 때문에 시맨틱 태그를 사용한다.
→ 시맨틱 태그는 영역을 의미있게 나눌 때 사용하고 div 태그와 기능은 완전히 같다.
잘못 쓴다고 해서 동작이 안되는 것도 아니므로 작성하는 사람의 의도가 중요하다.
- 시맨틱 태그를 사용하면 좋은 점
(1) 검색엔진최적화(Search Engine Optimization)
→ 웹사이트를 만들고 나면 검색 엔진에 등록도 하고 광고도 하게 되는데
구글이나 네이버 같은 사이트에서 사람들이 검색해서 방문할 때 어떤 사이트는 맨 위에 뜨고
어떤 사이트는 아래에 뜬다.
→ 검색 했을 때 우리가 원하는 사람들에게 딱 맞게 보여줄 수 있도록 사이트를 최적화하는 걸
SEO라고 한다.
→ SEO를 하는 방법은 여러가지가 있으나, 기본적으로는 head 태그 안에 meta 태그를
꼼꼼하게 작성하고 시맨틱 태그를 작성하는 것
→ 검색 서비스들은 각자 검색 엔진 로봇 프로그램을 사용해서 여러 사이트의 정보를 수집
이때 메타데이터와 시맨틱 태그가 잘 작성되어 있다면 검색 엔진이 사이트를 정확하게
파악할 수 있다.
(2) 웹 접근성(Web Accessibility, A11y)
→ 2020년 기준으로 세계 인구의 15퍼센트는 장애인이라고 한다.
그 중에서도 시각 장애인은 인터넷을 사용하는데 어려움을 많이 겪는다.
→ 시각 장애인들은 스크린 리더라는 프로그램으로 인터넷을 사용하는데
스크린 리더는 화면을 소리내어 읽어주고 웹 서핑을 할 수 있도록 도와준다.
→ div로만 구성되어 있다면 어디가 본문이고 어디가 메뉴인지 알기 힘들다.
시맨틱 태그로 구성되어 있다면 어디가 어디인지 알 수 있기 때문에 장벽 없는 (Barrier-Free)
인터넷을 만드는 데 중요한 역할을 한다.
(3) 개발자 관점
→ 검색 엔진 로봇과 시각 장애인 그리고 개발자들의 공통점은 눈에 보이는 화면이 아니라
코드를 통해서 사이트를 이해한다는 것
→ 시맨틱 태그를 사용한다면 개발자의 생산성을 높이는데 많은 도움이 된다.
- 의미있는 HTML 정리
<head> 태그
→ 페이지에 대한 정보를 담고 있는 태그
→ 이 페이지에 대한 데이터를 담고 있는데, 화면에 보여 주기보다는 웹 브라우저가 읽어서
처리하는 용도
<head>
<meta charset="utf-8">
<title>코드잇 캠핑장</title>
<link rel="stylesheet" href="style.css">
<link rel="favicon" href="favicon.ico">
</head>
시맨틱 태그
→ <div>와 기능은 똑같지만, 의미가 담겨있는 태그들을 '시맨틱 태그'
→ 엄격한 사용법이 있는 건 아니고, 작성하는 사람의 의도가 중요
→ 시맨틱 태그를 잘 활용하면 검색 엔진 최적화(SEO)나 접근성(Accessibility)을 높이는데 도움
| 태그 이름 | 용도 |
|---|
| header | 영역 위쪽에서 로고나 제목, 메뉴 같은 걸 담고 있는 도입부 |
| main | 사이트의 본격적인 내용으로 페이지에서 딱 한 번만 사용 가능 |
| footer | 영역 아래쪽에서 여러 가지 연락처나 관련 정보를 담고 있음 |
| article | 하나의 완성된, 독립적인 내용을 나타내는 영역 |
| section | 어떤 것의 일부분을 나타내는 영역 |
| figure | 이미지와, 이미지 설명을 담고 있는 영역 |
