[3일차] Interface, HTML(form/select), 2진수, RGB, CSS

20220721(목)

 

• 학습목표
  1) 입력 인터페이스의 활용 (input/button/textarea/select) 어떤 것들이 있는지 알아보고 활용해보기
  2) CSS의 개념, Selector의 개념과 활용
  
  
• 목차
  - HTML form의 기능
  - 2진수, 16진수
  - RGB
  - CSS

---

🤷‍♀️ 단어 공부

하드웨어 Interface ➡ 소프트웨어 Interface ➡ Human & Computer : GUI(UI) - UX - 초개인화

• Interface : 접점 
  ➡ 서로 다른 하드웨어가 연결되어 작동하기 위한 공통적이고 규격화된 하드웨어 스펙
  ex) usb(공통된 신호 규약 존재), 고속도로 톨게이트
  
  
• API (Application Programming Interface)
  ➡ 고유한 기능을 가진 모든 소프트웨어
  cf) 로그인 API 갖다 쓰세요~st의 말을 많이 함
  
  🔔 API 탄생 배경
  ex. 로그인 모듈(s/w) 만듦 ➡ 유명해져서 난리가 남 ➡ 그냥 쓰면 됨
        최초로 만든 사람 입장에서는 만든 모듈을 잘 쓰기 위해서 각 기능이 뭔지 알려줘야 함
        그러려면 공통적이고 규격화된 소프트웨어 스펙을 정해야 하는데 어?
        야 하드웨어에서 공통/규격화된/ hw spec을 인터페이스라고 하는데? 그냥 가져오자~ 엥 그럼 겹치잖아!!
  
  
• Win32 API (Windows 32bit Application Programming Interface)
  ➡ Windows가 프로그래머들을 위해서 제공해주는 소스코드들
   
• GUI (Graphic User Interface) : 그래픽 사용자 인터페이스
  ➡ 기계와 인간이 상호작용을 하기 위해 기능을 알기 쉬운 아이콘 따위의 그래픽으로 나타낸 것
  *Graphic인 게 너무 뻔해서 Graphic을 생략하고 UI라고도 쓰인다.
  
  
• UX (User EXperience) : 사용자 경험
  개인화 : 개인의 성향과 경험에 따른 UI의 변경 ➡ 사실은 그룹화와 패턴화임!
  ➕ AI 기능이 추가되어 초개인화가 됨 (FaceBook, Instagram)

---

• 입력 양식 태그 및 속성

<label>	<input> 등의 태그 포함하여 라벨링 수행 라벨링 : 스크린 리딩(소리로 읽음)이나 클릭이 어려운 사용자 지원 for attribute을 통해 id를 매개로 연결
<textarea>	a multi-line text input control / Text 에디터 <p contenteditable>도 사용
<select> & <option value = "@">@</option>	create a drop-down list list item은 option 태그로 추가
<optgroup>	p related options in a <select> element drop-down list 안에서 그룹 나누기
<input type ~ id = " ">	모든 태그에 다 붙일 수 있음. 파일 하나에서 인식할 수 있는 식별자
<input type ~ placeholder = " ">	미리보기 키워드 삽입

 

• Key - Value 형태
  - Key : id (종류) ➡ name 속성에 삽입 : 전달해야 할 정보에는 반드시 name을 넣어주자!!
  - Value : dorothy (개별 값)
  
  
• button vs submit 차이
  - submit으로 하면 버튼뿐만 아니라 전송 기능까지 추가하여 날린다.
  - button은 그냥 버튼만 만드는 것임
  
  
• div : 구역을 나눈다. 정보를 자르는 데 사용하는 태그
  화면을 자른 게 아니야! 정보를 자른 거야. ➡ 요즘엔 디자인적인 요소로 많이 쓰인다.(추후 재등장 예정)

---

