Front-end : HTML5
HTML5 요소기술
-
HTML : HyperText Markup Language
-->> 웹 브라우저에서 눈으로 보이는 화면을 만드는 언어 -
CSS3 : Cascading Style Sheet
-->> HTML 문서를 스타일(장식) 하는 기술 -
Javascript : 웹 브라우저 안에서 실행되는 프로그램 언어
--> OOP언어로, 자바 언어와 상당히 비슷함.
--> HTML 문서에 동적인 기능을 추가하기 위해 사용.
(웹 브라우저 밖에서도 사용 가능한 범용 언어)
크로스 브라우징
여러 브라우저에서 화면 구현 확인 (Chrome, Safari, FireFox, Edge, Opera, ...)
마크업 MarkUp
<start tag> contents </end tag> 를 이용해 컨텐츠의 정보를 표시하는 것
EMMET coding
코딩하기 편하도록 HTML 문서의 기본 타입을 만들어 줌
<!DOCTYPE html> <!--DOCTYPE 을 작성해야 html5 로 작성가능하다. 생략하지 말 것!-->
<html lang="ko"> <!--웹 접근성 표준. 스크린 리더기 등 보조공학 기기가 lang속성의 값을 기준으로 운용됨. -->
<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">
<!--viewport : 랜더링된 이미지가 사용자에게 보여지는 영역. 반응형web 때문에 사용. 다양한 디바이스에 맞춰 배치-->
<!--device-width : 사용할 device의 가로폭.-->
<!--initial scale : 배율-->
<title> sample01 </title>
</head>
<body> <!--화면에 출력하는 컨텐츠-->
<img src="https://picsum.photos/id/1025/600/400" alt="">
</body>
</html>img src=""
<img src="https://picsum.photos/id/1025/600/400" alt="">
~~/id/1025 >> 이미지 번호. 생략시 매번 랜덤으로 새로운 이미지를 출력함.
600/400 >> 이미지 가로/세로 pixel 크기
Viewport
현재 화면에 보여지고 있는 다각형(보통 직사각형)의 영역.
웹 브라우저에서는 현재 창에서 문서를 볼 수 있는 부분(전체화면이라면 화면 전체)을 뜻한다.
HTML문서의 body 태그 사이에 있는 컨텐츠가 렌더링되어 나타나는 영역
HTML Element
현재 HTML 문서를 구성하는 요소를 의미
(이미지, 제목, 문단,...)
내가 보려고 쓰는 블로그