HTML 혼자 연습하는 방법

HTML 을 연습하는데 HTML 태그 배치가 (layout이라고 해야하나) 내 맘대로 딱딱 원하는 위치에 배치가 안되서 열불나더라고요.

교수님은 w3schools.com의 try it yourself! 에서 연습하라고 했는데 이렇게 하면 일일히 run을 눌러서 결과를 봐야하는게 여간 힘든 작업이 아니더라고요. 각설하고, (요약한 내용은 맨 밑에서 보세요!!) 

www.w3schools.com/html/tryit.asp?filename=tryhtml_default

Tryit Editor v3.6

제가 생각해낸 방법은 저희가 웹 페이지와 VS code를 연결해놓았잖아요? (전 포스팅 참조: blog.naver.com/PostView.nhn?blogId=blu_mountain&logNo=222195968073&parentCategoryNo=&categoryNo=11&viewDate=&isShowPopularPosts=false&from=postList)
페이지 결과화면에서 우클릭>검사하면 페이지 HTML 정보를 볼수 있답니다. 

또한 커서를 올리면 해당 구역의 HTML, CSS 정보를 볼 수 있어요!

이렇게 계속 웹 페이지 HTML 상태를 모니터링 하고 코드 수정은 VS Code에서 하면 너무나 편리한 것...! ㅜㅠㅠㅜ

너무 뻔한 이야기였나요? ㅜㅠㅜ 

저는 이렇게 하면 편한걸 뒤늦게 알았네용... ㅜㅠㅠ 

 

(추가): 2021/1/8

 

암튼 요약하자면

1) 벤치마킹하고 하는 페이지를 띄어놓고 페이지 우클릭 > 검사 (따라하고자 하는 웹 페이지 배치 및 CSS 적용사항을 확인할 수 있음)

2) VS Code로 소스코드 수정 및 저장. (바로 바로 웹페이지에 수정사항이 반영된것을 확인할 수 있음)