HTML?

서로 링크로 연결된 문서를 만들 때 쓰며 내용 뿐만 아니라 구조와 의미적인 정보도 표시한다.

링크의 상대 주소 (Relative URL)

• ./index.html : 현재 폴더의 index 페이지
• ./ : index.html은 생략 가능하기 때문에 이것도 index 페이지
• ../ : 상위 폴더
• / : 최상위 폴더

target 속성

새 창(새 탭)으로 열거나 현재 창 또는 내가 원하는 창으로 열 수 있다.

• target="_blank" : 새 탭 열기
• target="_self" : 현재 브라우징 맥락에서 열기
• target="_parent" : 현재 브라우징 맥락에서 열기
• target="_top" : URL을 최상단 브라우징 맥락에서 열기. 부모가 존재하지 않으면 _self 와 동일하게 행동한다.
• target="_이름작성" : 내가 원하는 이름의 창 열기

Markup

• 본문 <p>: 본문을 작성할 때 쓰는 태그입니다.

• 중요 <strong>: 중요한 내용을 강조해서 표시할 때 사용하는 태그입니다.주의할 점은 두꺼운 글씨를 쓰고 싶다고 이 태그를 쓰면 안된다. 두꺼운 글씨를 넣으려면 CSS로 두꺼운 글씨를 만들고, 의미상 강조의 의미가 있는 경우에만 <strong>을 사용해야 한다.

• 강조 <em>: 일반적인 문장이지만 조금 다르게 읽어서 강조를 하곤 한다. HTML에서도 <em> 이라는 태그를 사용해서 이런 내용의 강조를 나타낼 수 있다.

• 취소 <s>: 어떤 내용을 적었다가 지우지 않고, 지웠다는 표시만 남기고 싶을 때 사용한다.

• 인용 <blockquote>, <q>: 다른 곳에서 가져온 내용을 긴 글로 인용할 때는 <blockquote> 를 사용하고,
  글 안에서 짧게 인용할 때는 <q> 를 쓰면 된다.
  

• 주제 전환(Thematic Break) <hr>: 과거에는 가로 선(Horizontal Line)이라고 불러서 <hr> 라고 쓰지만, 최근 HTML에서는 글에서 주제를 전환할 때 쓰는 태그. 브라우저에서는 기본적으로 가로 선을 그어서 보여준다.

• 미리 서식이 정해진 텍스트 <pre>:
  본문 태그인 <p> 처럼 글을 이어서 보여주는 게 아니라, HTML에 적혀있는 그대로 보여주는 태그. 보통 코드 같은 걸 쓸 때 많이 사용한다.

• 코드 <code>: 글 안에서 짧은 코드를 작성할 때 쓴다.

Multi media

image

img src='' alt='사진 설명'

video

video src='' autoplay muted controls

• autoplay: 자동재생
• muted: 비디오의 소리를 끄는 옵션
• controls: 프로그래스 바와 재생버튼 보여준다. (영상 조작 버튼)

audio

audio src='' alt='사진 설명' controls autoplay
기본적으로 오디오태그는 화면에 보이지 않는다. 컨트롤즈 속성을 추가해야한다. autoplay 속성은 크롬에서는 동작하지 않지만 사파리에서는 동작한다.

iframe

다른 웹페이지를 불러와서 사용하고 싶을 때 사용한다.

form

label & input

기본적인 폼의 형태

<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>을 감싸면 라벨을 클릭했을 때 인풋에 포커싱
• 라벨의 for 속성과 인풋의 id 속성을 일치시키면 클릭했을 때 인풋에 포커싱

input

name 속성은 폼을 전송했을 때 입력한 값에 매칭되는 이름이다.예를 들어 아래 코드에서는 인풋에 입력한 값이 username이라는 이름에 매칭된다.

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

type 속성을 사용하면 다양한 인풋을 사용할 수 있다. 대표적으로 입력한 값을 가려주고 싶을 때는 type="password"를 사용한다.

<label for="password">비밀번호</label>
<input id="password" name="password" type="password">

input의 여러가지 type

• 체크박스 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">

<!-- 100에서 1000사이 -->
<input type="number" min="100" max="1000">

<!-- 100에서 1000사이, 버튼을 눌렀을 때 100씩 증가, 감소 -->
<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>

input의 유용한 속성

• 값이 비어있을 때 보여주는 값 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">

시맨틱 태그 (Sementic Tag)

의미를 가진 태그라는 뜻에서 시맨틱 태그라고 부른다. 이름은 다르지만 성질은 div태그랑 완전히 똑같은 태그들이다. 작성하는 사람의 의도가 중요하다.

header

페이지 내에서 여러번 사용 가능하다. 영역 위쪽에서 로고나 제목, 메뉴 같은 걸 담고 있는 도입부

nav

메뉴를 만들 때 사용한다.

main

사이트의 본격적인 내용으로 페이지 내에서 딱 한 번만 사용할 수 있다.

article

하나의 독립적인 내용을 나타내는 태그 ex) 블로그 글, 댓글 등

section

어떤 것의 부분을 나타낼 때 쓰는 태그 ex) 글 목록을 보여줄 때 주제별로 여러부분으로 영역을 나눌 때 사용

figure

이미지와 이미지에 대한 설명을 영역으로 묶을 때 사용하는 태그

footer

페이지 내에서 여러번 사용 가능하다. 영역 아래쪽에서 여러 가지 연락처나 관련 정보를 담고 있다.

시맨틱 태그를 사용하는 이유

1. 검색 최적화 (Search Engine Optimization)
   검색했을 때 우리 사이트를 우리가 원하는 사람들에게 딱 맞게 보여줄 수 있도록 사이트를 최적화 하는 것을 말한다. 가장 중요한 것은 head 태그 안에 meta 태그를 꼼꼼히 작성하고, 시맨틱 태그를 작성하는 것이다.

웹 접근성 (Web Accessibility)

짧게 줄여서 A11y 라고도 쓴다. 장벽 없는 (Barrier-Free) 인터넷을 만드는데 중요하다.

개발자 관점

개발자의 생산성을 높이는 데에 무척 좋다.