반원 블로그

HTML 1.기본 용어, 기초 구조 본문

2018~/프론트 엔드 기초(HTML, CSS, JavaScript)

HTML 1.기본 용어, 기초 구조

반원_SemiCircle 2019. 8. 12. 03:08

HTML이란

  • 모든 웹페이지의 기본이 되는 마크업(구조화) 언어
  • 웹 상에 정보(버튼이 있다. 텍스트 입력창이 있다. 이미지가 있다 등)를 표현하기 위한 구조화 언어
  • 크게 HTML(웹 페이지의 구조틀) + CSS(웹페이지의 스타일)+ JavaScript(웹 페이지의 기능)으로 나누어짐
  • 우리가 보는 웹 페이지는 서버에서 보내준 웹페이지를 웹 브라우저로 번역해서 보는 것
  • HyperText Markup Text
  • HyperText : 연결 링크 텍스트
  • Markup : 구조화

웹(Web)

  • 인터넷에 연결 된 컴퓨터들을 통해 정보 교환 및 공유를 할 수 있는 기술 영역

클라이언트와 서버

  • 클라이언트 : 고객, 소비 측
  • 서버 : 제공자, 서비스 측
  • 웹 서비스에서는 클라이언트가 서버에 원하는 페이지나 정보를 요청하고, 이에 대한 응답을 서버가 클라이언트에게 제공한다.
  • 흔히 아는 웹 페이지는 HTTP 기술을 사용한다.

HTTP이란

  • HyperText Transfer Protocol : 웹 데이터를 주고받는 기술 또는 주고받기위한 규칙
  • HyperText : Text써진 다른 페이지로 이동시킬 수 있는 연결 링크 텍스트
  • Transfer : 전송. 데이터 전송을 의미
  • Protocol : 도구. 규약.

HTML5

  • 현재 사용중인 HTML 버전은 5
  • HTML5를 사용하고 있다는 것을 알려주기위해 를 맨 첫줄에 적어줘야한다.
  • 다른 사이트에서도 1줄에 확인할 수 있다.

HTML 기본 구조 - 태그

  • <태그> </태그> : 어떠한 요소(버튼 등)을 표현할 때
  • <태그> 내용 </태그> : 해당 요소에 텍스트(내용)을 넣고 싶을 때
  • <태그 속성=속성값, 속성=속성값, ...> 내용 </태그> : 해당 요소에 특정 속성(크기, 관리를 위한 소속 지정 등)을 넣고 싶을 때
  • 태그는 이미 정해져있는 것들이 있다.
  • 예 : div, span, p, a, h1~h6, img 등
  • 버튼, 텍스트 박스 같은 것은 요소(Element)라고 한다.
  • 즉, HTML은 요소들을 만들고 배치하는 데 쓰인다고 볼 수 있다.

HTML 예외 구조 - Empty Element

  • 쌍을 이루지 않는 태그
  • <br> : 줄 바꿈
  • <img src="파일 주소"> : 이미지 요소

HTML 템플릿

  • HTML 코드를 작성하여 웹 페이지를 구성할 때 기본으로 들어가야 할 코드들

  • 사실상 묻지도 따지지도않고 일단 넣어야 하는 코드

  • 아래 것 말고도 viewport등도 있으나 일단 스킵

      <!DOCTYPE html>
  <head>
      <meta charset="UTF-8">
      <title>Document</title>
  </head>
  <body>

  </body>
  </html>

    html코드

  • html코드임을 나타내는 태그

코드

  • 웹 페이지에 사용될 CSS나 js파일에 대해서, 또는 요소들의 정보들을 미리 선언하는 태그 영역

코드

  • 실제로 우리에게 보여질 요소, 컨텐츠에 대해 적는 태그 영역
저작자표시 비영리 변경금지

'2018~ > 프론트 엔드 기초(HTML, CSS, JavaScript)' 카테고리의 다른 글

CSS 2.Box Model, margin, padding, border  (0) 2019.08.12
CSS 1.CSS란? CSS 적용 방법(요소, 선택자)  (0) 2019.08.12
HTML 6. form 태그  (0) 2019.08.12
HTML 5.GET, POST 전송 방식  (0) 2019.08.12
HTML 4. 정적자원, 정적 페이지와 동적 페이지  (0) 2019.08.12
HTML 3.table과 ul,ol 태그  (0) 2019.08.12
HTML 2.엘리먼트 관계, 블럭(Block) 요소, 인라인(Inline) 요소  (0) 2019.08.12
설치환경 1.VSCode와 확장프로그램  (0) 2019.08.12
'2018~/프론트 엔드 기초(HTML, CSS, JavaScript)' Related Articles more
Comments