IT BLOG

3 분 소요

HTML5

  • 최초 웹 개발자 - 팀 버너스 리 넷스케이프를 만듦.

  • HTML5 때 표준화가 되었다.

  • WHATWG에서 어플리케이션 1.0 을 발표 => HTML5로 표준화 했다. (테스트할때 모든 웹을 띄우고 테스트하던 시절에서 표준화 덕에 편리해짐.)

  • 웹(Web) : 요청과 응답 과정으로 동작. 보통 index.html을 먼저 읽는다.

서버프로그램 (백엔드 프로그램)

  • 웹 프레임워크 (ASP, NET,JSP,PHP 등)

  • MVC 프레임워크 (Modem view control) (asp.net mvc, spring mvc, ruby on rails등)

  • 비동기 프레임워크 (node.js express, jetty => 웹프레임 워크는 자바 언어와 html에 섞어씀)

  • 프레임워크: 뼈대를 만들고 살만붙일 수 있게 만들어놓은 것.

클라이언트 프로그램 (프론트엔드 프로그램)

  • CSS는 html의 디자인을 담당한다.

  • CSS : HTML 페이지에 스타일을 지정하는 스타일시트를 작성할때 사용하는 언어.

  • Java Scripts : 옛날에는 사용자 반응 처리등에 이용되었으나 현대에는 프론트엔드 개발에 막강한 언어가 되었다.

웹 표준 기술

  • HTML5(웹 페이지 구성) + CSS3(스타일 적용) + 자바스크립트(사용자 반응 처리 등, 이벤트라 함)

  • 큰 의미 -웹 표준 기술을 총칭

  • 작은 의미 - HTML5만 의미하기도 함.

HTML 주요 기능

멀티 미디어 기능

  • 플러그인 도움 없이도 스스로 음악과 동영상을 재생

그래픽 기능

  • 2차원 그래픽 구현

    • html 태그를 사용해 2차원 벡터 그래픽 구현

    • 자바스크립트 캔버스를 사용해 2차원 래스터 그래픽 구현

  • 3차원 그래픽 구현

    • CSS3를 사용해 3차원 그래픽 구현

    • 자바스크립트 WebGL을 사용해 3차원 그래픽 구현

    • JPG는 벡터 그래픽 방식이 아니다. (Bitmap 방식)

  • 벡터 그래픽의 장점 : 실제로 이미지에 표현되는 점에 대한 정보를 저장하여 이미지를 표현하여 확대해도 깨지지 않는다.

  • 비트맵이 래스터 그래픽이다.

HTML5의 장점

  • HTML5와 CSS3를 이용해서 앱 수준의 반응형 웹 페이지를 만들 수 있다.

  • 네이티브 코드 : HTML5로 개발시. 안드로이드 , 아이폰에 맞게 사용할 수 있다.

  • 크로스 플랫폼 개발 : 개발로 여러 플랫폼에 대응할 수 있다.

오픈 소스 라이센스

  • Apache license : 아파치 소프트웨어 재단에서 자체 소프트웨어에 적용하기 위해 만든 라이센스 이다. 개인적/상업적 이용, 배로, 수정, 특허 신청이 가능하다.

  • MIT License : 메사추세츠공과대학에서 소프트웨어 학생들을 위해 개발한 라이센스이다. 개인 소스에 이 라이센스를 사용하고 있다는 표시를 해야한다.

  • BSD License : 버클리 캘리포니아대학에서 개발한 라이센스이다. 개인 소스에 이 라이센스를 사용하고 있다는 표시를 해야한다.

HTML5 실습

# HTML5 기본 용어

<p/> => XML(HTML의 조상) 에서 닫는 태그를 생략할때 사용하는데 html5에서는 열고 닫는것을 권장.

<주석>
주석이 달려있으면 컴파일러(명령어 해석기) 가 무시함.
디버깅할때 실행을 무효화할때도 사용한다.

