Ch3. 무작정 시작하기
html 파일에서 ! 입력 후 엔터키를 누르면 자동으로 코드가 생성된다고 설명했다. 각 태그의 역할에 대해 알아보자.
- 제일 위의 DOCTYPE(=DTD)은 문서의 HTML 버전을 지정해주는 코드이다. <!DOCTYPE html> 은 가장 최신인 HTML5을 의미한다.
- html 태그는 쌍으로 이루어져 있음을 볼 수 있다. 여기서 처음에 나오는 <html>은 시작 태그, </html>은 종료 태그이며 문서의 범위를 브라우저에게 알려주는 역할을 한다.
- head 태그는 문서의 정보를 나타내는 범위로, 웹페이지의 보이지 않는 정보를 작성하는 범위이다.
- body 태그는 문서의 구조를 나타내는 범위로, 웹페이지의 보여지는 구조를 작성하는 범위이다.
- TITLE 태그는 HTML 문서의 제목을 탭에 표시한다.
- meta는 HTML 문서의 제작자, 내용, 키워드 같은 나머지 여러 정보를 검색엔진이나 브라우저에게 제공한다.
- meta charset 은 문자 인코딩 방식을, name은 정보의 종류, content는 정보의 값을 나타낸다.
index.html 파일의 body 태그에 간단하게 입력해보자. (이때 div를 입력하고 Tab키를 누르면 자동으로 태그가 생성된다.) 그리고 main.css 파일 생성 후 적당히 스타일을 설정해준다.
다시 html 파일로 돌아와서 head 태그의 마지막 줄에 link 태그 생성 후 ./main.css 를 입력해주면 이렇게 body 태그에 입력했던 글자의 스타일이 바뀐다.
이때 언어가 영어로 되어있으므로 크롬에서는 오른쪽에 번역의사를 물어보는 창이 뜬다. html 태그안의 lang을 ko로 변경해주면 뜨지 않으므로 참고하기!
link 태그에서 rel은 가져올 문서와 관계, href는 가져올 문서의 경로를 나타낸다.
혹은 html 파일에서도 스타일을 변경할 수 있다. head 태그 내에 style 태그 생성 후 css파일에 입력했던것과 같이 적어주면 마찬가지로 적용된다.
다음으로 js파일 생성 후 console.log 코드에 아무 글자나 입력한다. 마찬가지로 html 파일에 추가해줘야 하는데 이번에는 link 가 아니라 script 태그를 생성하여 src="./main.js" 를 입력해준다. 혹은 html파일에서 script 태그 내에 js파일에 입력했던 것처럼 적어줘도 된다.
그런 다음 브라우저에서 F12 입력 후 콘솔 창을 보면 js파일에 입력했던 글자가 출력되는 것을 확인할 수 있다.
※ 본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.
https://bit.ly/3FVdhDa
'etc... > 패스트캠퍼스 챌린지' 카테고리의 다른 글
패스트캠퍼스 챌린지 6일차 - Part1. Ch5 (0) | 2021.11.06 |
---|---|
패스트캠퍼스 챌린지 5일차 - Part1. Ch4 (0) | 2021.11.05 |
패스트캠퍼스 챌린지 4일차 - Part1. Ch3 (0) | 2021.11.04 |
패스트캠퍼스 챌린지 2일차 - Part1. Ch2 (0) | 2021.11.02 |
패스트캠퍼스 챌린지 1일차 - Part1. Ch1 (0) | 2021.11.01 |