HTML (Hypertext Markup Language)
태그 (시작태그, 종료태그)
코멘트
<!-- 내용 -->단축키: Cmd + /
링크
링크의 상대 주소
현재 폴더는 점 한 개(./)로 표시하고, 상위 폴더는 점 두 개(../)로 표시한다. 최상위 폴더는 경로 맨 앞에 /로 시작하면 된다.
index.html 파일은 이름을 생략하고 폴더 이름만 쓸 수 있다.
페이지 안에서 이동하기 (URI Fragment)
페이지의 특정 부분을 가리키는 주소, 원하는 곳에 id 속성을 지정해 두고, 링크 주소로 사용할 때는 맨 끝에 #로 시작하는 #아이디-이름을 쓰면 된다.
<a href="#id_이름">새 창 열기
<a href="주소" target="_blank">현재 창으로 열기
<a href="주소" target="_self">target에 원하는 이름을 넣어주면 그 창에서 열린다.
ex) 여러 링크가 target="movie"이면 같은 창에서 열림
URI 스킴 목록
이메일 보내기
mailto:<이메일 주소>라는 걸 사용하면 이메일을 보낼 수 있다. 이 링크를 클릭하면 이메일 프로그램이나 이메일 앱을 열 수 있고, 받는 사람 주소에 링크에 적힌 이메일 주소를 자동으로 입력해 준다.
<!-- test@example.com으로 이메일 보내기 -->
<a href="mailto:test@example.com">메일 보내기</a>전화 걸기
tel:<전화번호>를 사용하면 전화를 걸 수 있다. 데스크톱 컴퓨터에서는 전화 기능이 없을 수 있지만, 스마트폰에서 이 링크를 클릭하면 전화 앱으로 연결된다.
<!-- 한국의 010-1234-0123으로 전화걸기 -->
<a href="tel:+821012340123">전화 걸기</a>
텍스트
자주쓰는 텍스트 태그
- 제목 태그
<h1> ~ <h6> - 본문
<p> - 줄바꿈
<br> - 중요
<strong> - 강조
<em> - 취소
<s> - 인용
<blockquote>,<q> - 위 첨자, 아래 첨자
<p>
물의 화학식은 H<sub>2</sub>O이고, 3의 제곱(3<sup>2</sup>)은 9이다.
</p>물의 화학식은 H2O이고, 3의 제곱(32)은 9이다.
- 주제 전환
<hr> - 미리 서식이 정해진 텍스트
<pre>
HTML에 적혀있는 그대로 보여주는 코드 - 코드
<code>
리스트
순서 리스트(Ordered List)
항목들 사이에 순서가 있는 목록을 작성할 때 <ol>이라는 태그를 감싸고, 그 안에 항목은 <li> 태그를 쓴다.
<h2>상영작 순위</h2>
<ol>
<li>라라랜드</li>
<li>명량</li>
<li>극한직업</li>
<li>신과함께: 죄와 벌</li>
<li>국제시장</li>
<li>어벤져스: 엔드게임</li>
</ol>순서 없는 리스트(Unordered List)
항목들 사이에 순서가 없는 목록을 작성할 때 <ul>이라는 태그를 감싸고, 그 안에 항목은 <li> 태그를 쓴다.
<h2>카테고리</h2>
<ul>
<li>한국 영화</li>
<li>외국 영화</li>
<li>드라마</li>
<li>예능</li>
<li>영화</li>
<li>프로야구</li>
</ul>
리스트 스타일링
순서 리스트에서는 type 속성으로 기호를 바꿀 수 있습니다.
<ol type="I">
<li>라라랜드</li>
<li>명량</li>
<li>극한직업</li>
<li>신과함께: 죄와 벌</li>
<li>국제시장</li>
<li>어벤져스: 엔드게임</li>
</ol>type = a, A, i(로마 숫자), I(로마 숫자), 1
list-style이라는 CSS 속성으로도 바꿀 수 있다.
ul {
list-style: disc; /* 동그라미 */
}기호를 없애고 싶을 때는 none을 사용한다.
ul {
list-style: none;
}리스트 항목을 한 줄로 쓰고 싶으면 display: inline-block을 활용할 수도 있습니다.
ul > li {
display: inline-block;
}테이블
<table>
<thead> /*머리글*/
<tr> /*Table row*/
<th></th> /*제목 데이터*/
<th>Premium</th>
<th>Standard</th>
<th>Basic</th>
</tr>
</thead>
<tbody>
...
</tbody>
<tfoot> <--바닥글-->
<tr>
<th></th>
<th>₩15,900</th>
<th>₩10,900</th>
<th>₩8,900</th>
</tr>
</tfoot>
</table>
테두리
table {
border: 1px solid red;
border-collapse: collapse; /*테두리 겹치기*/
border-spacing: 10px; /*테두리 간격*/
}
멀티미디어
이미지
<img src="poster.jpg" width="750" height="530" alt="영화 명량 포스터">
비디오
autoplay:자동재생, 크롬에서는 자동재생이 안 되기 때문에 muted를 추가해줘야 자동재생이 가능하다.
<video autoplay muted controls src="trailer.mp4" width="750" height="530">
</video>
오디오
<audio autoplay controls src="intro.mp3">
</audio>
iframe
인라인 프레임, 다른 HTML 문서를 문서 안에 집어넣을 때 사용한다.
<iframe src="banner.html" width="750" height="135">
</iframe>
폼
<form>
<label for="signup-email">이메일</label>
<input id="signup-email" name="email" type="email">
<input id="password" name="password" type="password">
</form>for를 이용해서 연결해주면 라벨을 눌러도 input 활성화가 가능하다.
폼에 입력한 내용을 전송하려면 name이라는 속성 필요
type="password"이렇게 하면 비밀번호처럼 내용을 가릴 수 있다.
버튼
<button type="submit">
<button type="reset"><!--초기화-->폼 전송하기
action 속성
현재 페이지 주소 말고, 다른 주소를 쓸 수도 있다.
<form action="https://google.com/search">
<input name="q">
<button>검색</button>
</form>만약 네이버라고 적고 검색 버튼을 누르면 https://google.com/search?q=네이버 라는 주소로 이동한다.
method 속성
웹 브라우저는 페이지를 이동하거나, 데이터를 전송할 때 서버에 "리퀘스트"라는 걸 보낸다.
GET 리퀘스트는 데이터를 받을 때 사용하고, POST 리퀘스트는 데이터를 보낼 때 사용한다.
페이지를 이동하는 경우에는 GET 리퀘스트를 사용한다.
하지만 프로필 사진 업로드 같은 경우에는 파일의 크기가 너무 크기 때문에 POST 리퀘스트를 사용한다.
method 속성의 기본 값은 get이다.
<form method="post">다양한 인풋
체크박스 checkbox
한 항목만 선택하는 경우
<label>
<input name="agreement" type="checkbox">
동의합니다
</label>여러 항목 중에서 몇 항목을 선택하는 경우
<input> 태그에 value 속성으로 값을 지정해 주면, 선택된 항목의 지정된 값이 쓰인다.
<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">라디오 radio
동그란 선택 버튼, 체크박스와 다르게 여러 항목 중 하나의 항목만 선택할 수 있다. value 속성과 같이 사용하면, 같은 name을 가진 <input> 태그들 중에, 선택한 <input>의 value 값을 입력하도록 할 수 있다.
<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="이메일 또는 휴대전화">
required
반드시 입력해야 하는 값
<input name="email" type="email" required>다른 태그 불러오기
link 태그
외부에 있는 것을 불러올 때 사용 css, font, favicon 등
head 태그 안에서 사용
rel 속성: 불러올 파일이 어떤 용도인지
href 속성 : 불러올 파일의 주소를 알 수 있음
<link rel="stylesheet" href="style.css"><!--css파일 불러올 때는 stylesheet-->
<link rel="icon" href="favicon.ico">script 태그
java script를 불러올 수 있음
닫는 태그가 필요함
<script src=""></script>사이트
사이트 정보
메타데이터 : 데이터에 대한 데이터
시맨틱 태그
영역을 의미있게 나눌 때 사용, div 태그랑 기능은 똑같음
<header>,nav,main,footer
헤더랑 푸터는 여러번 사용가능 메인은 한번만 사용가능
<header> : 영역 위쪽에서 로고나 제목, 메뉴 같은 걸 담고 있는 도입부
<nav> : 메뉴 영역
<main> : 사이트의 본격적인 내용으로 페이지에서 딱 한 번만 사용 가능
<footer> : 영역 아래쪽에서 여러 가지 연락처나 관련 정보를 담고 있음
<article> : 하나의 독립적인 내용 (블로그 사이트에서 블로그 글 하나, 댓글 등)
<section> : 어떤 것의 일부분을 나타내는 영역 (주제별)
<figure>: 이미지와, 이미지 설명을 담고 있는 영역
헤더, 푸터는 여러 영역에서 사용 가능
시맨틱 태그를 사용하면 좋은 점
1. 검색 최적화 (SEO)
2. 웹 접근성 () : 배리어 프리
3. 코드 읽고 수정에 용이