< 2진수를 알아보자^_^ >

  10진수 : 10개의 수로 표현
                 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 / 9를 넘어가면 1을 붙여서 10부터 시작함

  8진수 : 8개의 수로 표현

               0, 1, 2, 3, 4, 5, 6, 7 / 7를 넘어가면 1을 붙여서 7 다음이 10으로 간다. 

  ex) 8진수 20은 10진수 16이다.

 

  16진수 : 16개의 수로 표현
                0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F

                10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 1A, 1B, 1C, 1D, 1E, 1F

 

  2진수 : 2개의 수로 표현
              0, 1 / 계속 넘어가면서 증가하는 방식이다. / 1 byte(8bit) 단위로 표현된다.   0000 0000 ~ 1111 1111
              0, 1, 10, 11, 100, 101, 110, 111, 1000, 1001, 1010, 1011

ex) 2진수 계산 팁
      14 + 7 = 21

      1110 + 111 = 10101

      2진수가 계산하기가 쉬워서 컴퓨터는 2진수를 쓴다!
      컴퓨터는 2진수를 저장할 수 있는 저장공간이 꼭 필요하다. 8개의 bit 저장할 수 있는 공간으로 만들었습니다.
      1 byte = 8 bit

2의 7승	2의 6승	2의 5승	2의 4승	2의 3승	2의 2승	2의 1승	2의 0승
128	64	32	16	8	4	2	1
0	0	1	0	1	1	0	0

2진수 0010 1100 계산은 어떻게? ➡ 2의 2승 4 + 2의 3승 8 + 2의 5승 64 

 

• 16진수는 4bit로 표현할 수 있음
  ➡ 왜? 0000~1111까지는 딱 16개로 0~F 표현이 가능함! 오! 이제 RGB로 넘어가 보자~

---

< RGB를 알아보자 >

• RGB 값을 각각 한 바이트씩 할당해줌 (2진수 ➡ 16진수로 표현)
  Red               Green             Blue
  8bit                 8bit                 8bit       
  0000 0000 ➡ 0~F/0~F ➡ 00 ~ FF
  
  ex) RGB : FF(Red자리) FE(Green자리) 0C(Blue자리)로 표현 가능
  
  
• MSB와 LSB가 뭐야?
  - MSB  Most Significant Bit의 약자로 어떠한 데이터 형의 최상위 Bit
  - LSB  Least Significant Bit의 약자로 하나의 데이터 형에서의 가장 낮은 위치의 Bit

출처 :&nbsp;https://blog.naver.com/ansdbtls4067/220886567257

 

---

✨ 알짜 상식 알아두기!

1byte *1024 ➡ 1kbyte *1024 ➡ 1mbyte *1024 ➡ 1gbyte
컴퓨터 메모리는 byte 단위로 정보를 저장한다!

 

  [대과거]

   6byte : 저장(읽어서 cpu에 보내려면)을 1바이트씩 6번 하는 거다. / 읽고 넘기고 읽고 넘기는 미친 짓,,

   너무 오래 걸려~~~ 4byte(32bit)씩 읽자~ 2번 만에 끝낼 수 있음.

 

  [과거]

   그렇게 만들어진 것이 바로 ➡ 32bit Architecture 80386~80586 (=x86 system) 

   가 발전하면서 펜티엄이 된다 ➡ core가 된다.

   x86 cpu를 의미함.(=32bit) x32라고 쓰이진 않는다.

   야 요즘엔 데이터가 많아서 32비트도 적어~

 

  [현재]

   요즘은 다 x64 system (=64bit)로 발전했다.

 

   *아키텍처 : 컴퓨터 시스템의 하드웨어 구조

---

 

✔ 바이트 : 메모리가 다 바이트 단위로 이루어져 있기 때문에 중요함
    8비트 I/O(Input, Output)은 너무 비효율적임
    32비트 I/O로 처리하다가 현재는 64비트로 처리하고 있다. 
    8비트에서 표현 가능한 가짓수는 2의 8승, 즉 256가지이다.(0~255)

✔ 응용
     1) 기본 데이터의 크기가 4바이트(32비트)
     2) RGB도 4바이트 / 좋은 건 투명도로 남은 바이트를 사용함

✔ Byte Ordering : 데이터가 저장되는 순서

    - Big-Endian 빅-엔디안

      순차적으로 데이터 저장, 연산속도 느림, 높은 비트열 먼저 비교

    - Little-Endian 리틀-엔디안 공부해보기

      역순으로 데이터 저장, 바이트 순서가 뒤집어져 있음, 낮은 비트열 먼저 들어와서 연산 바로 가능

 

