📖 오늘의 학습
- HTML
HTML(Hypertext Markup Language)
- 웹 브라우저가 이해할 수 있는 언어
- 웹 문서를 만들 수 있음
1. 기본 문법
- 콘텐츠를 가지는 태그
<div>콘텐츠</div>- 그렇지 않은 태그
<br /> <— 셀프 클로징2. 속성과 값
<div title=“제목”> Content</div>- 속성 : title
- 값 : 제목
- 콘텐츠 : Content
3. HTML 기본 문서
<!DOCTYPE html> — 문서버전
<html lang=“ko”> — HTML문서 시작 선언 및 문서 기본 언어 설정
<head> — 문서에 필요한 정보가 기입되는 곳
<title>문서 제목</titile>
</head>
<body> — 실제 사용자가 눈으로 볼 수 있는 문서의 내용이 입력되는 곳
안녕하세요
</body>
</html>태그 (Tag)
1. <head>
- 사람 눈에 보이지 않는 문서의 정보가 담기는 영역
- 타이틀
- 메타데이터
- 문서 설명, 작성자
- CSS, Javascript정보
- 인코딩 정보 :- 인코딩 정보를 나타내는 속성
charset은 문서에서 허용하는 문자의 집합을 나타낸다. charset에 선언된 문자의 집합 규칙에 따라 문서에서 사용할 수 있는 문자가 제한된다.
ex) 영문으로만 이루어져 있는 집합을 사용할 경우 한글을 사용했을 때 문자가 깨지게 된다.
- 인코딩 정보를 나타내는 속성
2. <style>, <link>, <script>
<style> : head안에서 문서를 스타일링한다.
<link/> : style코드가 너무 길어질 경우 링크할 파일을 알려줌으로써 style을 적용시킨다.
3. <body>
- 사람 눈에 실제로 보이는 콘텐츠 영역
Block (블록레벨 요소)
- 레고 블록처럼 차곡차곡 쌓이고 화면 너비가 꽉 차는 요소
- 블록의 크기와 내/외부에 여백을 지정할 수 있고 일반적으로 페이지의 구조적 요소를 나타낸다.
예)<div>,<article>,<section>
Inline (인라인 레벨 요소)
- 블록요소 내에 포함되는 요소
- 주로 문장, 단어 같은 작은 부분에 사용되며 한 줄에 나열된다.
- 좌/우에 여백을 넣는 것만 허용된다.
- 크기를 조절할 수 없다.
- 블록레벨 요소를 자식으로 가질 수 없다
예)<span>,<a>,<strong>
Inline-block
- 글자처럼 취급되나, block 태그의 성질을 가지는 요소
- block과 마찬가지로 크기와 내/외부 여백을 지정할 수 있다.
- CSS로 성질을 바꾼 것이기 때문에 의미상 인라인 레벨 요소이다.
레이아웃
- HTML5부터 태그를 의미있게 사용하기 위해 Semantic 태그를 사용하여 문서 구조를 작성
- 단순히 의미 구분자인
<div>를 남발하지 않고 적절한 태그를 사용하여 웹 문서가 담은 정보와 구조를 의미있게 전달 - 태그를 적절히 사용 (용도에 맞게 사용)함으로써 검색엔진의 검색 순위에 가산점을 얻거나 홈페이지의 로딩 속도를 높임
- 콘텐츠 분할 요소
<div>: 가장 흔히 사용되는 레이아웃 태그로 단순히 구역을 나누기 위한 태그
- 레이아웃태그 #1
<header>: 블로그 글 제목, 작성일 등의 주요 정보를 담는 태그
<footer>: 페이지의 바닥줄에서 사용되며 저작권 정보, 연락처 등 부가적인 정보를 담는 태그
<main>: 페이지의 가장 큰 부분으로 사이트의 내용인 주요 콘텐츠를 담는 태그, 한 번만 사용해야 함 - 레이아웃태그 #2
<section>: 콘텐츠의 구역을 나누는 태그 - 신문지에서 여러 기사가 각자의 구역에서 각자의 정보를 전달하는 의미와 비슷한 역할을 한다
<article>: 블로그 포스트, 뉴스 기사와 같은 독립적인 문서를 전달하는 태그
<aside>: 문서의 주요내용에 간접적인 정보를 전달하는 태그로, 쇼핑몰의 오른쪽에 따라다니는 “오늘 본 상품” 같은 것으로 활용할 수 있다
콘텐츠
<h1>~<h6>: 문서 구획 제목을 나타내는 태그로 Heading 태그라고 부른다.
h1 부터 h6까지 사용 가능
h1 태그는 페이지 내에 한번만 사용되어야 하고 구획의 순서는 지켜져야 한다.
- 문단태그
<p>: 문서에서 하나의 문단을 나타내는 태그이다. 제목 태그와 함께 사용되기도 하고 단독으로 사용되기도 한다.<div>태그처럼 사용하는 경우가 많은데 그럼 안된다...
- 서식 태그
-
<b>,<strong>: 글씨의 두께를 조절할 수 있다.
<b>: 의미를 가지지 않고 단순히 굵은 글씨로 변경만 해준다
<strong>: 굵은 글씨 변경 + 강조의 의미를 부여한다. -
<i>,<em>: 글씨의 기울기를 조절할 수 있다
<i>: 기울임과 동시에 텍스트가 문단의 내용과 구분되어야 하는 경우 사용. ex) 등장인물, 외국어 구절, 기술용어 등
<em>: 기울임 + 강조의 의미를 준다 -
<u>: 글씨에 밑줄을 넣고 주석을 가지는 단어임을 나타낼 수 있다.
CSS로 스타일링하여 빨간 밑줄을 넣는 것으로 “오타”를 나타내는 것처럼 사용할 수 있다.
단순하게 밑줄만 긋는 용도로는 사용하면 안됨 -
<s>,<del>: 글씨에 취소선을 추가할 수 있다
<s>: 단순히 시각적인 취소선만 추가되고 접근성 기기에 취소에 대한 안내는 하지 않음
<del>: 문서에서 제거된 텍스트를 나타낼 수 있다.<ins>태그와 함께 사용하면 제거된 텍스트 옆에 추가된 텍스트를 표현할 수 있다.
- 링크 이동
<a>: 클릭하면 페이지를 이동할 수 있는 링크 요소를 만들 수 있다.href속성을 사용해서 이동하고자 하는 파일 혹은 URL을 작성한다.
target속성을 사용해서 이동해야 할 링크를 새 창, 현재 창 등 원하는 타겟을 지정할 수 있다
<a href=“http://programmers.co.kr” target=“_blank”> 프로그래머스로 바로가기 (새 창) </a>- 멀티미디어
-
<img>: 문서 내에 이미지를 넣는 태그. 가장 기본적인 이미지 넣는 방법
src속성을 사용해 이미지의 경로를 넣으면 이미지가 출력됨
alt속성을 사용해 이미지 로딩에 문제가 발생했을 때 대체 텍스트를 띄울 수 있음 -
<figure>,<figcaption>: 하나의 독립적인 콘텐츠로 분리하고 그에 대한 설명을 넣을 수 있는 태그
<figpication>태그를 사용해 콘텐츠의 설명 혹은 범례를 추가할 수 있고 제일 처음이나 제일 아래에 추가해서 사용할 수 있다.
보통 이미지를 넣는데 인용문, 비디오/오디오 등 문서의 흐름에 참조는 되지만 독립적으로 분리되어도 되는 내용을 담을 수 있다.
-
<video>: 문서 내에 영상을 첨부할 수 있는 태그
scr속성을 사용하여 비디오를 문서 내에 첨부할 수 있다.poster속성을 사용하면 비디오가 로드되기 전에 포스터를 보여줄 수 있다
<source>태그를 사용하면 여러 타입의 비디오를 제공할 수 있다. -
<audio>: 문서 내에 소리를 첨부할 수 있는 태그
src속성을 사용하여 소리를 문서 내에 첨부할 수 있다.
<source>태그를 사용하면 여러 타입의 오디오를 제공할 수 있다
controls속성을 사용하면 아래와 같이 재생/정지 버튼 등이 있는 컨트롤러를 띄울 수 있다.
- 컨트롤러 사용 예
<audio controls></audio><svg>: 그래픽으로 만들어진 이미지 (scalable vector graphics)
일반이미지와 다르게 수학 공식을 사용하여 그려지기 때문에 해상도의 영향을 받지 않아 확대/축소가 자유롭다.
- 주로 크기를 자주 바꾸어야하는 작은 아이콘에서 많이 사용
- 해상도가 다양하게 변화하는 최근 기기들로 인해 아이콘 외에 로고 등 주요 이미지에도 사용됨
<img>태그처럼 svg파일을 불러올 수도 있고 태그를 그대로 사용할 수도 있다.
- 코드로 이루어져 있기 때문에 스타일을 변경하거나 자바스크립트를 사용해 간단한 기능을 추가할 수도 있다
- 리스트
- 정렬되지 않은 목록 (순서가 없음)
- 정렬된 목록 (순서가 있음)
- 설명 목록
-
<ul>,<li>: 정렬되지 않은 목록 태그
- 기본 불릿(bullet)형식으로 목록을 그린다.
-<li>태그를 사용하여 목록을 구성할 수 있고 다양한 태그를 포함할 수 있다.
-<ul>태그의 자식요소로는<li>태그만 들어와야 한다. 하위 리스트를 만들려면<li>태그 안에<ul>또는<ol>태그를 사용하면 된다. -
<ol>,<li>: 정렬된 목록 태그
- 기본 숫자형식으로 목록을 그린다
-<li>태그를 사용하여 목록을 구성할 수 있고 다양한 태그를 포함할 수 있다.
-<ol>태그의 자식요소로는<li>태그만 들어와야 한다. 하위 리스트를 만들려면<li>태그 안에<ul>또는<ol>태그를 사용하면 된다. -
<dl>,<dt>,<dd>: 설명목록 태그
-<dt>태그에 사용된 다어 혹은 내용의 설명을<dd>태그에 작성할 수 있다.
- 주로 용어사전이나 “키:값”이 있는 쌍의 목록을 나타낼 때 사용한다.
-<dt>태그를 여러 개 작성하고 하나의<dd>태그를 작성하는 것으로 여러 개의 용어를 설명할 수 있다.
- 위와 반대로,<dt>태그 하나에 여러개의<dd>태그를 가질 수 있다.
- 표
<table>표를 만드는 태그
<tr>: 행을 구분할 수 있다 (row)
<td>: 열을 생성할 수 있다 (cell)
<thead>: 열 제목의 행을 넣음으로써 그룹을 지을 수 있다
<th>: 셀의 제목을 만들 수 있음
<tbody>: 표 본문요소 태그,<tbody>태그 안에 여러 열의 행을 넣음으로써 본문 요소를 그룹지을 수 있다
<tfoot>: 표 바닥글 요소 태그<tfoot>태그 안에 여러 열의 행을 넣음으로써 표의 바닥글 요소를 넣을 수 있다. 문서버전이 HTML4라면<tfoot>은<tbody>보다 먼저 작성되어야 하고 문서버전이 HTML5라면<thead>,<tbody>,<tfoot>순으로 배치되어도 좋다.
<caption>: 표가 가진 데이터에 대한 설명을 넣을 수 있다
<table>
<thead>
<tr>
<td> 열1 제목 </td>
<td> 열2 제목 </td>
</tr>
</thead>
<tbody>
<tr>
<td> 행1 열 1 </td>
<td> 행1 열 2 </td>
</tr>
<tr>
<td> 행2 열 1 </td>
<td> 행2 열 2 </td>
</tr>
</tbody>
</table>- 아이프레임
- 현재 문서 안에 다른 HTML페이지를 삽입할 수 있는 태그
- 보안이 있다면 꼭 다 불러올 수 있는 것은 아님, 아이프레임으로 불러올 수 있는지 확인해야함
src속성에 원하는 HTML 문서 또는 URL을 넣을 수 있다- 외부 페이지를 불러올 수 있기 때문에 불러온 외부 페이지의 영향을 받을 수 있다
name속성을 지칭하면,<a>태그의target속성을 사용해 iframe에서 문서 또는 URL이 열리게 할 수 있다
- 양식 태그 #1
<form>: 정보를 제출하기 위한 태그
- 정보를 입력하고 선택할 수 있는input,selectbox,textarea등을 가질 수 있다.
- 정보를 제출하기 위한button을 가진다.
-action속성으로 정보가 제출되었을 때 페이지를 이동시킬 수 있다.
-method속성으로 정보가 제출될 때 처리 방식을 결정할 수 있다.
- 양식 태그 #2 - 설명과 입력(label)버튼
-
<label>:input,textarea,selectbox의 설명을 작성할 수 있는 태그
-for속성을 사용하여 연결하고자 하는 태그에id속성을 지정하면label을 클릭하면 연결된 태그가 선택된다
-label태그 안에input을 넣으면 자동으로for->id연결과 같은 처리들을 해준다.
-id속성은 값이 절대로 중복되면 안된다. -
<input>: 사용자에게 데이터를 입력받을 수 있는 대화형 태그
- 사용자에게 데이터를 입력 받을 수 있는 대화형 태그
-type속성의 값에 따라 받을 수 있는input의 유형이 달라진다.
-value속성을 사용해 기본 내용을 입력 해둘 수 있다.
-name속성을 사용해input의 이름을 지정할 수 있다.타입종류
1.checkbox:input을 체크박스 형태로 만든다.
2.radio: 라디오버튼
3.file: 파일 첨부가능하도록 만듦
4.button:value속성에 입력된 값을 이름으로 갖는 버튼으로 만듦
5.hidden:input을 시각적으로 숨겨줌,value속성에 입력된 값은 전송된다.
-
<textarea>: 여러 줄을 입력할 수 있는 대화형 태그
- 콘텐츠를 넣으면 사용자가 입력하지 않아도 표시되는 기본값이 된다.
-cols,rows속성으로 기본 너비와 높이를 지정할 수 있다. 너비와 높이는 글자 크기 기준으로 정의된다.
<button>: 클릭 가능한 버튼의 태그로<form>태그 내에 어디서든 사용할 수 있다.
-type을reset으로 지정하면 버튼이 눌리면 입력한 양식이 모두 초기화된다.
-type을submit으로 지정하면form양식을 제출할 수 있다.(기본값)
-<button>내 콘텐츠에 다른 인라인 태그 입력이 가능 (블록레벨 태그는 불가능)
-disabled속성을 가질 수 있다.
알아두기 좋은 속성들
readonly: 사용자가 수정할 수 없는 읽기전용으로 만든다required:form이 제출될 때 필수입력사항으로 만든다. 필수입력에 대한 태그에 따른 안내 문구, 행동 등은 브라우저가 자동으로 처리placeholder:input,textarea에 부가 설명을 입력해둘 수 있다.<select>태그에선 사용할 수 없다.disabled: 요소가 비활성화되며 정보 제출 시 값이 제출되지 않는다.
HTML 작성 시 주의사항
- 대소문자 주의
- 닫는 태그 생략 주의
- 영어만 사용 (한글 X)
- ID는 중복되지 않게 사용
- 계층구조 유지 - depth 잘 지키기
- 동일한 의미의 태그 중첩 금지
📝 주요메모사항
CSS(Cascading Style Sheets)
문서의 외형을 예쁘게 꾸미는 언어
Javascript
문서에 기능을 만들어주는 언어
😵 공부하면서 어려웠던 내용
