노마드 코더 코코아톡 클론코딩 복습용 정리(1)

~ 간단한 이론 ~

웹사이트를 만드는 데 필요한 도구는 HTML, CSS 그리고 JavaScript.
HTML이 뼈대라면 CSS는 뼈대에 붙는 근육, 즉 디자인이고 JavaScript는 동적인 부분을 담당하는 뇌라고 할 수 있다.
(참고로 이중 자바스크립트만 프로그래밍 언어임.)





#2 HTML을 배워보자.


! 주의할 점 !

파일 경로 같게 하기. 폴더명과 파일명은 소문자로.
파일명 뒤에 .html(확장자)을 쓰면 html파일을 만들 수 있음.

비주얼 스튜디오 코드의 동그라미 표시는 저장을 안 했다는 뜻. 저장을 습관화하자 ctrl+s
참고로 VSCode는 다양한 확장 프로그램을 사용할 수 있다.

태그(tag)

● h1~6 : header number1~6

● list (종류는 두가지 ① ordered list 순서가 있는 목록 ② unordered list 순서가 없는 목록)

ol : ordered list
ul : unordered list
li : list item

ctrl + d 로 동시에 텍스트 변경가능.



● a : anchor(닻), 링크를 달 때 이용

tag에 추가하는 부가적인 정보를 attributes(속성) 라고 함.
여기서 사용한 href가 바로 HTTP reference 혹은 hyperlink reference를 의미하는 속성임.
attribute 값에는 항상 큰따옴표를 사용하자. 안 그러면 나중에 성가시게 될 수 있음.

target="_self"는 링크 이동 후 뒤로 버튼을 누르면 다시 원래 페이지로 돌아오고(기본값),
target="_blank"는 링크 이동 시 새로운 탭에서 사이트가 열림.

 

 

● img : 이미지 태그는 다른 것들이랑 다르게 /로 닫아주는 태그가 없다. self-closing tag(자체 닫기 태그)이기 때문.
<img src="이미지 주소"/> 이런 식으로 사용. 여기서 src는 소스.

내 컴퓨터에 있는 이미지도 사용 가능함.
이미지 파일을 끌어와서 같은 방법으로 태그를 작성하면 됨.
예전에 만들었던 스터디 플래너 이미지를 하나 가져와 보면,

이미지 경로는 정확하게 작성할 것.

---

※ 필수 시작 코드

: 브라우저에게 이건 text 파일이 아니라 html 문서라고 알려주는 것. ★


웹사이트는 두 개의 파트로 구성되어 있다.
하나는 head(웹사이트의 환경을 설정. 외부적으로 보이지 않음.),
다른 하나는 body(사용자가 볼 수 있는 content를 보여줌.)

(예시)

▶ head

● title
● meta : 부가적인 정보 (content, name)

 

구글이 사이트에서 title과 description을 가져오는 것. (description은 google이 검색할 때 찾는 태그임.)

 

→ 이 meta 태그는 매우 중요하다. 이게 없으면 브라우저가 이해하지 못하는 특수문자 등의 글자가 사이트에서 깨져 보이게 된다. ★

오타! 한국어는 kr이 아니고 ko이다.

→ language를 넣는 이유는 구글, 네이버와 같은 검색엔진들에게 도움을 주기 위해서임.
우리 사이트에서 사용되는 주된 언어를 알려준다.

→ 이 link의 relationship은 ~

→ og: 이건 카카오톡에 공유될 때 보이는 타이틀, 이미지 등을 지정할 때 사용.



! 잠깐 !

구글에 html이나 css 혹은 javascript를 검색할 때 "mdn"이라는 키워드를 붙이는 걸 추천. 한국어 지원도 됨.
w3 schools라는 사이트는 사용하지 않는 걸 추천.



▶ body

● form

☞ 기본적인 태그 쓰는 법
<tagname attrname="attrvalue">content</tagname>

label은 input과 함께여야 작동이 된다.
label의 짝은 for
input의 짝은 id ( id는 body 안의 어떤 태그에든 넣을 수 있는 attribute이다. 고유 식별자이기 때문에 태그 하나당 하나의 id만 가질 수 있다. 그래야 css를 식별할 수 있음.) ★
id와 for에 들어가는 값은 동일해야 함.  ※ attribute 값에는 공백 X

두 군데를 동시에 입력하려면 alt 키를 누른 상태로 원하는 곳을 클릭하면 됨.

label을 클릭하면, for과 같은 값을 가진 id를 들고 있는 input을 작동시켜줌.


● div : 분할. 박스라고 생각하면 됨. ★

● header : div를 대체할 수 있다. 의미가 내포되어 있는가 없는가의 차이임. 즉, <header> = <div id="header">
main, footer도 마찬가지.

semantic 태그로 작성하려고 노력하자. 이해하기 쉬운 코드가 좋은 코드다!


● 짧은 글은 span
긴 글은 p