빡공단 3일차

3941 단어 htmlhtml

[3강] 내가 쓴 문서가 웹 페이지로!

  • html 문서의 구조
  • html 문서를 작성하기 위한 태그

⭐ html 문서의 구조

➰ 하얀 원 표시: 해당 파일이 저장되지 않았다! ➡ Ctrl - S로 저장 ➡ 브라우저에서 새로고침
➰ 텍스트 생성!


웹 서핑을 통해 웹 페이지를 많이 보면 단순히 글자만 있는 게 아니라 버튼, 음악, 비디오, 여러 가지 이미지 등이 담겨 있다.
이 기능들을 구현하는 방법은 태그를 이용하는 것이다!

태그: 해당 문서에 여러 기능을 추가하기 위한 표시를 해 주는 친구들.
실제 문서에서는 보이지 않음!


🌕 html의 기본적인 틀

<!DOCTYPE HTML>
<html>
  <head>
    
  </head>
  <body>
    <p>
      hello!
    </p>
    <p>
      hello
    </p>
  </body>
</html>



⭐ html 문서를 작성하기 위한 태그

🌕 p 태그

: paragraph(단락)

🌖 p 태그 사용 전
➰ 분명히 줄바꿈을 했지만 hello world가 붙어서 나온다!
🛎 html은 줄 바꿈과 공백을 무시한다!

🌖 p 태그 사용 후
➰ 줄바꿈이 생겼다!

p 태그: 줄 바꿈을 할 수 있는 태그 ➕ 문단을 나누기도 함.
🛎 hello wolrd가 p 태그 안에 있다는 것을 직관적으로 보이게 하기 위해 탭을 통해 정리!



🌕 h 태그

: 제목을 나타낼 때 사용. h1, h2, h3.. 등등 점점 작아짐.
➰ 정확히는 h1 태그. 제목을 나타내기 때문에 내용이 훨씬 더 커지고 강조.
➰ 가장 큰 제목일 때 h1, 그 다음 소제목은 h2나 h3 사용!



🌕 확장 프로그램 설치

🤷‍ 코드를 작성하고 크롬을 새로 고침하는 것은 귀찮다! 이 과정을 자동화해주는 Live Server 설치!

  • Live Server: Ctrl - S 즉 저장 버튼만 눌러도 바로 크롬이 바뀐 html을 보여줌.

➰ Live Server 설치!

➰ Ctrl - Shift - P를 눌러 명령어 입력 창 띄우기. ➡ Live Server: Open with Live Server 열기. ➡ 끝!

✨ 대신 완성된 html 문서여야만 가능!

❓ 완성된 html 문서란?
✅ html 문서의 기본적인 틀을 지킨 문서!



🍒 정리

오늘부터 기본적인 문법을 배웠다! 역시 새로운 문법을 배울 때가 제일 재밌다ㅎㅎ 기존에 배웠던 언어들보다 확실히 쉬운 것 같다. 프로그래머들에게 html을 언어라고 하면 화낸다고 하던데 그 이유를 조금은 알겠다..ㅎ 이게 80%는 배운 것이라고 말씀해 주셨는데 이렇게만 나간다면 문제없이 쉽게 배울 수 있을 것 같다!

카카오프렌즈 컬러링북(Lv2)
Session 18. Express

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage