프론트엔드 시작하기

일단 프론트엔드에 대해서는 정말 아무것도 모른다. typescript, tailwind 다 이름만 들어봤다.

 

하지만 프로젝트를 경험해보면서 아무것도 모르는 상태에서의 협업은 꽤나 답답하고 힘들다는 것을 알았다. 그래서 기초만이라도 알고 진행하면 앞으로 도움이 많이 될 것이라고 생각해 프론트엔드 공부를 시작하기로 마음먹었다!!

 

#1 html 파일 만들기

일단 인터넷 강의를 보며 시작했다. index.html 파일을 만들고 ! 를 치니 html 파일의 기본 형식이 나왔다. 이런 기초적인것도 처음 알았다. 근데 너무 신기한거 아닌교...

처음만든 html ㅎㅎ

#2 css 파일 만들기

css파일도 필요하다고 한다!! main.css 파일을 만들자.

 

#3 초기 세팅!

auto rename tag 라는 익스텐션을 만들면 앞부분의 테그만 변경해도 뒷 부분의 테그를 자동으로 변경해 준다길래 다운받았다!

live server도 다운받았다.

이제 html 파일에서 오른쪽 마우스 클릭 후 Open with Live Server을 통해 바로 로컬 브라우저를 열 수 있게 되었다.

 

#4 Hello World 만들기!

모든 기초 공부의 시작 Hello World를 만들어보자

html 파일의 body 안에

<div>

        Hello World!!

</div>

추가!! 그리고 라이브 서버로 열면?

 

성공!!

성공~~!