오늘 내가 배운 것
1. 2진수, 16진수
2. 브라우저와 HTML
3. 자주 쓰이는 태그(엘리먼트)와 속성, 속성 값
1. 2진수와 16진수
컴퓨터는 왜 2진수를 사용하는가?
컴퓨터는 전류가 흐르고, 안 흐르고 (ON/OFF)로만 표현할 수 있다. 그렇기 때문에 0과 1 로만 모든 것을 표현해야 한다.
2진수 1자리 수는 2가지(0, 1)를 표현할 수 있고, 2자리 수는 4가지(00,01,10,11) 를 표현 할 수 있다.
0과 1을 표현하는 1자리 수를 1 bit (비트)라고 하는데, 1bit가 8자리가 되면 8 bit
8bit = 1byte(바이트) = 2 nibble(니블) 이다.
1 nibble은 4bit인데 4bit는 16가지를 표현할 수 있다. 그래서 16진수의 범위와 일치한다.
16진수는 순서대로 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F 로 표기해서 쓸 수 있다.
16진수를 사용하는 이유는 16진수 자릿수 하나가 2^4를 표현할 수 있기 때문에 보기 편해서 컴퓨터, 프로그래밍 영역에서 많이 쓰인다.
EX) ff = 1111 1111
HTML / CSS 에서 16진수를 제일 많이 쓰이는 곳은 색상 코드를 표현할 때이다.
검은색을 표현하는 #000000부터 흰색을 표현하는 #ffffff까지 16진수로 정말 많은 색상을 표현할 수 있다.
ffffff = 6 nibble = 3 byte = 24 bit (나중에 nibble-byte-bit 간 변환이 쉽게 되도록 빨리 이해하고 익숙해지자!)
2. 브라우저와 HTML
HTML : Hyper Text Mark-up Language 로 마크업 언어라는 것이 핵심이다.
마크업 언어는 < > 로 쓰인 언어를 말한다.
HTML은 어디서 실행되는가?
HTML은 브라우저에서 실행되는데 기존엔 단순히 검색을 위한 도구, 인터넷 창으로 알았다면 이제는 웹사이트를 열게 해주는 도구로 이해하고 받아들이자.
브라우저는 크게 두 영역으로 주소창, URL을 적는 부분인 네트워크 영역과, 웹사이트가 보이는 부분인 렌더 영역으로 나뉠 수 있다.
VS Code를 이용해서 작성 후 라이브 서버를 이용해서 html을 열면 URL( or URI)을 적는 부분 (네트워크 영역)에
(명확하겐 URI, URL이 다르지만 일단 넘어가자)
127.0.0.1:5500/index.html
이라고 적혀있는데, 여기서 127.0.0.1 은 localhost (자기 스스로를 가리키는 IP)이고, /index.html 은 내가 만든 파일의 이름을 뜻 한다.
렌더 영역은 HTML로 작성되어 있고, HTML을 시각화해서 보여주는 곳이다.
우리가 보는 사이트의 html 코드를 다 볼 수 있게 되어 있는데
Chrome (크롬) 기준으로 렌더 영역에서 마우스 오른쪽 버튼 누르고 검사(개발자 도구) 또는F12를 눌러서 확인할 수 있다.
html을 잘하기 위해서 엘리먼트를 잘 알아야 한다. < 와 > 안에 쓰는 것을 엘리먼트(요소) 또는 태그 라고 는데
html은 기본적으로 여는 태그와 닫는 태그를 같이 써야 한다. 여는 태그는 <html> 닫는 태그는 </html> 로 사용한다.
브라우저의 탭의 이름은 <head> 안에 <title> 을 쓴 후에 작성해주면 되고, 렌더 영역을 쓸 때는 <body> 안에 작성해야 한다.
3. 일반적인 웹사이트에서 자주 쓰이는 태그(엘리먼트)와 태그의 특징, 속성, 속성 값
<h1> ~ <h6>
제목 엘리먼트
보통 로고나 홈페이지의 메인이 h1, 부제목, 카테고리 순으로 숫자가 커진다.
특징 : 숫자가 작을수록 크기가 커진다.커진다. 일반 텍스트보다 굵기가 굵어짐.
<ul>,<li>
리스트를 작성할 때 많이 쓰인다.
ul이랑 li 이는 같이 쓰이며 ul 안에 li를 작성한다.
ul의 특징은 li들을 묶어주는 역할 정도로 사용하면 된다.
<a> (앵커)
링크를 걸기 위해서 사용하는 엘리먼트
속성 href 와 같이 쓰인다.
속성을 쓸 때는 쿼리 스트링 형태 query string =“” 를 같이 사용한다.
<a href=“ ”></a> " "안의 링크가 현재 url을 바꿔 준다.
<div>, <span>
구역을 나눠서 내용을 적을 때 사용한다. 가장 기본적인, 많이 쓰이는 엘리먼트
div -> block
span ->inline
<i>
inline , span이랑 역할이 비슷하지만 글자가 기울어짐.
<button>
inline , 버튼을 만드는 가장 기본적인 엘리먼트
<input> (닫는 태그가 필요 없음.)
inline, 기본 크기가 큰 편이라 브라우저 사이즈가 작을 땐 밑으로 내려갈 수 있다.(블럭 속성이랑 헷갈리지 않기)
입력창 만들어준다. 속성은 type 을 사용할 수 있고, type 의 기본 속성 값은 text 이다
type="text" 라고 작성하며, text 대신 password, radio를 사용할 수 있다.
속성 checked 속성 값 checked -> checked=“checked”
초기 값을 선택해주는 상태 (성별을 체크하는 곳에 남자가 먼저 체크되어 있는 경우)
<img> (닫는 태그가 필요 없음.)
inline , 속성으로 src을 사용하고 경로를 지정해준다.
src="./images/logo.png" 로 사용한다.
상대 경로 내가 위치한 곳에서 원하는 곳으로 가는 경로
절대 경로 최상위 디렉토리부터 원하는 곳으로 가는 경로
<select>,<option>
inline, 예를들면, 생년월일에 선택할 때 조그맣게 뜨는 창 을 만들어준다.
HTML
<html>
<head>
<title>웹사이트</title>
</head>
<body>
<h1>제목</h1>
<h2>제목</h2>
<h3>제목</h3>
<h4>제목</h4>
<h5>제목</h5>
<h6>제목</h6>
<ul>
<li>리스트1</li>
<li>리스트2</li>
<li>리스트3</li>
</ul>
<a href="http://naver.com">링크</a>
<div> 영역 1</div>
<div> 영역 2</div>
<span>영역3</span>
<span>영역4</span>
<i>아이</i>
<i>dkdl</i>
<div>영역8</div>
<button>버튼1</button>
<button>버튼2</button>
<div>영역9</div>
<input type="text" />
<input type="password" />
<div>영역10</div>
<input type="radio" checked="checked"/> 남자
<input type="radio"/> 여자
<div>영역 11</div>
<img src="./images/background.jpg">
</body>
</html>'시작 > TIL(Today I Learned)' 카테고리의 다른 글
| 221022 네이버 회원가입 클론코딩 (0) | 2022.10.23 |
|---|---|
| 221021 CSS와 네이버 클론코딩 (0) | 2022.10.21 |
| 221017 페어코딩 (0) | 2022.10.17 |
| 221015~221016 클론코딩 - 학원 홈페이지 만들기 (1) | 2022.10.17 |
| 221014 HTML,CSS 클론코딩 (0) | 2022.10.14 |
댓글