하나의 웹 페이지는 HTML, CSS, Javascript로 표현된다.
클라이언트 : 서버에 HTML파일 요청
서버 : HTML 파일 전송
HTML언어 : 웹페이지를 만드는 언어
컴퓨터 언어로 작성된 문서를 코드라고 부른다.
태그에는 1개 이상의 속성을 넣을 수 있다.
CSS 언어 : HTML문서를 꾸미는 언어
1. 적용할 태그에 style 속성으로 넣기 (해당 태그에만 적용)
<p style="text-align:center;color:red">프로퍼티와 값을 연속해서 사용가능, 띄어쓰지 않아도 됨2. HTML문서 head 안에 style 태그로 넣기 (전체 문서에 적용)
<head>
<style type="text/css"> // head 안에 선언 시
.course { font-size:12px; }
p { font-size:14px; }
</style>
</head>↓ body 부분에서 사용 ↓<li class="course"> 냠냠 </li>선언한 클래스를 원하는 태그에 적용3. HTML문서 head 안에 CSS 파일로 링크하기 (전체 문서에 적용)
<head>
<link rel="styleshhet" type="text/css" href="style.css">
</head>가장 많이 쓰는 방법너무 최신 인터페이스를 사용해도 모든 환경에서 적용되는 것이 아니기 때문에 주의해야 한다.
HTML5 기본 템플릿
Emmet 단축키로 html:5[tab]을 치면, 자동으로 생성되는 기본 코드
HTML5는 기본 html 문법 버전이다.
head 태그 안에는 html 문서 전체를 대표하거나, html 문서 전체에서 필요한 데이터를 넣음
- title: html 문서 제목, 주로 해당 웹페이지를 보여주는 웹브라우저 상단에 표시
- meta: html 문서 전체를 대표하는 정보를 넣는데 사용
body 태그 안에는 html 문서에 표시되는 내용을 넣음
META
문서 전반에 걸친 정보를 표시하기 위한 설정
charset / 문자 인코딩 설정 / utf-8, euc-kr 등 (유니코드, 한국어)
name / 메타 정보 이름 / author: 저자이름, description: HTML 문서 설명 등
이 중에서 검색 엔진이 체크를 많이 하는 이름들은 description, keywords, author
content 안에 설명을 넣는다.
상용화 서비스를 위해서는 검색 엔진 노출이 중요하기 때문에 디폴트로 써주는 것이 좋다.
호환성 관련 태그
<meta http-equiv="X-UA-Compatible" content="ie=edge">인터넷 익스플로러(IE)에서 최신 표준 모드로 렌더링되도록 하는 설정
자체적으로 정의한 모드가 아닌 최신 표준 모드로 렌더링 하게끔 해준다.
인터넷 익스플로러의 호환성 이슈로 기본적으로 HTML 문서에 포함되는 것이 좋다.
반응형 웹 관련 태그
뷰포트 : 화면에서 보여지고 있는 직사각형 영역, 웹브라우저 상에서는 현재 창에서 문서를 볼 수 있는 전체화면을 의미
meta viewport 설정 : 초기 viewport에 대한 설정을 의미
LINK
<link rel="stylesheet" href="style.css">
<link rel="icon" href="favicon.png">HTML에서 사용하는 CSS 파일은 별도로 빼놓는 경우가 많다.
그 파일을 HTML파일에 연결시키기 위해 사용하는 태그
rel html 문서와 외부 데이터와의 관계 표시 / stylesheet, icon 등 (css파일, 아이콘 파일)
href 외부 데이터 파일 위치 지정 / 파일 경로 (상대 경로 또는 절대 경로로 설정)
STYLE
CSS 코드를 html 문서 내에서 작성할 때 사용
SCRIPT
javascript 코드를 html 문서 내에서 작성할 때 사용
javascript 코드는 파일 형태로 link 태그를 사용해서 가져오거나, script 태그를 사용해 직접 html 문서에 넣을 수 있는 두 가지 방법으로 적용 가능
기존에는
<script type="text/javascript">라고 명시해주었으나
html5에서는
<script>
...javascript...
</sciprt>형태로 쓰는 경우가 많다.
script 코드들은 head가 아닌 body에 넣는 경우가 많다.
