1. 월드와이드웹 (WorldWideWeb, 1990)
개발자: 팀 버너스 리 (Tim Berners-Lee)
엔진: 자체 개발된 초기 엔진
특징: 최초의 웹 브라우저이자 편집기. HTML 문서를 읽고 쓸 수 있었으며, 이후 "Nexus"로 이름이 변경되었습니다.
2. 모자이크 (Mosaic, 1993)
개발자: 마크 안드레센 (Marc Andreessen)과 NCSA 팀
엔진: 자체 개발
특징: 그래픽 인터페이스를 도입한 최초의 웹 브라우저로, 이미지와 텍스트를 함께 표시할 수 있었으며, 대중적인 인터넷 사용을 촉진시켰습니다.
3. 넷스케이프 내비게이터 (Netscape Navigator, 1994)
개발자: 넷스케이프 커뮤니케이션즈
엔진: 자체 엔진 (모자이크에서 파생됨)
특징: 인터넷 붐을 이끈 주요 브라우저. 넷스케이프는 이후 자바스크립트의 발전에도 기여했습니다.
4. 인터넷 익스플로러 (Internet Explorer, 1995)
개발자: 마이크로소프트
엔진: 트라이던트 (Trident)
특징: Windows 운영 체제에 기본적으로 탑재되면서 넷스케이프를 빠르게 대체. IE 6 버전은 오랫동안 표준 지원 부족으로 비판받기도 했습니다.
5. 오페라 (Opera, 1995)
개발자: 노르웨이의 텔레콤 회사 Telenor에서 분사된 Opera Software
엔진: 프레스토 (Presto) (초기), 웹킷 (WebKit) (2013 이후), 블링크 (Blink) (최근)
특징: 데이터 압축 기능, 탭 브라우징 등의 혁신적인 기능 도입. 최근에는 Chromium 기반의 엔진으로 변경되었습니다.
6. 모질라 파이어폭스 (Mozilla Firefox, 2002)
개발자: 모질라 재단
엔진: 게코 (Gecko)
특징: 오픈 소스 브라우저로, 보안과 개인 정보 보호에 중점을 둔 설계. 확장 기능의 다양성으로 인기를 끌었습니다.
7. 사파리 (Safari, 2003)
개발자: 애플
엔진: 웹킷 (WebKit)
특징: macOS 및 iOS의 기본 브라우저. WebKit 엔진은 오픈 소스 프로젝트로, 다른 브라우저에서도 사용되었습니다.
8. 구글 크롬 (Google Chrome, 2008)
개발자: 구글
엔진: 웹킷 (WebKit) (초기), 블링크 (Blink) (2013 이후)
특징: 빠른 속도, 간결한 UI, 강력한 자바스크립트 엔진(V8)으로 빠르게 시장 점유율을 확대. 블링크 엔진을 사용하여 Chromium 프로젝트를 주도하고 있습니다.
9. 마이크로소프트 엣지 (Microsoft Edge, 2015)
개발자: 마이크로소프트
엔진: EdgeHTML (초기), 블링크 (Blink) (2019 이후)
특징: 초기에는 IE의 대체 브라우저로 EdgeHTML 엔진을 사용하였으나, 이후 Chromium 기반으로 변경되어 블링크 엔진을 사용.
ex01)
<!--
HTML
hypertext markup language
-->
<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>첫번째 html 실습</title>
</head>
<body>
<p>html5문서는 !DOCTYPE html로 시작되어야 합니다.</p>
<p>p 태그는 단락태그로 문단을 작성할 때 사용합니다.</p>
html5문서는 !DOCTYPE html로 시작되어야 합니다.
p 태그는 단락태그로 문단을 작성할 때 사용합니다.
</body>
</html>
실행결과)
ex02)
<!DOCTYPE html>
<html lang="kr">
<!--
head 태그 내부에는 하위태그를 이용해서, 문젓의 정보를 작성합니다.
-->
<head>
<!-- 문자 인코딩 설정 -->
<meta charset="UTF-8">
<!-- 문서 제목 설정 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML 실습 두번째 파일</title>
</head>
<!-- body 태그 내부에는 브라우저 화면에 띄울 내용을 작성합니다 -->
<body>
<h1>h1태그입니다 : 제목을 입력할 때 사용합니다.</h1>
<h2>h2태그입니다</h2>
<h3>h3태그입니다</h3>
<h4>h4태그입니다</h4>
<h5>h5태그입니다</h5>
<h6>h6태그입니다</h6>
<!-- 태그를 이용한 마크업 이외에는 대부분 무시됩니다 -->
<p>본문 영역입니다
두번째 줄
세번째 줄
네번째 줄
</p>
<!-- 작성된 내용 그대로 출력하는 태그 -->
<pre> pre 태그로 작성된 문자열 영역입니다
두번째 줄인가요?
세번째로 나오나요?
탭도 인식되나요?
</pre>
<i>이탤릭체</i>로 표시<br>
<em>em강조</em><br>
<b>굵게 강조</b>하는
<strong>글자</strong> 표시<br>
<del>삭제표시</del> 태그<br>
윗첨자<sup>윗첨자</sup><br>
아래첨자<sub>아래첨자</sub><br>
<mark>하이라이팅</mark>태그<br>
</body>
</html>
실행결과)
'HTML, CSS' 카테고리의 다른 글
| [CSS] input type="date" 모양 변경 (0) | 2024.08.18 |
|---|---|
| [CSS] select 모양 변경 (0) | 2024.08.18 |
| [CSS] checkbox css 체크모양 변경 (0) | 2024.08.17 |
| [CSS] radio css 꾸미기 (0) | 2024.08.17 |
| [CSS] input type="text", "password", "email" 꾸미기 border 없애기 (0) | 2024.08.16 |
