본문 바로가기
웹개발/Node.js 스터디

인프런 생활코딩 section1~2

by dustnn 2024. 11. 11.

 

 

1.

우리의 목표는 다음과 같은 웹페이지를 만드는 것이다.

 

2-1.

"뭐가 원인이고 뭐가 결과인지 추론하는 것"

사람이 코드를 짜면(원인) => 기계가 웹페이지를 생성(결과)

원인을 code=source=language라고 표현, 결과를 application=app=program=webpage=website라 표현

 

code에는 여러가지가 있는데, 웹페이지를 만드는 코드는 "HTML(HyperText Markup Language)"

 

HTML은 public domain이기 때문에 누구든 언제나 생성 및 사용 가능하다.

 

 

2-2.

현재 가장 많이 사용되는 웹개발 editor은 "Visual Studio Code"

 

open folder => 데스크탑 => 새로운 폴더 => web 이라는 파일 생성

 

 

html이라는 확장자를 가진 파일 하나를 만들어주고(1.html)

 

(방법1)

 

드레그하여 url 검색창에 놓으면

 

 

(방법2)

맥에서는 cmd+O 누르면 똑같이 실행된다.

 

 

2-3.

 

다음과 같은 문장을 웹페이지에 출력하고 싶다면 우선 1.html에 붙여넣어 저장하고

 

 

cmd+S 누르면 출력된다.

 

 

creating web pages라는 구절을 진하게 표현하고 싶다면 다음과 같이 <strong> </strong>을 양 끝에 쓰면 된다.

이와 같은 <>로 표현되는 것들을 tag라고 한다.

 

 

 

"web"이라는 글자에 추가로 밑줄을 긋고 싶다면 또 tag를 써주면 된다.

 

 

 

 

2-4.

 

아무 웹페이지나 들어가서 그 웹페이지를 만든 소스를 보고싶다면 오른쪽 키를 누르고 "페이지 소스 보기"를 클릭하면 볼 수 있다.

 

 

 

이런 h 시리즈? tag를 가진 코드가 많다. 많이 쓰이는 tag다.

 

 

* <h_></h_>

 

"html h1 tag" 라고 검색해보면 다음과 같은 페이지를 볼 수 있다.

 

저 example 코드를 복사해 vscode로 가져와보자.

아까 웹페이지의 h2 코드와 위의 코드 6개를 입력해보면

 

 

다음과 같이 출력된다.

 

여기서 추론할 수 있듯 h1~h6 태그들은 HTML heading을 위한 태그이며, 숫자는 글씨 크기와 굵기와 관련이 있다는 것을 알 수 있다.