새싹(SeSAC)에 지원하고 나서, 약 3일 정도의 사전학습 기간이 주어졌다.
이때 사실 놀란 것은 보통은 youtube나 참고 사이트를 주었던 곳들과 달리,
여기서 직접 만든 강의 프로그램을 이용한다는 것,
그리고 그 강의 선생님(ai)가 내이름을 출력한다는 게 놀라웠다.
물론 놀라기만 하면 안되고 강의는 들어야 한다.
그 안에서 내가 목표한 것은 <모든 강의 한 번 이상 수강하기>
물론 듣기만 하는 게 아니라 실제로 어느정도 이해하기까지.
Let's Start !
HTML 입문하기
00. 파일 확장명 표시하기
window10 version, 삼성 노트북 기준
확장자명을 표시하려면 내 pc > 보기 > 맨 아래의 표시 클릭 > 파일확장명을 체크하기.
01. HTML로
홈페이지 만들기
인터넷 화면 = 홈페이지를 구성하는 문서로 이뤄져 있다.
(=웹문서)
웹문서를 보는 도구 : 웹브라우저 프로그램
(ex. 인터넷 익스플로어 , chrome 등)
웹문서의 확장자 : html
따라서 웹문서 = html파일 !
1) 웹문서 만들기 (사용 도구 : 메모장)
- 웹문서는 태그(tag)로 이뤄져있으며, 태그는 <이 안에 들어가는 부분> 을 의미한다.
- 각 태그는 특정한 기능을 가지고 있다.
open tag <>
close tag </>
1-1) html 태그 사용하기
html 태그는 웹문서의 시작과 끝을 알리는 기능을 한다.
ex. <html>이라고 쓴 첫 줄은, '웹문서 시작한다'는 메세지를 컴퓨터에게 전달하는 것이다.
그렇다면 </html>이 의미하는 것은? 웹문서를 끝내겠다는 것이다.
1-2) html 태그 안에는 head 태그를 넣을 수 있다.
- head 태그는 웹문서의 각종 '정보'를 나타내기 위해 쓰인다.
- 그 중 title 태그는 문서의 제목을 나타낸다.
<html>
<head>
<title> 반갑습니다. </title>
</head>
이렇게 간단한 html 파일을 만들어 저장해본다.
저장할 파일이름은 index.html
1-3) 바탕화면에 저장된 index.html 열기
파일 내부에는 내용이 없지만, 웹브라우저의 윗부분에는 title 내용이 표시된다.
즉, title 태그는 그 문서의 제목을 정하는 기능을 한다.
1-4) head 안에 꼭 들어가야 하는 태그 : meta 태그
head 태그 안에,
<meta charset="UTF-8">이라고 쓰지 않으면 한글이 제대로 출력되지 않는 오류가 발생할 수도 있기 때문이다.
BUT, 메모장에서는 meta 태그를 쓰지 말고, 파일 저장시에 인코딩으로 UFT-8 을 선택해주면 오류가 나지 않는다.
1-5) body 태그 넣기
Head와 Body 태그의 차이
head : 웹문서의 각종 정보 기록
body : 웹문서의 실제 내용 기록
2) 닫아주지 않아도 되는 태그들
: 원래 태그는 여는 태그와 닫는 태그의 짝꿍조합인데, 그렇지 않은 특이 케이스들이 있다.
<br> : 개행
<img> : 이미지
<meta> : 메타
<link> : 링크
<input> : 인풋
<hr> : 문단 가로 나누기
가끔 닫는 태그를 안썼는데도 잘 작동하는 이유?
HTML 이 문법 오류에 관대한 편이기 때문이다.
(태그를 닫지 않았거나 오타가 조금 있어도 웹브라우저가 어느정도 임의로 해석하여 출력)
BUT 의도와 달라질 수 있으므로 문법을 잘 지키면서 하자.
3) 태그를 쓸 때는 대소문자 구별이 없다 XXX
그러나 HTML 표준은 소문자 권장
4) 주석 쓰기
화면에 표시되지 않고, 코드 실행에도 영향을 주지 않는 것이 주석이다.
그렇다면 주석을 쓰는 이유는 무엇일까?
코드를 읽는 사람을 위해 쓰는 것이다.
= 코드가 길고 복잡한 경우 한 눈에 알아보기 어려우므로, 어떤 의도로 코드를 쓴 것인지 설명을 돕는 것이다.
HTML은 주석을 <!-- --> 로 감싸는 방식을 사용한다.
* NotePad 라는 에디터에서는 단축키 ctrl + Q를 사용하여 주석을 달 수 있다.
* VSCode에서는 Ctrl + / 를 사용한다.
5) 태그의 속성
태그를 있는 그대로 사용할 수도 있으나, <p></p>
태그 안에 내용을 적을 수도 있으며, <p>안녕하세요</p>
태그마다의 속성을 부여할 수 있다. <p align="center">안녕하세요</p>
태그는 몸통이며, 속성(attribute)은 세부 설정이라고 생각하면 된다.
02. 들여쓰기
1) 내가 작성한 내용을 보기 편하게 만들기 위한 것이다.
2) 태그의 꼬임 방지
ex. 수학식에서의 소괄호() 중괄호{} 대괄호[]의 경우,
[1+{2+(3+4)}] 이렇게 사용해야 한다.
그러나 [{]()} 이렇게 사용한다면 순서가 꼬인 것이다.
즉, 태그 또한 A라는 태그를 열고 B 태그를 열었다면, B 태그를 닫기 전까지 A태그는 닫으면 안되는 것이다.
3) 들여쓰는 방법
어떤 태그 <b>가 다른 태그 <A>에 들어간다고 하자.
이때 바깥에 있는 <A> 태그를 '부모 태그', 안에 있는 <b> 태그를 '자식 태그'라 하며
자식 태그인 <b>는 부모 태그보다 한 단계 더 '들여서' 써준다.
부모 태그 : parent
자식 태그 : child or children
형제 태그 : sibling
방법
1-1) 스페이스바 로 한 칸 씩 띄어주기
1-2) tab 키를 사용하여 적당한 공간 띄어주기
두 가지 중에서 사용가능하다.
Q. 자식태그 계산법
<html>
<head> <title></title> </head>
<body> </body>
</html>
이렇게 있다면 html의 자식태그는 head 와 body 태그 '두 개'이며,
title은 head의 자식태그이다.
또한 head와 body 태그는 서로 형제 태그이다.
또한 html 태그는 </html> 하나로 끝나므로 어떠한 경우에도 형제 태그를 가질 수 없다.
내가 강의를 틀고 있었을 때 카페 사람들이 화면을 쳐다보고 간것 같다.
(ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ)
AI선생님이 강의해주는 것은 나도 처음이라 신기하기도 하고,
그걸 프론트엔드로 만들었다고 하니 더 열심히 배우고 싶었다.
선생님 역할 성우분의 목소리는 클로바 더빙을 사용한 것 같다.
나머지는 다음시간에!