!DOCTYPE HTML => HTML5로 작성한다는 것을 알림.
여는건 <html> 로 열고 <head> 와 <body> 가 있다. (Title은 웹 브라우저 탭에 보이게 됨)

Visual Studio Code 로 실습.

# 확장팩 설치

korea language pack for visual studio code
Live server     => local server로 바로 확인.
Auto rename tag => 태그를 자동으로 수정.
indent-rainbow

D2coding 설치 후 windows/fonts 에 저장.

image

first.html => 새 파일과 폴더 지정.

<!DOCTYPE html>
<html>
<head>
     <title> Hello HTML5 </title>
</head>
<body>

바아디


</body>
</html>

image

# 내부 스타일 시트

<!DOCTYPE html>
<html>
<head>
     <title> Hello HTML5 </title>
     <style>
        h1 {
            color : white;
            background: rgb(72, 104, 23);
        }
    </style>
</head>
<body>

<h1>바아디 여기는 바디입니다. </h1>






</body>
</html>


# 외부 스타일 시트

style.css 의 스타일 시트 파일을 만들었다.

h1{
    color : white;
    background: green;
}


<link rel="stylesheet" href="style.css" => Link로 .css을 불러오는 외부 스타일시트 결과는 똑같으나, 외부는 협업을 하는 프로젝트가 큰 경우 사용을 많이한다.

image

Alert("내용");  =>회원 가입시 경고창 등 을 띄울때 사용.

image

<!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>html5 + CSS3 text</title>
</head>
<body>
    <h1> 제목 글자 태그</h1>
    <h2> 제목 글자 태그</h2>
    <h3> 제목 글자 태그</h3>
    <h4> 제목 글자 태그</h4>
    <h5> 제목 글자 태그</h5>
    <h6> 제목 글자 태그</h6>


</body>
</html>

image

Lorem +tap => 시안을 작성할때 의미없는 더미 텍스트를 의미함. Emmet이 제공.
P태그가 단락을 알아서 구성해준다.

<!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>HTML TEXT Basic Page</title>
</head>
<body>
    <h1>제목             글자</h1>
    <p>Lorem ipsum dolor<br> sit amet consectetur adipisicing elit. Dolorum, harum! Voluptates sequi hic, corporis voluptas deleniti nostrum dolor iste quibusdam officiis id et quidem blanditiis sunt ea perferendis, quas dolores.</p>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Libero provident quo, sunt praesentium tenetur corrupti, reprehenderit aspernatur ea est perspiciatis natus asperiores atque repellat facere rem incidunt consequatur cum earum.</p>
    <hr>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi velit exercitationem et ipsa dolores beatae mollitia sed ea labore ad, vitae adipisci blanditiis quisquam animi eaque saepe corrupti quo placeat.
</body>
</html>

image

<!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>HTML5 + CSS3 Text</title>
</head>
<body>
    <h1>홍차</h1>
    <hr>
    <h2>정의</h2>
    <p>홍차는 백차, 녹차, 우롱차보다 더 많이 발효된 차의 일종이다. 동양에서는 찻물의 빛이 붉기 때문에 홍차라고 부르지만, 서양에서는 찻잎의 색깔 때문에 'black tea'라고 부른다.</p>
    <br>
    <br>
    <h2>등급</h2>
    <p>홍차는 여러 가지로 등급이 매겨진다. 일반적으로 찻잎의 모양에 따른 등급과 가공 상태에 따른 등급을 조합하여 표시한다.</p>
    <p>- 브로큰 페코</p>
    <p>- 브로큰 페코 수숑</p>
    <p>- 브로큰 오렌지 페코 패닝</p>
</body>
</html>

태그:

카테고리:

업데이트:

댓글남기기

참고

Dockerfile, private-registry

1 분 소요

오늘은 도커파일을 이용한 이미지 빌드와 사설 저장소를 이용한 이미지 푸쉬, 컨테이너 동작을 실습해보았다.

AWS 3일차

4 분 소요

AWS에서 인스턴스의 로드밸런서 실습과 오토스케일링 실습을 해보았다.