공부를 새로이 마음다잡고 하고 싶어 새로운 과정의 수업에 수강하게 되었다!

입문자 수업이라고는 했지만, 수업 진행 속도과 꽤나 빠른 것 같다고 느꼈다.
HTML이 벌써 끝났다. 허허

🐾HTML

HTML 은 Hyper Text Markup Language 약어로
HyperText (웹 페이지에서 다른 페이지로 이동할 수 있도록 하는 것)이다.

쉽게 생각하자면, 뼈대라고 볼 수 있다.

HTML 문서인 웹 페이지는 head 영역과 body 영역으로 구성된다.
보통 head영역에는 style적으로 사용된다. <css, js 링크를 걸어둠>
body는 페이지를 구성하기위해 글을 작성하는 영역이라고 볼 수 있다.

👣 tag 종류

< p > 란,

paragraph의 약자로, 하나의 문단을 만들 때 쓰인다.
문단 문단을 나눌 때 유용하게 쓰임! 마지막 문장이 종료되면 그 다음 단락과의 틈이 있음!
*문단기능

< h > 란,

제목을 작성할 때 사용하는 태그로, < h1 > ~ < h6 >으로 이루어져있다.

< ul > 란,

ul은 unordered list의 약자이다.
순서가 필요없는 리스트를 뜻하는 태그이다.

보통 < ul >은 < li >와 함께 쓴다.

< ol > 란,

ol은 ordered list의 약자이다.
순서가 있는 리스트를 뜻하는 태그이다.
여러 타입을 활용하여 순서가 있는 리스트를 표시한다.

• 1 : 숫자 1, 2, 3, ...

• A : 알파벳 대문자 A, B, C, ...

• a : 알파벳 소문자 a, b, c, ...

• i : 로마기호 소문자 i, ii, iii, ...

• I : 로마기호 대문자 I, II, III, ...

ol type 설정을 따로 안하면 넘버타입으로 작성이 된다.

< li > 란,

li는 list의 약자로, 목록을 만드는 태그이다.
이 태그는 단독으로 쓰이지 않으며 < ul > 혹은 < ol > 태그 내부에 들어간다.

< b > 란,

b는 bold의 약자이다.
특정 텍스트에 글씨를 굵게 표기하기위해 사용한다.

< strong > 란,

strong는 단순 강조보다는 중요한 텍스트에 사용한다.

< i > 란,

i는 italic의 약자로 기울림꼴이다.
특정 텍스트에 글씨를 기울리게 사용한다.

< em > 란,

em은 emphasize의 약자이다. 이것도 기울림꼴이다.
강조하고 싶은 텍스트에 사용한다.

이렇게 시각적인 면에서는 차이가 없는 것을 볼 수가 있다.

그렇다면 무슨 차이가 있는 것일까!

< b >,< i >는 웹브라우저서만 굵고 기울림이 보이는 것.이며
[< strong >,< em >은 웹브라우저 뿐만 아니라 다른 음성 읽기 도구에서도 강조해서 읽어준다는 차이가 있다!]

< img > 란,

이미지삽입을 위한 태그이다.
<img src="" alt="">으로 사용한다. 한 태그당 하나의 이미지를 넣을 수 있다.
src는 이미지의 경로를 적어주는 것이고, alt는 이미지를 설명해주는 대체 텍스트를 적어주는 것이다.

< input > 란,

form의 요소중 하나. 사용자가 정보를 입력하는 부분을 만들어야 할 때 사용한다.
type에 따라 어떤 형식으로 정보를 받을지 결정된다. id 값을 통해 서로 구분할 수도 있다.

✏️input type 속성
text => 한 줄짜리 텍스트를 입력할 수 있는 텍스트 상자

<input type="text" value="write email or phone number" size="10" maxlength="5" />

tel => 전화번호 입력 필드

<input type="tel" />

url => url 주소 입력 필드

<input type="url" />

email => 메일주소 입력 필드 '@'가 들어간 이메일 형식인지 검사해준다.

<input type="email" id="useremail" name="useremail" />

password => 비밀번호 입력 필드

<input name="password" required type="password" placeholder="Password" />

range => 숫자 범위를 조절할 수 있는 슬라이드 막대/ min 과 max로 범위를 지정하고 step 으로 증가 값을 세팅할 수 있다.

<input type="range" id="volume" name="volume" min="0" max="11" />

checkbox => 체크박스 (2개이상 선택 가능)

<input type="checkbox" id="cookie" name="cookie" checked>
<label for="cookie">Cookie</label>

radio => 라디오 버튼 (1개만 선택 가능)

<input type="radio" id="apple" name="drone" value="apple" checked>
<label for="huey">Apple</label>

date => 사용자 지역을 기준으로 한 날짜(연, 월, 일)

<input type="date" id="start" name="trip-start" value="2018-07-22" min="2018-01-01" max="2018-12-31">

file => 파일을 첨부할 수 있는 버튼 (accept를 사용해 제출 가능한 파일 양식을 지정할 수도 있다.)

<input type="file" accept=".doc,.docx" />

submit => 서버전송 버튼

<input type="submit" value="Log In" />

reset =>리셋 버튼 사용자가 입력한 모든 정보를 지울 수 있다. 해당 Form에 입력했던 내용들을 처음부터 입력하고 싶을 때 활용함.

<input type="reset" />

< textarea > 란,

여러 줄의 텍스트를 입력하는 창을 만든다.

< select > 란,

select form 생성

< option > 란,

option 생성

1,2일차 수업에 이렇게 HTML를 배웠다고 볼 수 있다.
진도는 빠르게 나갔지만, 기본적인 html의 내용은 거즘 다 배운 것 같다.
아는 내용을 한번 더 복습한다는 느낌으로 수업에 임했지만, 너무 기초적인 부분이라 배운지 오래되어 오히려 낯설게 느껴지기도 했다.

기초를 잘 다져놔야 탄탄히 자랄 수 있다는 걸 알기에
이번에도 집중해서 배웠고 앞으로도 집중해서 들으려고 할 것이다!
화이또,,띠로리,,