---

< 예제 연습 >

    <form>

        <label>ID : <input type="text"></label><br>

        <label>PW : <input type="password"></label>

        <br><br>

        <textarea cols="30" rows="10"></textarea>

        <br>

        <label for="name">What's you name?</label>

        <select id="name">

            <option value="양지원">양지원</option>

            <option value="지원이">지원이</option>

            <option value="도로시">도로시</option>

        </select>

    </form>

* button 만드는 태그 input 태그 사용하는 방법도 익히자!

    <form method="get">

        <label>아이디 <input type="text" name="user_id"></label><br>

        <label>패스워드 <input type="password" name="user_pw"></label><br>

        <input type="checkbox" name="keep">로그인 유지<br>

        &nbsp;&nbsp;&nbsp;&nbsp;<input type="button" value="로그인">

    </form>

 

✨ html 공백 : &nbsp

     nbsp는 'Non-breaking Space'의 약자이다.

     HTML에서 여러 개의 공백을 표현하고 싶다면

     표현하고자 하는 공백의 개수만큼&nbsp; 를 추가해 주면 된다.

     출처: https://hianna.tistory.com/299 [어제 오늘 내일:티스토리]

---

< CSS: Cascading 위에서 아래로 흐르는 Style Sheets >

• html5의 기능
  정보 HTML / 디자인 CSS / 제어 Javascript
  
  
• 정의
  HTML의 디자인(스타일)을 꾸미기 위한 프로그래밍 언어
  
  HTML에서 디자인과 Element (contents + tag)의 분리
  독립적인 디자인 요소 제공 ➡ 정보의 간결성, 유지보수성 극대화
  
  상위 태그에서 적용한 속성이 하위 태그에 그대로 상속 : Cascading
  모든 CSS속성이 상속되는 것은 아님
  
  
• CSS 디자인 언어 2가지로 구분 가능
  1. Selector 선택자 "너" 
  2. Style-Attribute 스타일 속성 "변해라"
  
  
• 적용방법
  - 외부 CSS  : 외부 파일로 작성하여작성하여 사용, 가장 일반적인 방식
  - 내부 CSS  : html 파일 내부 <header>에 style태그를 넣어서 사용
  - 인라인 CSS   : 태그에 넣어서 사용(속성 넣듯이 꾸역꾸역 넣는 그지 같은 방법!^^)
  
  
• CSS 선택자
   Selector          { color  :                  red; }
  선택자             {스타일 속성 :         스타일 값;}

전체 선택자	모든 웹페이지의 Element를 선택   * { color  : red; }
태그 선택자	특정한 태그를 선택   h1 { color : red; }   p { color : blue; } 여러 태그를 같이 선택 할 수 있다. (컴마로 연결!)   h1, p {     color : red;     margin : 0;      }
아이디 선택자 #	특정 id에 해당하는 Element 선택 가급적 같은 id를 쓰지 않는것을 권장 (적용은 되나 JS에서 문제가 생김) body에도 id 부여하면 스타일 변경 가능! #mt1, #st1 {   width: 800px;     margin: 0 auto; } ➡ BUT! id로 css 작업하는 경우, 실수할 가능성이 높아 가급적 안하는 것이 좋다!
클래스 선택자 .	*클래스 생성방법 : 각 태그 안에 class 속성 값 넣어 지정 특정 클래스에 해당하는 Element 선택 (앞에 온점 넣기!) .a { background : red; }

 

• RGB 색 따오기
  1. 그림판에서 RGB 값 구하기 ex) 29, 29, 31
  2. 계산기에서 16진수 변환한 값 구하기 ex) 1D1D1F
  3. 변환 값
  
  
• 참고 링크
  https://dorothy-yang.tistory.com/entry/CSS-CSS-
  

[CSS] CSS 강의정리_by생활코딩

---

• 후기
  수학과 이론 비중이 많았던 하루.. 정신없이 흘러갔다.
  2진수는 그렇다 치고 16진수랑 더 친해져야겠다. 할 수 있어!