개발자입니다
[비트캠프] 14일차(3주차4일) - 숫자/문자/색상 2진수 변환, HTML 태그 종류 본문
[비트캠프] 14일차(3주차4일) - 숫자/문자/색상 2진수 변환, HTML 태그 종류
끈기JK 2022. 11. 24. 11:41Data를 메모리에 저장
데이터를 2진수로 변환할 수 있다면 메모리에 저장할 수 있다. 2진수로 변환하려면 규칙이 있어야 한다.
여기서 데이터란 정수, 실수, 문자, 그림, 동영상, 소리, 빛, 냄새(냄새의 2진수 규칙 없음)
Data → 2진수 변환 규칙
정수
① Sign-Magnitude (부호-절대값)
양수와 음수는 부호만 다르고 값은 같다(부동 소수점의 가수부를 표현할때 사용). 8비트의 맨 앞은 부호비트 이다. - 일때는 맨 앞은 1이 된다.
이 방식의 문제점은 빼기 연산 결과가 일반적이지 않다. 해결을 위해 - 연산 기능을 첨가시켜야 했고 CPU가 커지게 되었다. 결과적으로 Sign-Magnitude 방식을 사용하지 않는다.
② 1's Complement (1의 보수)
보수 : 특정 숫자가 1이 되기위해 더해줘야 하는 수
1의 보수 : 0 → 1, 1 → 0
9의 보수 : 8 → 1, 7 → 2
+24에서 1의 보수는 -24로 모든 비트를 반대로 뒤집는다. 0001 1000 → 1110 0111
그러나 빼기 연산을 위해 합치면 1이 부족하다.
그래서 2의 보수를 사용한다.
③ 2's Complement (2의 보수)
1's 보수 +1로 계산한다.
현대의 컴퓨터는 음수를 표현할때 2의 보수를 사용한다.
④ Excess-K
부동 소수점의 지수부 표현할때 사용
문자
① ASCII (7bit) - 국제표준x
영어 알파벳 대-소문자, 숫자, 특수문자, ...
② ISO-8859-1 (ISO-Latin-1) 8bit - 국제표준
ASCII + 유럽문자, 남미문자, ...
한글 Windows 기본 문자표
③ EUC-KR (16bit) - 국제표준
한글 문자 정의
ISO-8859-1(1byte) + 한글(2byte)
EUC-KR에서 정의 안한 문자가 있어 '똠' 글자 사용이 불가하다.
④ 조합형 - 국제표준x
초성(5bit), 중성(5bit), 종성(5bit)로 모든 한글 가능하다.
한글인 경우 맨 앞 값은 1이다.
⑤ MS-949(CP949) 16bit - 국제표준x
EUC-KR + α = 11172자
한글 Windows OS의 기본 규칙(문자에 대해 2진수를 매핑한 규칙 "character set")
똥 - B6CB ← 문자에 대해 정의된 2진수(16진수) "character code"
# 각각 MS-949, UTF-16, UTF-8 저장
ABC
abc
123
가각간
똘똠똡똣똥 # 선택 부분
VSCode 확장 'Hex Editor' 설치
이걸로 국제표준이 되지 않아 등장한게 유니코드이다.
⑥ Unicode(UTF-16) 2byte - 국제표준
Universal Coded Character Set + Transformation Format
모든 문자를 2byte로 정의
영문자도 2byte → 메모리 낭비 뿐만 아니라 기존의 편집기 사용 불가
한글은 EUC-KR과 호환되지 않는다. 모든 문자를 새 값으로 재정의
한글의 모든 문자 코드는 정렬되었다.
⑦ Unicode(UTF-8) 1byte - 국제표준
기존의 편집기에서도 영어를 읽고 쓸수 있도록 만듦
7bit로 정의해서 쓰던 문자는 그대로 계속 7bit 사용. 예) ASCII 문자는 그대로
그 외 문자는 규칙에 따라 2~4byte로 변환 예) 한글 2byte → 3byte 변환 : 한글은 오히려 손해봄!
색상
가장 빛이 작을때 : 00
가장 빛이 셀때 : FF
encoding/decoding
문자를 규칙에 따라 2진수로 표현한 것이 문자 코드이다. 이를 encoding(코드화 하다)라고 한다.
코드를 규칙에 따라 다른 형식으로 변환하는 것을 encoding이라 한다. 예) 압축, 암호화
변환한 코드를 원래 형식으로 되돌리는 것을 decoding이라 한다. 예) 압축 풀기, 복호화
URL Encoding : 웹 자원의 주소를 표기하는 문법. URL에서 특수 목적으로 사용하는 문자(reserved keyword, 예약어)는 일반 용도로 사용할 수 없다. 특정 형식(%인코딩)에 맞춰 변환해야 한다.
예약어 : ! * ' ( ) ; : @ & = + $ , / ? # [ ]
비예약어 : 변환할 필요가 없는 문자. A-Z a-z 0-9 - _ . ~
URL에 비예약어는 그대로 사용한다. 그러나 예약어는 변환해서 사용한다.
!는 ASCII에서 16진법으로 21이다. URL에서 !를 표기하기 위해서 먼저 %를 앞에 두고 21을 붙인다. 이는 %21인데 이는 각각 문자로 표현되어 16진법으로 25 32 31 가 된다.
Data를 입력하면 Web Browser가 자동으로 URL Encoding 수행하고 이를 다시 Web Server가 자동으로 URL Decoding 수행하여 App에 전달한다.
영상 Data와 인코딩/디코딩
영상, 소리 데이터는 너무 크므로 특별한 수학공식(algorithm)에 따라 압축하는데 이 과정을 encoding이라 한다.
사용자2 쪽에서 사용하는 영상 플레이어에 A 알고리즘을 디코딩하는 기능이 없을때 "CoDec 없다!" 라고 한다.
해결 방안으로 해당 코덱을 다운로드 받아 플레이어에 장착해야 한다.
CR / LF
Carriage Return / Line Feed : 예전에 타자기에서 줄 바꾸는 것을 모방하여 만든 코드 값
-Window OS에서 줄바꿈을 표시할 때 CRLF 2byte를 붙인다.
-Unix/Linux는 줄바꿈을 표시할 때 LF 1byte만 사용한다
HTML 태그
1. <meta>및 <title>
<meta> : 옵션에 charset 지정해야한다.
<title> : 입력시 브라우저 상단 탭에 제목이 표시된다.
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
2. <h1> ~ <h6>
제목 태그로 1~6까지 조절한다.
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</body>
3. <p>
문단을 나눠주어 자동으로 한 줄 띄운다.
<body>
<h1>Lorem ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sed nisi velit. Phasellus suscipit pellentesque leo, vel efficitur mi placerat sed. Fusce vel condimentum leo, at iaculis ante. Suspendisse posuere, dolor non tempor ullamcorper, nisl elit facilisis erat, nec lacinia augue erat id lacus. Curabitur mollis, justo nec lobortis hendrerit, libero nunc aliquam lacus, ut tristique sem nunc eu metus. Quisque varius orci eu felis sollicitudin malesuada. Vivamus pretium ligula velit, eget facilisis enim imperdiet ac.</p>
<p>Nam commodo mi a lorem congue id rutrum leo venenatis.</p>
</body>
4. <hr> 및 <br>
<hr> : 가로 선을 만든다.
<br> : 한 줄 띄운다.
HTML5는 <br /> 같이 / 입력하지 않아도 된다.
<body>
<h1>Lorem ipsum</h1>
<h2>dolor sit amet</h2>
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<br />
<p>In porttitor lorem at justo feugiat aliquet.</p>
<br />
<p>Nunc id massa at magna semper hendrerit.</p>
<br />
<p>Vivamus rhoncus eros vel ante suscipit non facilisis risus rutrum.</p>
</body>
5. <a>
하이퍼링크를 걸때 사용한다.
옵션
- target
- _blank : 새로운 윈도우나 탭 열기
- _self : 링크가 위치한 현재 프레임(default)
- _parent : 현재 프레임의 부모 프레임
- _top : 현재 윈도우 전체
- 프레임 이름 : <a>의 속성 name으로 명시된 프레임
<body>
<a href="http://hanbit.co.kr">Hanbit</a><br>
<a href="https://github.com/">GitHub</a><br />
</body>
본문 내부 id로 갈때는 옵션에 id="#id명" 해서 사용한다.
<body>
<a href="#alpha">Move to Alpha</a>
<a href="#beta">Move to Beta</a>
<a href="#gamma">Move to Gamma</a>
<hr />
<h1 id="alpha">Alpha</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sed nisi velit. Phasellus suscipit pellentesque leo, vel efficitur mi placerat sed. Fusce vel condimentum leo, at iaculis ante. Suspendisse posuere, dolor non tempor ullamcorper, nisl elit facilisis erat, nec lacinia augue erat id lacus. Curabitur mollis, justo nec lobortis hendrerit, libero nunc aliquam lacus, ut tristique sem nunc eu metus. Quisque varius orci eu felis sollicitudin malesuada. Vivamus pretium ligula velit, eget facilisis enim imperdiet ac.</p>
<h1 id="beta">Beta</h1>
<p>Nam enim sem, pulvinar sed nibh non, vestibulum suscipit dui. Vestibulum vitae sodales velit. Nam cursus, velit id semper malesuada, sem mauris iaculis diam, sit amet auctor ligula lectus in eros. Aliquam tincidunt semper odio, sit amet ornare neque tristique ut. Suspendisse placerat consequat lectus ut varius. Aliquam in ligula non massa auctor porta. Proin auctor mattis elit sit amet tincidunt. Cras auctor mauris augue, et volutpat diam iaculis vitae.</p>
<h1 id="gamma">Gamma</h1>
<p>Donec vestibulum nulla ac suscipit consectetur. Donec sit amet nisl id elit ultrices dapibus. Nunc luctus est id ante gravida fringilla. Donec lacinia elementum imperdiet. Maecenas quis nisi quis odio vestibulum volutpat. Morbi eu lacus imperdiet ex consectetur hendrerit. Aliquam ligula ligula, blandit sed aliquet in, fermentum eu magna. Fusce egestas posuere aliquet. Morbi vel mattis tellus, at ultrices ligula.</p>
</body>
6. 굵게, 이탤릭, 작게, 윗첨자, 아랫첨자, 밑줄, 취소선
아래 예시처럼 사용한다.
<body>
<h1>Lorem ipsum <b>dolor sit</b> amet</h1>
<h1>Lorem ipsum <i>dolor sit</i> amet</h1>
<h1>Lorem ipsum <small>dolor sit</small> amet</h1>
<h1>Lorem ipsum <sub>dolor sit</sub> amet</h1>
<h1>Lorem ipsum <sup>dolor sit</sup> amet</h1>
<h1>Lorem ipsum <ins>dolor sit</ins> amet</h1>
<h1>Lorem ipsum <del>dolor sit</del> amet</h1>
<hr />
Lorem ipsum <b>dolor sit</b> amet<br />
Lorem ipsum <i>dolor sit</i> amet<br />
Lorem ipsum <small>dolor sit</small> amet<br />
Lorem ipsum <sub>dolor sit</sub> amet<br />
Lorem ipsum <sup>dolor sit</sup> amet<br />
Lorem ipsum <ins>dolor sit</ins> amet<br />
Lorem ipsum <del>dolor sit</del> amet<br />
</body>
7. <ruby>, <rt>
주로 한자의 설명을 위에 작게 표시할때 사용한다.
<body>
<ruby>
<span>大韓民國</span>
<rt>대한민국</rt>
</ruby>
</body>
8. <ol>, <ul>
순서 있는 목록, 순서 없는 목록에 사용한다.
옵션
- type : 1, A, a, I, i 로 번호 매긴다.
- start : 시작 문자를 지정한다.
<body>
<h1>ol tag</h1>
<ol type="1", start="5">
<li>Facebook</li>
<li>Tweeter</li>
<li>Linked In</li>
</ol>
<h1>ul tag</h1>
<ul>
<li>Facebook</li>
<li>Tweeter</li>
<li>Linked In</li>
</ul>
</body>
9. <dl>, <dt>, <dd>
Definition List 또는 Description List로 설명형 목록 태그이다.
<body>
<dl>
<dt>HTML5</dt>
<dd>Multimedia Tag</dd>
<dd>Connectivity</dd>
<dd>Device Access</dd>
<dt>Milk</dt>
<dd>Animation</dd>
<dd>3D Transform</dd>
</dl>
</body>
10. <table>
<tr> : 행 지정
<th> : 머리 행
<td> : 데이터 행
옵션
- colspan : 묶을 열 개수 지정
- rowspan : 묶을 행 개수 지정
<body>
<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 1</td>
</tr>
<tr>
<td>Data 2</td>
<td>Data 2</td>
</tr>
</table>
</body>
다음과 같이 <caption>을 넣고 <colgropu>으로 묶어서 서식 지정하고 <thead>, <tbody>, <tfoot>으로 구분하기도 한다.
<table border="1">
<caption>Caption</caption>
<colgroup>
<col span="2" style="background: red" />
<col style="background: blue" />
</colgroup>
<thead style="background: green">
<tr>
<th>Table Header</th>
<th>Table Header</th>
<th>Table Header</th>
</tr>
</thead>
<tbody>
<tr>
<td>Table Data</td>
<td>Table Data</td>
<td>Table Data</td>
</tr>
<tr>
<td>Table Data</td>
<td>Table Data</td>
<td>Table Data</td>
</tr>
<tr>
<td>Table Data</td>
<td>Table Data</td>
<td>Table Data</td>
</tr>
</tbody>
<tfoot style="background: yellow">
<tr>
<td>Table Data</td>
<td>Table Data</td>
<td>Table Data</td>
</tr>
</tfoot>
</table>
</body>
colspan, rowspan 적용
<body>
<table border="1">
<tr>
<th colspan="3">Table Data1</th>
<th rowspan="3">Table Data2</th>
</tr>
<tr>
<td>Table Data3</td>
<td rowspan="2">Table Data4</td>
<td>Table Data5</td>
</tr>
<tr>
<td>Table Data6</td>
<td>Table Data7</td>
</tr>
</table>
</body>
11. <img>
이미지 삽입시 사용한다.
옵션
- src : 이미지 주소 지정
- alt : 이미지 설명을 입력한다. 이미지가 없을때 텍스트가 나타난다.
- width, height : 이미지 크기 지정. 단위는 px, %
<body>
<img src="Penguins.jpg" alt="펭귄" width="300" />
<img src="Nothing" alt="그림이 존재하지 않습니다." width="300" />
</body>
인터넷상 주소 입력도 가능하다.
<body>
<img src="http://via.placeholder.com/300x200" />
<img src="http://via.placeholder.com/200x150" />
<img src="http://via.placeholder.com/100x100" />
</body>
dummy 이미지 사이트 : https://placeholder.com/
12. <audio>
오디오 삽입시 사용한다.
옵션
- src : 오디오 주소 지정
- type : 어떤 타입인지 입력
Boolean 속성
- controls : 컨트롤 상자 표시
- autoplay : 웹 페이지 로딩시 자동 재생
- loop : 반복 재생
- muted : 소리 제거
<body>
<audio src="Kalimba.mp3" ></audio>
</body><body>
<audio src="Kalimba.mp3" controls autoplay></audio>
</body>
삽입한 오디오가 출력되지 않을때 다른 오디오 파일 출력하게 할 수 있다.
<body>
<audio controls="controls">
<source src="Kalimba.mp3" type="audio/mp3" />
<source src="Kalimba.ogg" type="audio/ogg" />
</audio>
</body>
13. <video>
비디오 삽입시 사용한다.
옵션
- src : 오디오 주소 지정
- type : 어떤 타입인지 지정
- poster : 썸네일 이미지 주소 지정
Boolean 속성
- controls : 컨트롤 상자 표시
- autoplay : 웹 페이지 로딩시 자동 재생
- loop : 반복 재생
- muted : 소리 제거
<body>
<video controls="controls">
<source src="Wildlife.mp4" type="video/mp4" />
<source src="Wildlife.webm" type="video/webm" />
</video>
</body>
poster 옵션 지정시 모습이다.
<body>
<video poster="http://via.placeholder.com/640x360" width="640" height="360" controls="controls">
<source src="Wildlife.mp4" type="video/mp4" />
<source src="Wildlife.webm" type="video/webm" />
</video>
</body>
<form>
사용자로부터 입력받은 정보를 서버로 전달하는 역할을 한다.
method 속성 값 중 get은 url에 정보를 담아서 전송한다. post는 url에 담지 않고 payload에 담아서 전송한다.
14. <input>
사용자 입력을 받는다.
옵션
- text : 텍스트 입력
- password : 비밀번호 입력
- file : 파일 첨부 받음
- button : 클릭할 수 있는 버튼 삽입. 기본은 submit
- checkbox : 체크박스 삽입
- hidden : 숨겨진 입력 상자
- image : 이미지 삽입
- radio : 라디오 버튼 삽입
- color : 색상 입력
- time : 시간 입력
- month : 달 입력
- week : 주 입력
- date : 날짜 입력
- datetime : 날짜 입력
- datetime-local : 시간 입력을 선택 가능
- email : 이메일 입력. 양식 맞추지 않으면 전송 불가
- number : 숫자 입력. 스마트폰에서 숫자 패드가 나타남
- range : 범위 지정
- search : 검색어 입력
- tel : 전화번호 입력
- url : URL 입력
- reset : 입력 내용 리셋
- submit : 입력한 내용을 서버로 전송
속성
- value : 서버에 넘겨줄 값 지정
- min : 숫자 입력시 최소값 지정
- max : 숫자 입력시 최대값 지정
- step : 숫자 간격
- maxlength : 텍스트 입력시 최대 길이 지정
- minlength : 텍스트 입력시 최소 길이 지정
- size : 텍스트 입력시 표시할 크기 지정
- list : 연결할 데이터 목록 지정
- placeholder : 입력 가이드 지정
Boolean 속성
- checked : 기본 선택 지정
- autofocus : 페이지 로딩시 자동 선택
- required : 반드시 입력해야 하는 항목 지정
- readonly : 읽기 전용
- disabled : 비활성화 상태로 지정
<body>
<form>
<input type="text" name="search" />
<input type="submit" />
</form>
</body>
옵션 예시2
<body>
<form>
<input type="text" name="name" /><br />
<input type="password" name="password" /><br />
<input type="file" name="file" /><br />
<input type="submit" />
</form>
</body>
옵션 예시3
<body>
<form>
<input type="text" /><br />
<input type="button" /><br />
<input type="checkbox" />정보처리기사
<input type="checkbox" />운전면허
<input type="checkbox" checked/>오라클 자격증<br />
<input type="file" /><br />
<input type="hidden" /><br />
<input type="image" /><br />
<input type="password" /><br />
<input type="radio" name="cf" />짜장면
<input type="radio" name="cf" checked/>짬뽕
<input type="radio" name="cf" />짬짜면<br />
<input type="reset" /><br />
<input type="submit" />
</form>
</body>
옵션 예시4
<body>
<form>
<input type="color" /><br />
<input type="date" /><br />
<input type="datetime" /><br />
<input type="datetime-local" /><br />
<input type="email" /><br />
<input type="month" /><br />
<input type="number" /><br />
<input type="range" /><br />
<input type="search" /><br />
<input type="tel" /><br />
<input type="time" /><br />
<input type="url" /><br />
<input type="week" />
<input type="submit">
</form>
</body>
15. <textarea>
텍스트 입력 공간이 나온다. 닫는 태그 사이에 메시지를 입력한다.
옵션
- rows : 행 개수만큼 크기를 늘림
- cols : 열 개수만큼 크기 늘림
<body>
<textarea rows="5" cols="50">TextArea Text</textarea>
</body>
16. <select>
<select> 태그 안에 <option> 태그로 항목 만들 수 있다.
옵션
- size : 세로 길이 지정
boolean 옵션
- multiple : 여러개 지정 가능
<body>
<select>
<option>김밥</option>
<option>떡볶이</option>
<option>순대</option>
<option>오뎅</option>
</select>
</body>
multiple 옵션 사용시
<body>
<select multiple="multiple">
<option>김밥</option>
<option>떡볶이</option>
<option>순대</option>
<option>오뎅</option>
</select>
</body>
17. <optgroup>
옵션 항목을 그룹지을때 사용한다.
<body>
<select>
<optgroup label="HTML5">
<option>Multimedia Tag</option>
<option>Connectivity</option>
<option>Device Access</option>
</optgroup>
<optgroup label="CSS3">
<option>Animation</option>
<option>3D Transform</option>
</optgroup>
</select>
</body>
18. <fieldset>, <legend>
여러 항목을 묶을때 사용한다.
그리고 이름을 지정한다.
<body>
<form>
<fieldset>
<legend>입력 양식</legend>
<table>
<tr>
<td><label for="name">이름</label></td>
<td><input id="name" type="text" /></td>
</tr>
<tr>
<td><label for="mail">이메일</label></td>
<td><input id="mail" type="email" /></td>
</tr>
</table>
<input type="submit" />
</fieldset>
<fieldset>
<legend>입력 양식2</legend>
</fieldset>
</form>
</body>
19. <label>
텍스트를 태그로 감쌀때 사용한다.
옵션
- for : 어떤 태그의 id를 위한 건지 지정
<body>
<form>
<label for="userName">이름</label>
<input type="text" id="userName">
<input type="text" id="title">
</form>
</body>
20. <object>
pdf 등 삽입 가능하다.
<body>
<object data="product.pdf" type="application/pdf"></object>
</body>
tag와 attribute
태그는 다음과 같이 구성되어 있다.
속성 중에 값에 상관없이 존재 유무로 기능을 수행하는 속성이 있다.
CSS
CSS 지정하는 방법은 다음 3가지가 있다.
MIME Type
Multi-perpose Internet Mail Extensions, 메일에 첨부한 콘텐트가 어떤 형식인지 상대편에게 알려주는 용도
'common mime type' 검색 참조 : https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types
조언
*
과제
1. 시맨트 태그의 목적?
2. 시맨틱 태그의 용도를 간단히 기술하시오?
조사할 태그:
header, main, footer, nav, section, article, aside
'네이버클라우드 AIaaS 개발자 양성과정 1기 > HTML & CSS' 카테고리의 다른 글
| [비트캠프] 18일차(4주차3일) - CSS(border, padding, margin, display, visibility, float, position) (0) | 2022.11.30 |
|---|---|
| [비트캠프] 17일차(4주차2일) - CSS(테두리, font, background) (0) | 2022.11.29 |
| [비트캠프] 16일차(4주차1일) - CSS(selector, 상속, specificity), HTML(input) (0) | 2022.11.28 |
| [비트캠프] 15일차(3주차5일) - 네트워킹, HTTP 요청/응답 (0) | 2022.11.25 |
| [비트캠프] 13일차(3주차3일) - HTML 개요, Data와 메모리, 2·10·16진수 (0) | 2022.11.23 |
