01_230504

Nami·2023년 5월 4일

NOW
📚 모던 웹을 위한 HTML5+CSS3 바이블, 윤인성
HTML5 개요
HTML5 태그 기본

모던 웹을 위한 HTML5+CSS3 바이블

1. HTML5 개요

월드 와이드 웹(World Wide Web)은 인터넷에 연결된 컴퓨터를 통해 사람들이 정보를 공유할 수 있는 정보 공간을 말한다. 인터넷은 전 세계를 연결하고 있는 국제 정보 통신망이고 웹은 그 위에서 작동하는 서비스이다. 2가지 구분하기.

W3C(World Wide Web Consortium) : 팀 버너스리가 창설, 웹 표준을 지정하는 기관, HTML 표준을 재정하는 단체.
웹 2.0시대 : 사용자들이 함께 새로운 콘텐츠를 창조할 수 있게 된 시대.
WHATWG :IE를 제외한 웹 브라우저 제공기업(Apple, Mozilla, Opera)이 독자적으로 설립한 새로운 웹 표준 기관.
일렉트론 : Github가 개발한 HTML5 기반의 데스크톱 애플리케이션 개발 엔진
리액트 네이티브 : 페이스북이 개발한 모바일 애플리케이션 개발 엔진

<!-- HTML 기본 구조 -->
<!DOCTYPE html>
<html>
<head>
	<title>Document</title>
</head>
<body>
	<h1>Hello World!</h1>
</body>
</html>

2. HTML5 태그 기본

태그(Tag), 요소(Element), 속성(Attribute)
태그 : HTML 페이지에서 객체를 만들 때 사용하는 것.
요소 : 태그를 사용해 만들어진 객체 (태그와 요소는 보통 구분하지 않음.)
속성 : 태그에 추가 정보를 부여하는 것
(속성 이름, 속성 값, 속성 블록)
주석 : 설명을 위한 목적으로 사용하는 코드.

HTML5 페이지 구조

<head> 내부에 넣을 수 있는 태그 
<meta> 웹 페이지에 추가 정보 전달
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> 웹 페이지 제목 </title>
<script> 웹 페이지에 스크립트 추가 <script>
<link> 웹 페이지에 다른 파일 추가
<style> 웹 페이지에 스타일시트 추가 </style>
<base> 웹 페이지의 기본 경로 지정

<!-- 글자 태그 -->
<!-- HEADER 태그 -->
<h1>첫 번째로 큰 제목 글자 태그</h1>
<h2>두 번째로 큰 제목 글자 태그</h2>
...
<h6>여섯 번째로 큰 제목 글자 태그</h6>

<!-- 본문 -->
<!-- paragraph 단락 태그 -->
<p>본문 글자 태그</p>
<!-- 줄바꿈 태그 -->
<br />
<!-- 수평 줄 태그 -->
<hr>

<!-- 앵커 태그 -->
<a href="https://github.com">Github</a>
<!-- 빈 링크 -->
<a href="#"></a>
<a href="#tab1"></a>

<!-- 글자 형태 -->
<b>굵은 글자</b>
<i>기울어진 글자</i>
<small>작은 글자 태그</small>
<sub>아래에 달라 붙는 글자</sub>
<sup>위에 달라 붙는 글자</sup>
<ins>밑줄 글자</ins>
<del>가운데 줄 그어진 글자</del>

글자 형태의 경우 font-style로 CSS로 관리하는 것이 훨씬 낫다는 생각.

<!-- 목록 태그 -->
<ul>
	<li>unordered list</li>
    <li>순서가 없는 목록</li>
</ul>
<ol>
	<li>ordered list</li>
    <li>순서가 있는 목록</li>
</ol>

현재 잘 쓰이지 않는 태그의 경우에는 간단히 보고 기록하지 않는다.

<!-- 테이블 태그 -->
<body>
	<table border="1">
    <caption>Caption</caption>
    <colgroup>
    	<col span="2" />
        <col />
    </colgroup>
    <thead>
      <tr>
          <th></th>
          <th></th>
      </tr>
    </thead>
    <tbody>
      <tr>
          <th></th>
          <th></th>
      </tr>
    </tbody>
    <tfoot>
      <tr>
          <th></th>
          <th></th>
      </tr>
    </tfoot>
</body>

<!-- rowspan : 셀의 높이 지정 -->
<!-- colspan : 셀의 너비 지정 -->

<!-- 이미지 태그 -->
<img src="이미지 경로" alt="이미지 설명" />
<img src="http://placehold.it/300x200" alt="원하는 크기의 이미지를 제공해주는 사이트" />

<!-- 비디오 태그 -->
<video poster="미리보기 이미지">
	<source src="video.mp4" type=""video/mp4" />
</video>
<!-- 요즘은 vimeo, youtube에서 iframe 태그로 삽입하는 경우가 많다. -->

<form> 입력양식 지정을 위한 기본 태그
<input>	여러 유형의 입력 양식을 지정
<textarea> 여러 라인에 걸친 프리 포맷 입력 양식
<label>	입력 양식과 연결되는 텍스트 라벨
<fieldset> 입력 양식들을 그룹으로 묶어주는 태그
<legend> <fieldset>의 제목을 표시
<select> 드롭다운 박스로 목록중에서 선택할 수 있는 양식
<optgroup> <select>안에서 목록을 그룹화
<option> <select> 의 선택 항목 지정
<button> 입력 버튼 생성

<form>
	<label for="라디오">input 태그 설명하는 데 사용</label>
	<input id="라디오" type="button"></input>
</form>
<!-- type 종류 --> 
<!--
text : 텍스트 입력
password : 비밀번호 입력
checkbox : 복수 선택 가능한 체크 박스
radio : 복수 선택 불가능한 라디오 버튼 생성
submit : 입력양식을 서버로 전송하기 위한 버튼
reset : 초기화
button : 일반 버튼
-->

<!-- HTML5 입력 양식 태그 -->
<!--
email : 이메일 입력
search : 검색어 입력
url : URL 입력
tel : 전화번호 입력
number : 숫자 입력
range : 범위 선택
date : 날짜 입력
color : 색상 선택
-->

<!-- textarea 태그 -->
<form>
	<textarea></textarea>
</form>

<!-- select 태그 -->
<select>
	<option>김밥</option>
    <option>떡볶이</option>
    <option>순대</option>
    <option>오뎅</option>
</select>

<!-- 공간 분할 태그 -->
<div>block 형식으로 공간 분할</div>
<span>inline 형식으로 공간 분할</span>

<!-- HTML5 시멘틱 구조 태그 -->
<header>헤더</header>
<nav>네비게이션</nav>
<aside>사이드에 위치하는 공간</aside>
<section>여러 중심 내용을 감싸는 공간</section>
<article>글자가 많이 들어가는 부분</article>
<footer>푸터</footer>

웹의 역사 추후에 따로 정리해보기 🤓
Semantic, 의미론적인 웹 구조 정리해보기

Nami

다음 포스트

01_230504

모던 웹을 위한 HTML5+CSS3 바이블

1. HTML5 개요

2. HTML5 태그 기본

HTML5 페이지 구조

01_230504

0개의 댓글