티스토리 뷰
비전공자 문과생이지만 코딩에 대해 알아야 하는 시대에 살고 있다. 지금 간단하게 티스토리 블로그를 운영하려고 해도 웹표준 지식이 요구되는 만큼, 웹 페이지 디자인의 기초라 불리는 마크업 언어에 대해 공부하기로 했다.
웹 표준(Web Standard)
-HTML(구조) :문서작성
-CSS(표현) :폰트, 컬러, 레이아웃
-JAVASCRIPT(동작) : 어플리케이션 동작
인터넷 브라우저에서 출력되어 보여지는 페이지가 구동되기 위해서는 위의 3가지가 합쳐져야 한다.
HTML5 = HTML + CSS + JAVASCRIPT
(오픈 웹 플랫폼)
HTML(HyperText Markup Language)
HyperText : 문장이 포함된 링크를 상호 참조하여 또다른 문서로 점프할 수 있는 구조
Markup :태그로 표시하고문장 구조로 지정하는 언어
문장 태그 표시 -> HTML로 저장 -> 웹 브라우저 통해 웹페이지 확인
HTML5 Tag
= Element + Attributes + Arguments
스타트 태그<p> ~ 엔드 태그</p>
대소문자 구분 없음, 값에 대한 따옴표는 짝이 맞아야 함, 시작태그와 종료태그 한 쌍으로 구성,
종료 태그 없는 태그도 제공됨
기본 태그 소개
<!DOCTYPE html> :문서유형 선언, 첫줄 단 한번
<html></html> : HTML 문서를 나타냄(head와 body를 포함함)
<head></head> :문서제목과 헤더 정보
-<title></title> : 문서 제목
-<meta> : 문서의 설명, 키워드, 저자 등 지정(시작태그만 있음)
<body></body> : 문서내용
요약 정리
쉽게 말해 한글, 워드 문서 저장하듯이 문서를 태그 형식으로 작성해서 저장하면 크롬으로 보여진다.
저장할 때 한글은 확장자명이 .hwp , 엑셀은 .xls 등 인것처럼 메모장에 아래와 같이 작성하고 다른 이름으로 저장할 때,
'문서이름.html' 형태로 저장하면 크롬 바로가기 모양처럼 생긴 아이콘으로 저장되고 열면 내 생애 처음 만든
웹페이지가 만들어진다.
소스 코드
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>MyTitle</title>
</head>
<body>
내가 처음 만든 웹페이지!
</body>
</html>
이 소스코드를 메모장에 치고, 저장할 때 test1.html 로 저장했다.
타이틀 태그에 감싸진 부분이 제목으로 탭 상단에 노출되고, 바디 태그에 감싸인 부분이 내용으로 출력된다.
신기하다.