HTML 1일차
HTML5 & CSS3
-
HTML이란
HyperText Markup Language의 줄임말. 하이퍼텍스트를 마크업하는 언어. 웹에서 자유롭게 오갈 수 있는 웹 문서를 만드는 언어이다.
-
HTML5와 CSS3를 사용하는 이유
- 최신 웹 표준에 맞는 웹 사이트를 제작해야 한다. ⇒ 다양한 기기에서 인터넷 연결 가능해짐
- 앱 화면을 디자인하기 위한 기초 ⇒ 웹 브라우저에서 정보를 표시하는 방법
- 소스를 이해해서 응용할 수 있다.
HTML 기본 문서 구조
- 태그
-
<와>로 구분 - 소문자로 작성
- 여는 태그와 닫는 태그 정확히 입력 ex)
<h1></h1> - 태그 간의 포함 관계를 보기 쉽게 적당한 들여쓰기
- 속성과 함께 사용 가능
<img src=”images/first.jpg” width=”350px” height=”550px”>
- 포함 관계 명확히 표시
※
emmet을 사용하면 쉽고 간편하게 html 파일 작성 가능
-
- 구조
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> </body> </html>-
<!DOCTYPE html>: 문서 유형을 지정하는 선언문 -
<html>: 웹 문서 시작을 알리는 태그 -
<head>: 브라우저에게 정보를 주는 태그-
<title>: 웹 브라우저의 제목 표시줄에 표시됨 -
<meta>: 문자 세트를 비롯한 문서 정보 ex)<meta charset=”UTF-8”> - 모바일 기기 / 익스플로러 / 검색 엔진 고려
<meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name=”keywords” content=”html5, "해당 문서 키워드”><meta name=”description” content=”해당 문서 설명”><meta name=”author” content=”문서 소유자 또는 제작자”>
-
-
<body>: 브라우저에 표시될 내용 ### 브라우저 접두사 - 아직 표준 규약이 아닌 속성들은 브라우저에 따라 다른 방식으로 지원되기 때문에 속성 앞에 접두사를 붙임
접두사 설명 -webkit- 웹키트 방식 브라우저(사파리, 크롬 등) -moz- 게코 방식 브라우저(모질라, 파이어폭스 등) -o- 오페라 브라우저 -ms- IE -