Day 1(211220) - HTML 기초

김성호·2021년 12월 20일

목표: HTML을 정확히 알다.
*수업시간 동안 듀얼모니터를 활용하는 습관을 들인다.

프로그래밍 공부를 위한 기본 환경 설정과 HTML 기초 중에서 구성 요소와 자주 쓰는 elments를 배웠다.

0. Front와 Back이 있다.

0.1 Front

HTML, CSS, Javscript 등이 있는데 디자인.

0.2 Back

1. 브라우저

브라우저마다 랜더링 방식이 조금씩 다르다.
브라우저 간에 지속성을 유지하기 위해 웹 표준을 준수한다.

1.1 네트워크

해당주소의 화면을 랜더링한다.

1.2 랜더링

HTML, CSS, Javascript 영역을 각각 해석해서 표시한다.

1.3 개발자 도구

F12(크롬 브라우저)버튼으로 실행한다.
마우스 커서를 움직여 가리키는 부분이 어떤 코드로 구성되어 있는지 알 수 있다.

2. Visual Studio Code

메모장 기능을 강화해서 꼬리태그(</>)를 자동으로 완성해주는 등 코드 작성을 쉽게 할 수 있도록 도와준다.
*코드는 텍스트를 쓸 수 있는 곳 어디서든지 작성이 가능하고, 실행할 수 있다.

3. HTML

Hyper Text Markup Language

HTML과 같은 트리구조의 코드는 tab키를 사용해서 들여쓴다.

< >가 존재함.

Markup은 < >를 말한다.

< 내용 > : <열고> 내용 </닫고>

데이터를 구분해서 저장하기 위해 쓰인다.

발음법 > <html> : 에이치티엠엘 엘리먼트

필수 엘리먼트 : <head> 와 <body>

<head>안에서 정보를 저장하거나 끌어오는 내용을, <body>에서는 보여줄 내용을 적는다.
*<body>영역 안에서 사용하는 엘리먼트를 많이 아는 것이 html을 잘하는 것이다.
해석순서 : 코드도 책 읽는 것마냥 왼쪽에서 오른쪽으로, 위에서 아래로 읽는데 공간이 다 차면 내려서 표시한다.

3.1 대표적인 elements

        - <h1> : 제목을 작성한다. 
  	- <h1>부터<h6>까지 숫자가 커질수록 작은 굵기와 크기로 표시된다.
    
	- <ul>와 <li> : 리스트를 작성한다.
    
	- <a> : 이동할 수 있는 링크를 달아준다. 
    
	- <div> : divison, 영역을 구분한다.
    
	- <span> : inline 속성, 글자 만큼, 안에 있는 영역만큼만 구분한다.

3.2 Block/ Inline 속성의 특징

3.2.1 Block 속성

화면에서 한 줄을 차지한다. 코드 행 전체
e.g. <div> : block 속성을 갖고 있기 때문에, 한 줄을 차지한다.

3.2.2 Inline 속성

옆에 공간이 있으면 붙는다. 자신의 content 만큼
e.g. <span> : 글자, 안에 있는 영역만큼만 차지한다.

3.3 속성값

- <a> 엘리먼트에는 href 라는 속성값이 존재한다.
          	e.g. <a href="">
- <input>는 속성값이 정말 많다.
- <input>는 Inline 속성이다. 
          닫는 태그(</>)가 없어도 실행된다.
          
 <input type="id">
 <엘리먼트 속성="속성값"> 
= : queryString(볃교String)이라고 부른다.

href가 링크를 거는 속성값이고, ""안에 들어가는 값이 링크 이동값이다.

<a href="http://google.com">구글로 이동</a>
구글로 이동

3.4 input element

다양하게 쓰이는 <input />의 여러가지 속성값을 배웠다.

3.4.1 text, placeholder

<input type="text" placeholder="아이디를 입력해주세요.">

3.4.2 password

<input type="password" placeholder="패스워드를 입력해주세요.">

3.4.3 button

<input type="button" value="login">
<button>이 따로 있고, 주로 쓰인다.

3.4.4 submit, value

<input="submit" value="로그인 제출">

3.4.5 name, id, checked

name속성값으로 그룹핑해준다.
id속성값은 <label for" "> ""안과 같게 써 내용을 클릭해도 <input>으로 접근하기 쉽게 해준다.
checked 속성값은 해당 내용이 첫 화면에서부터 체크가 되있도록 설정한다.
아래는 radio type을 이용한 예시
```
<input type="radio" name="gender" id="men" checked="checked" /> <label for="men">남자</label>

	<input type="radio" name="gender" id="men" /> <label for="women">여자</label>
```
남자
여자

3.4.6 checkbox

여러가지를 고르거나 할 때 쓴다.
```
<input type="checkbox">컴퓨터
<input type="checkbox">영화
<input type="checkbox">독서
<input type="checkbox">운동
<input type="checkbox">잠
```
컴퓨터
영화
독서
운동
잠

3.5 label

<radio>에서 텍스트만 눌러도 체크하게 해준다. 눈이 불편한 사람들은 text reader같은 프로그램을 이용해서 내용 파악을 하기 때문에 이런 기능을 활용해주는 게 좋다.

W3C 표준 개발 기구

HTML 실시간 규정

이전에는 표준이 없어서 브라우저마다 열 수 있는 문서가 달랐는데, 이 문제를 해결했다.

4. 오늘 배움

<html>
<head>
    <title>타이틀</title>
</head>
<body>
  Hello, world!
  ingoo
  
  <h1>제목1</h1>
  <h2>제목2</h2>
  <h3>제목3</h3>
  <h4>제목4</h4>
  <h5>제목5</h5>
  <h6>제목6</h6>

  <ul>
      <li>리스트1</li>
      <li>리스트2</li>
      <li>리스트3</li>
      <li>리스트4</li>
  </ul>

  <a href="http://naver.com">링크</a>


  <a href="http://google.com">구글로이동</a>

  <div>영역</div>

  <span>작은영역</span>
  <span>작은영역2</span>
  <div>영역2</div>

  <input type="text" placeholder="아이디를 입력해주세요." />

  <input type="password" placeholder="패스워드를 입력해주세요."/>
  
  <input type="button" value="로그인"/>
  <button>로그인</button>
  <!-- <button>엘리먼트로 만드는 방법을 주로 씀. -->
  
  <input type="submit" value="로그인 제출" />

  <input type="radio" name="gender" id="men" checked="checked" /> <label for="men">남자</label>
  <input type="radio" name="gender" id="women" /> <label for="women">여자</label>
  <!-- name속성값으로 그룹화해준다. (radio박스를 gender라는 이름으로 그룹화하겠다.) 
       다른 그룹을 여러 개 만들어 이해해보자. -->
  <!-- 웹 접근성 : html 태그를 text reader로 읽어냄.-->
  <!-- label element를 사용 -->
 
  <!-- checkbox 여러가지 선택(취미 등) -->
  <input type="checkbox" > 컴퓨터
  <input type="checkbox" > 영화
  <input type="checkbox" > 독서
  <input type="checkbox" > 운동
  <input type="checkbox" > 잠


</body>
</html>

김성호

다음 포스트