---

#2 개발자 도구와 코드 에디터

개발자 도구

• 개발자의 웹 개발 속도 및 편의를 증가

• 크롬 기준 : 브라우저 열려있는 상태에서 f12 / 도구 더 보기 → 개발자 도구

• 홈페이지의 소스코드(html)를 확인할 수 있음

• Elements라는 탭에서 코드 확인 가능

코드 에디터

• 코드 에디터 : 프로그래머가 프로그램 소스 코드를 편집하기 위해 사용하는 소프트웨어
  → 텍스트 자동 완성 + 하이라이팅 기능이 추가된 메모장 !

• Visual studio code 사용

• 파일 만들기 : 에디터 접속 후 파일 선택 -> 우클릭 후 new file 생성 -> ~.html로 생성

---

#3 HTML 코드 기초 문법

HTML

• 태그를 사용해 콘텐츠를 표시
• HTML의 문법 - 태그(tag) : HTML 코드에서 정보(콘텐츠)를 정의하는 방식
  → <> : 콘텐츠 시작
  → </> : 콘텐츠 끝
• 태그명은 콘텐츠의 성격과 의미
  예) <태그명>여기에 콘텐츠 기입</태그명>

HTML 태그 사용법

• 단일 태그 : 시작과 끝을 구분할 필요가 없는 태그, 콘텐츠를 감쌀 필요가 없으므로 시작과 끝을 구분 X
  예) <태그명 /> 또는 <태그명>

• 속성 : 태그의 부가적인 기능을 정의하는 것, 선택사항
  예) <태그명 속성명="속성값">내용</태그명> or <태그명 속성명="속성값"/>
  → 태그명과 속성 정의는 공백으로 구분, 큰 따옴표 사용

• 주석 : 사람에게는 보이지만 컴퓨터에는 보이지 않음
  예)

📝 html 기본 코드 예제

<p>Hello~~!</p>
<br><br /><br><br />
<strong>Hello~!</strong>
<strong style="color:red;">Hello~!</strong>

<!-- <p>Hello~~!</p> -->

→ p : 문자 / br : 단일태그 / strong : 굵은 글씨