입문자를 위한 기초 html (1-3) - 개발자 도구와 코드 에디터 및 코드 기초 문법

1.HTML

HTML이란 HyperText Markup Language를 의미
즉, 하이퍼텍스트와 콘텐츠를 표시해주는 언어

개발자는 html 코드로 웹 페이지에 어떤 내용이 표시될지를 정의한 html문서를 만든다.

렌더링: html 코드가 웹 브라우저를 통해 해석되고 표현되는 과정텍스트

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

개발자 도구 : 웹사이트 개발용 도구, html css 코드 확인, 네트워크 상태 점검 들 다양한 기능을 통한 편의 제공

-크롬을 기준으로 단축기 F12 를 누르게 되면 개발자 도구를 확인할 수 있다.

<크롬 - 개발자 도구를 실행한 결과>

코드 에디터 : 프로그래머가 프로그램 소스 코드를 편집하기 위해 사용하는 소프트웨어.

ex) Visual studio code

< visual studio code를 이용하여 sample 이라는 파일 안에 index 라는 html 문서를 만듦>

< 코드를 이용해서 브라우저 변화 확인>

3. HTML 코드 기초 문법

• Tag (태그) : HTML 코드에서 정보를 정의하는 형식
  <>과 </> 기호를 사용하여 콘텐츠의 시작과 끝을 표시한다.

  <태그명> 여기에 콘텐츠를 기입합니다 </태그명>

• 속성 : 태그의 부가적인 기능을 정의하는 것

  <태그명 속성명="속성값">내용이 들어감</태그명>
  <태그명 속성명="속성값"/>

** 주석 : 사람에게 보이지만 컴퓨터에게는 보이지 않는 코드

• p태그와 strong 태그는 각각 텍스트를 표현한다.
• strong태그는 p태그보다 글자가 두껍게 나타난다.
• br태그는 줄을 띄어주는 역할을 하고 단일태그로도 사용이 가능하다.
• 태그에는 속성값을 줄 수 있는데 "color : red;" 를 이용하여 글자 색을 바꿀 수 있다.