T아카데미 HTML5&CSS3강의를 들으며 내용을 정리 하였습니다.
- 태그와 속성
태그는 시작태그와 종료태그가 있고 태그마다 속성이 존재하고 속성에는 속성값이 존재합니다.
태그 형태
<태그명> ~~~ </태그명>속성 형태
<태그명 속성1="속성값", 속성2="속성값" ...> ... </태그명> - HTML 주석
주석이란?
HTML 문서가 브라우저를 통해서 출력될 때 노출되지 않습니다. 주석을 적어놓으면 나중에 자신이나 다른 사람이 이 HTML 문서를 다시 보게되었을 때 문서를 쉽게 파악할 수 있고 디버깅이나 유지보수가 쉽습니다.
주석 형태
<!-- 주석 설명 --> - HTML 문서구조
DOCTYPE이란?
문서형식을 정의해줍니다.
HTML태그란?
HTML을 기술하기 위하여 사용하는 명령어의 집합입니다.
head 태그란?
주로 웹 문서의 정의가 기술됩니다.
meta 태그란?
웹 문서에 대한 정보를 제공합니다.
title 태그란?
주소창 위 탭의 제목을 기술합니다.
body 태그란?
주로 웹 문서의 내용이 기술됩니다.
브라우저를 통해 확인되는 내용들 입니다.
텍스트 관련 태그
- h1 태그 ~ h6 태그
이 태그는 섹션이나 문단의 제목을 나타내는 태그입니다. 숫자가 작을수록 글자의 크기가 커집니다.
태그 형태
<!--#에는 숫자(1~6)을 적어야됩니다.--> <h#> 내용 </h#> - p태그
이 태그는 하나의 문단을 만들 때 사용하는 태그입니다.
태그 형태
<p> 내용 </p> - br태그
이 태그는 줄바꿈을 할 때 사용합니다.
태그 형태
<body> 내용1 내용2 내용3 <br /> 내용4 </body> - hr태그
이 태그는 문단을 의미적으로 분리할 때 사용합니다.
태그 형태
<body> 내용1 내용2 <hr /> 내용3 내용4 </body> - a태그
이 태그는 웹 문서를 이동할 수 있게끔 해주는 태그입니다.
태그 형태
<a href="이동할 주소"> 내용 </a>태그 속성
href : 이동할 주소입니다.
target : 값을 _blank로 주면 새로운 창에서 페이지가 열리고 _self로 주면 현재 창에서 페이지가 열립니다.
목록 구성 태그
- ol 태그
이 태그는 순서가 있는 목록을 나타냅니다. 하위 목록으로는 li태그를 이용합니다.
태그 형태
<ol> <li>목록1</li> <li>목록2</li> <li>목록3</li> ... </ol> - ul 태그
이 태그는 순서가 없는 목록을 나타냅니다. 하위 목록으로는 li태그를 이용합니다.
태그 형태
<ul> <li>목록1</li> <li>목록2</li> <li>목록3</li> ... </ul> - dl태그, dt태그, dd태그
dl태그는 목록을 만들겠다고 명시합니다.
dt태그는 목록에 대한 제목을 나타냅니다.
dd태그는 목록의 아이템을 나타냅니다.
목록이 여러개를 만들어야할때 dl태그 안에서 dt태그와 dd태그를 이용하여 만들어주면 됩니다.태그 형태
<dl> <dt>목록 제목</dt> <dd>목록1</dd> <dd>목록2</dd> <dd>목록3</dd> </dl>
테이블 태그
- table 태그, tr 태그, td태그
table 태그는 표를 나타내기 위한 태그입니다.
tr 태그는 내부태그로 테이블에서 행을 표현합니다.
td 태그는 내부태그로 테이블에서 열을 표현합니다.
th 태그는 테이블의 내용을 강조합니다. 보통 첫번째 행에서 사용합니다.태그 형태
<table> <tr> // 1행 <td>테이블 내용1<td> // 1행 1열 <td>테이블 내용2<td> // 1행 2열 <td>테이블 내용3<td> // 1행 3열 </tr> <tr>...</tr> // 2행 </table>태그 속성
border(table태그) : 표 테두리의 두께를 설정합니다.
colspan(td태그) : 열을 합칩니다.
rowspan(td태그) : 행을 합칩니다. 행을 합친 뒤 다음 tr태그부터 합쳐진 행에 대한 데이터를 넣지 않아도 됩니다.
폼 관련 태그
- form 태그
사용자의 정보를 서버로 전달하기 위한 용도로 사용되는 태그이고 데이터 처리 문서의 주소와 데이터 전달 방식을 속성으로 가집니다.
태그 형태
<form action="#" method="get"> <input type="text"> ... </form>태그 속성
action : form 태그 안의 데이터를 어디로 보낼지 설정합니다.
method : 데이터 전송 방식을 설정합니다.데이터 전송 방식
GET 방식 : 데이터가 해당 URL뒤에 쿼리문이 붙어서 서버로 보내는 방식입니다. URL에 해당 정보가 포함되어 있어 보안에 취약합니다.
POST 방식 : 데이터가 해더 부분에 암호화되어 서버로 보내는 방식입니다. - input 태그
type속성을 이용하여 사용자의 다양한 정보를 얻을 수 있습니다.
태그 형태
<input type="타입">type속성의 종류
text : 텍스트를 입력받습니다.
password : 입력받은 텍스트를 암호화 처리되어 보여집니다.
file : 파일을 첨부할 수 있습니다.
radio : 하나만 선택할 수 있는 버튼입니다.
checkbox : 여러개 선택할 수 있는 버튼입니다. - textarea 태그
장문의 글을 작성할 수 있는 텍스트 박스입니다.
태그 형태
<textarea rows="5" cols="5"> ... </textarea>태그 속성
rows : 행을 설정합니다.
cols : 열을 설정합니다. - select 태그와 option태그
다양한 선택지 중에서 선택하는 드롭박스를 만듭니다.
태그 형태
<select> <option>옵션1</option> <option>옵션2</option> <option>옵션3</option> </select>태그 속성
multiple : 여러개 선택할 때 설정합니다.
이미지 태그
- img 태그
웹 문서에 이미지를 삽입하기 위한 태그입니다.
태그 형태
<img src="이미지의 위치나 이미지의 주소">태그 속성
src : 이미지의 위치 정보를 설정합니다.
alt : 해당 이미지에 대한 설명을 설정합니다.
페이지 레이아웃 설정 태그
1. block 타입의 태그
- div 태그
웹 문서의 레이아웃을 설정하는 용도로 많이 사용됩니다.
태그 형태
<div> ... </div>
2. inline 타입의 태그
- span 태그
웹 문서에서 특정한 의미를 나타내지는 않지만 CSS나 Javascript를 이용하여 변형하기 쉽습니다.
태그 형태
<span> span태그 </span>
시멘틱 태그
- 시멘틱 태그란?
검색 엔진이 보다 효율적으로 데이터를 검색할 수 있게 특정 태그를 사용해서 웹 문서를 제작하는 것을 시멘틱 웹이라고 합니다.
- header 태그
페이지에 대한 정보를 담는 태그입니다. 페이지 상단에 위치합니다.
태그 형태
<header> 페이지에 대한 정보 </header> - footer 태그
페이지에 대한 꼬릿말입니다. 꼭 문서의 마지막에 쓸 필요는 없습니다.
태그 형태
<footer> 페이지에 대한 정보 </footer> - nav 태그
페이지에서 네비게이션 역활을 합니다.
태그 형태
<nav> <ul> <li>메뉴1</li> <li>메뉴2</li> <li>메뉴3</li> </ul> </nav> - section 태그
사이트에 포함된 독립적인 섹션을 정의할 때 사용합니다.
태그 형태
<section> 섹션에 대한 내용 </section> - article 태그
문서나 페이지 또는 사이트와는 완전히 독립적으로 구성할 수 있는 요소입니다.
태그 형태
<article> 내용 </article> - aside 태그
페이지의 주제와 연관은 되어 있지만 해당 주제와 분리 시킬때 사용합니다.
태그 형태
주제에 대한 내용 <aside> 주제와 연관은 되있으나 분리시킬 수 있는 내용 </aside>
멀티미디어 관련 태그
- embed 태그
멀티미디어 요소를 삽입할 수 있습니다. 요즘에는 사용하지 않습니다.
태그 형태
<embed src="멀티미디어 위치" width="가로사이즈" height="세로사이즈" autostart="false">태그 속성
src : 멀티미디어파일의 위치입니다.
width : 멀티미디어의 가로 사이즈입니다.
height : 멀티미디어의 세로 사이즈입니다.
autostart : 자동실행 여부를 설정합니다. - audio 태그
웹 문서에 음악을 삽입할 수 있습니다.
태그 형태
<audio src="오디오 파일 위치" controls="controls" autoplay="autoplay" loop="loop">태그 속성
src : 오디오파일의 위치입니다.
controls : 오디오 컨트롤러가 출력됩니다. 해당 속성을 지우면 컨트롤러를 출력하지 않습니다.
autoplay : 자동실행을 설정합니다. 해당 속성을 지우면 자동실행이 되지 않습니다.
loop : 반복 실행을 설정합니다. - video 태그
웹 문서에 동영상을 삽입할 수 있습니다.
태그 형태
<video src="비디오 파일 위치" type="재생매체 타입 설정" controls="controls" autoplay="autoplay" loop="loop">태그 속성
src : 비디오파일의 위치입니다.
type : 비디오파일 재생매체 타입을 설정합니다.
controls : 비디오 컨트롤러가 출력됩니다. 해당 속성을 지우면 컨트롤러를 출력하지 않습니다.
autoplay : 자동실행을 설정합니다. 해당 속성을 지우면 자동실행이 되지 않습니다.
loop : 반복 실행을 설정합니다.
아이디(id)속성와 클래스(class)속성
- 아이디(id)속성
id는 페이지 내에 있는 다른 요소들과 구분하기 위해 사용하는 고유의 이름입니다. 한 페이지 내에 같은 아이디를 사용하면 안됩니다.
- 클래스(class)속성
요소들을 묶어주기 위해 사용하는 이름입니다. 아이디속성와 달리 클래스 속성은 여러개 사용 가능합니다.
