Blinking Hello Kitty Angel

HTML

내가 몰랐던 거 정리하기

xoouxa 2023. 3. 16. 22:47

“ 지연되는 프로젝트에 인력을 더 투입하면 오히려 더 늦어진다. ”

- Frederick Philips Brooks
Mythical Man-Month 저자
728x90

오늘은 제가 잘 몰랐던 것들에 대해 정리하도록 하겠습니다.

 

1. 텍스트 관련 요소 - 물리적(Physical) 태그

 

텍스트가 화면에 출력되는 형식을 지정하는 태그

소스 설명 화면출력
<i>텍스트</i> 기울임 글꼴(Italics) 텍스트
<b>텍스트</b> 굵은 글꼴(Bold) 텍스트
<tt>텍스트</tt> 타자기 글꼴(Teletype) 텍스트
<u>텍스트</u> 밑줄친 글꼴(Underline) 텍스트
<s>텍스트</s> 취소선(Strikethrough) 텍스트
<strike>텍스트</strike> 취소선(Strikethrough) 텍스트
<sub>텍스트</sub> 아래첨자(Subscript) 텍스트
<sup>텍스트</sup> 위첨자(Superscript) 텍스트
<big>텍스트</big> 크게, Bigger font (one size bigger) 텍스트
<small>텍스트</small> 작게, Smaller font (one size smaller) 텍스트

물리적 태그중에서 많이 쓰이는 태그는 <b>, <u> 정도가 있습니다.

👆🏻 물리적 태그는 태그 자체의 의미는 가지지 않고 단순히 화면에 표시되는 형태만을 결정합니다.

 

2. 논리적(Logical) 태그

 

물리적 태그가 텍스트가 화면에 어떻게 출력될것인가를 결정하는 반면

👆🏻 논리적 태그는 화면에 출력되는 형식보다는 태그 자체가 의미를 가지고 있는 태그입니다.

 

소스 설명 화면출력
<abbr>텍스트</abbr> Abbreviation (for example, Mr.) 텍스트
<acronym>텍스트</acronym> Acronym (for example, WWW) 텍스트
<cite>텍스트</cite> 인용(Citation) 텍스트
<code>텍스트</code> 코드(Code listing) 텍스트
<dfn>텍스트</dfn> Definition 텍스트
<em>텍스트</em> 강조(Emphasis) 텍스트
<kbd>텍스트</kbd> Keystrokes 텍스트
<q>텍스트</q> Inline quotation 텍스트
<samp>텍스트</samp> Sample text (example) 텍스트
<strong>텍스트</strong> 강한 강조(Strong emphasis) 텍스트
<var>텍스트</var> 변수(Programming variable) 텍스트

화면 출력 부분을 보시면 기울임 글꼴이나 굵은 글꼴 외에 특별한 형태로 출력되는 것은 없습니다.

 단지 이 텍스트가 어떤 성격인지 규정하는 역할을 합니다.

 

HTML을 처음 배울 때 CSS를 모르는 상태이기 때문에 논리적 태그보다 물리적 태그를 더 많이 사용합니다.

그러나 HTML 태그의 성격은 화면에 출력하는 형태를 규정한다기보단 🙌텍스트의 의미🙌를 중시합니다.

예를들면 <b> 태그 <strong> 태그 둘다 화면에서는 굵은 텍스트로 표시됩니다.

그러나 이 두가지 태그는 그 의미가 다릅니다.

 

✔ <b> 태그는 bold의 약자로 단순히 텍스트를 굵게 표시하라는 의미를 가지고,

<strong> 태그는 강조의 의미를 가집니다. 
태그로 둘러싸인 텍스트가 중요하다는 의미입니다. ✔

 

 

✨ 결론 ! 

물리적 태그는 태그 자체의 의미는 가지지 않고 단순히 화면에 표시되는 형태만을 결정합니다.

논리적 태그는 화면에 출력되는 형식보다는 태그 자체가 의미를 가지고 있는 태그입니다.

의미있는 HTML문서를 만들기 위해서는 물리적태그(태그) 보다는 논리적 태그(태그)를 중점적

으로 사용해야 합니다. 

 

3. 비트연산자

비트 연산자는 이진수로 표현된 숫자에 대해 수행되는 연산자 입니다.

이진수는 0과 1로 이뤄진 수 체계를 의미합니다.

 

비트 연산자의 종류

AND (&) 연산자 두 비트가 모두 1이면 결과는 1, 그렇지 않으면 0
1 | 3의 경우
1의 2진수는 0001, 3의 2진수는 0011입니다.
0001 | 0011 = 0001 , 2의 0승인 1이 나옵니다.
OR(|) 연산자 두 비트 중 하나 이상이 1이면 결과는 1, 둘 다 0이면 0
1 | 3의 경우
1의 2진수는 0001, 3의 2진수는 0011입니다.
0001 | 0011 = 0011 , 2의 1승인 2가 나옵니다.
XOR(^) 연산자 두 비트가 서로 다르면 결과는 1, 같으면 0
1 | 3의 경우
1의 2진수는 0001, 3의 2진수는 0011입니다.
0001 | 0011 = 1110 , 2의 3승인 2+4+6 = 12가 나옵니다.
NOT(~) 연산자 비트를 반전 시킴. (1은 0, 0은 1)
1 | 3의 경우
1의 2진수는 0001, 3의 2진수는 0011입니다.
0001 | 0011 을 반전시키면 1110 | 1100 입니다.
Lest shift(<<) 연산자 비트를 왼쪽으로 이동. 오른쪽에 0이 추가, 왼쪽 비트 제거
1 | 3의 경우
1의 2진수는 0001, 3의 2진수는 0011입니다.
0001 | 0011 = 0010 | 0110이 됩니다.
Right shift(>>) 연산자 비트를 오른쪽으로 이동, 왼쪽에 0추가, 오른쪽 비트 제거
1 | 3의 경우
1의 2진수는 0001, 3의 2진수는 0011입니다.
0001 | 0011 = 0000 | 0001이 됩니다.