Skip to content

HTML.md

Latest commit

 

History

History
149 lines (93 loc) · 8.71 KB

HTML.md

File metadata and controls

149 lines (93 loc) · 8.71 KB

웹개발

  • 정적 사이트 : 방문자에게 미리 저장된 정보만을 보여 주기만 하는 웹사이트

      	- 웹서버가 브라우저(사용자) 요청에 대해 원하는 웹페이지를 바로 응답을 보냅니다.

  • 동적 사이트 : 예매, 쇼핑몰, SNS와 같이 서비스를 제공하며 사용자와 상호작용을 하는 웹사이트

      	- 브라우저(사용자)가 원하는 정보를 조회하기 위해 요청에 대한 조회를 db에서 해야합니다.
  	- JSP와 같은 백엔드 언어로 처리하여 응답 데이터를 만들어 웹서버에게 전달합니다.
  • 프론트엔드 진도는 정적 사이트와 관련된 html, css, javascript를 학습합니다.

  • 서버 : 인터넷을 통해 텍스트,이미지,동영상 등의 여러 정보를 사용자에게 제공해 주는 컴퓨터

  • 클라이언트 : 서버에 접속하여 정보를 요청하고 제공받는 사용자 기기 또는 프로그램

  • 웹브라우저 : 웹사이트 방문에 사용되는 프로그램. 구글의 크롬, 마이크로소프트의 엣지, 모질라의 파이어폭스 등이 있습니다.

  • 프론트엔드 개발 : front-end 단어의 의미와 같이 클라이언트 프로그램으로 사용되는 웹 브라우저 화면의 모양과 기능을 다루는 분야 HTML, CSS, 자바스크립트 언어를 사용하여 개발합니다.

  • 백엔드 개발 : back-end 단어의 의미와 같이 사용자에게 보이는 화면 뒤의 기능을 담당합니다. 데이터베이스에서 데이터를 조회하거나 저장하는 등의 데이터 처리 영역 입니다. 자바, 파이썬 등의 다양한 프로그래밍 언어를 사용하여 개발합니다.

  • HTML : 웹 브라우저에서 보이는 하나의 화면을 웹페이지 또는 웹문서라고 합니다. 이 웹문서의 구조와 형식을 다루는 언어 입니다. 모든 웹문서는 HTML 형식을 따라야 합니다.

  • CSS : HTML 로 작성한 웹문서의 내용을 배치하고 디자인 요소들을 적용하는 적용합니다.

  • 자바스크립트 (JS) : HTML과 CSS 는 미리 저장된 내용으로 정적인 웹문서를 보여줍니다. 자바스크립트는 웹브라우저의 엔진으로 컴파일되고 실행되는 언어입니다. 자바스크립트를 이용하면 사용자 클릭과 같은 동작에 반응하며 웹문서를 동적으로 보여줍니다.

  • 프레임워크 : 프로그램 개발에 자주 사용되는 핵심 기능을 미리 구현한 라이브러리 입니다. 백엔드 및 프론트 개발 언어들은 많은 프레임워크들을 사용하여 프로그램 개발을 합니다.

  • 자바스크립트 프레임워크 : JQuery 는 HTML 과 CSS 웹 요소의 조작을 쉽게할 수 있습니다. node.js 는 백엔드 개발에 사용됩니다. 최근에는 리엑트(react) , 뷰(Vue) , 앵귤러(Angular) 등이 사용자 인터페이스 개발에 많이 사용되고 있습니다.

  • 개발 도구 : 메모장, 이클립스 , vs code 등 다양한 도구를 사용할 수 있습니다.

HTML 기본 형식

<태그이름> </태그이름> 으로 시작과 끝을 표시하며 특정 형식을 갖는 하나의 요소를 나타냅니다. 요소는 속성을 갖습니다. 속성 값에 따라 다른 모양으로 표시되거나 기능을 갖게 됩니다. style 속성으로 디자인 특성을 설정 할 수 있습니다.

: HTML5 버전 표시

<!DOCTYPE html>

: 웹문서의 시작 ~ 끝. 다음 요소들을 포함합니다.

<html>  </html>

head 요소

<head>   </head>

: 웹브라우저가 웹 문서를 해석하고 처리하는데 필요한 정보들을 설정합니다. 다음 요소들을 포함합니다.

  1. <meta charset="UTF-8">

    : 메타정보는 웹브라우저에 직접 보이지 않고 웹문서에 필요한 정보를 설정합니다. charset="UTF-8" 은 charset 속성의 값 UTF-8 으로 웹문서의 인코딩 설정합니다.

  2. <title>Document</title>

    : 웹브라우저에 표시되는 웹문서의 제목입니다.

body 요소

 <body>   </body>

: 웹브라우저 화면에 표시되는 웹문서의 내용을 작성하는 요소 입니다. 하나의 body 만 존재하며 아래와 같은 태그에 내용을 작성합니다. 아래의 태그들은 브라우저에서 보여지는 기본 모양이 있습니다. (사용자 에이전트 스타일 시트)

  1. <h1> </h1> , <h2> </h2> , <h3> </h3> , <h4> </h4> , <h5> </h5> , <h6> </h6>
    : h1이 가장 큰제목, h6이 가장 작은 제목이다.

  2. <p> </p> : 단락.(문단)

  3. <strong> </strong> : 글꼴 모양 굵게

  4. <b> </b> : (스크린리더 경고/주의)

  5. <em> </em> : (강조)

  6. <i> </i> : (관용구)

  7. <u> </u> : 밑줄

  8. 기타 글모양: 취소선 <s> </s> 위첨자 <sup> </sup> 아래첨자 <sub> </sub> 작은 글꼴(부가정보) <small> </small>

  9. <ol> </ol> : 순서 있는 목록. 태그 안에 여러개 <li> </li> 를 갖습니다.

    • type 속성 = "1" 또는 "a" , "A" , "i" , "I" 로 순서 표시 방법 설정합니다.

  10. <ul> </ul> : 순서 없는 목록. 태그 안에 여러개 <li> </li>를 갖습니다.

    • list-style-type css 속성 = "square" , "circle" , "disc" , "none"으로 모양 설정 합니다.

  11. 설명 목록 <dl> </dl> 태그 안에 <dt></dt>(제목) 와 <dd></dd>(내용) 한쌍을 갖습니다.

  12. 표 : <table> </table> 태그 안에 여러개의 <tr> </tr> (행) 을 갖습니다.

    • <tr> </tr> 태그 안에도 여러개의 <td> </td>(열,셀) 태그를 갖습니다. 제목 열(셀)은 <th> </th>로 하면 굵은 글꼴로 표시됩니다.
    • td 또는 th 태그의 rowspan 또는 colspan 속성 = "합칠 셀의 개수"를 지정합니다.
    • <caption> </caption> 은 표의 제목을 표시합니다.(선택사항)
    • css 또는 자바스크립트에서 사용할 목적으로 제목(머릿말)은 <thead> </thead> , 본문은 <tbody> </tbody> , 요약(꼬리말) <tfoot> </tfoot> 안에 tr 태그를 포함시킵니다.
    • <colgroup> </colgroup> 태그 안에 <col> 은 각 열 단위로 css 를 적용할 때 사용합니다.

  13. 멀티미디어 파일 삽입 :

  • 그림은 <img> src 속성="이미지 경로와파일명" , width(너비) 와 height(높이) 속성 = "크기값" 을 설정합니다
  • 오디오,비디오 파일은 <object> </object> 태그의 data 속성 또는 <embed> 태그의 src 속성으로 설정합니다.
  1. 하이퍼링크 <a> </a> href 속성="링크주소" 를 설정하여 다른 웹문서로 이동합니다.
  • target="_blank" 속성은 새 탭에서 열리도록 합니다.

  1. <div> </div> 또는 <span> </span> 는 주로 디자인 목적으로 영역을 설정합니다.

  2. 시맨틱 태그 : 위의 태그들은 특정 기능을 갖고 있으나 시맨틱 태그는 기능이 없이 웹문서의 구조를 파악하는 의미를 표시합니다.

    <header> </header> : 헤더 영역(머릿말)
    <main> </main> : 본문 영역. 핵심적인 내용 포함
    <footer> </footer> : 푸터 영역(꼬릿말)
    <nav> </nav> : 네비게이션(메뉴) 영역.
    <article> </article> 주요 콘텐츠가 아닌 독립적 또는 부가적인 내용 포함.
    <section> </section> : 주요 컨텐츠를 분리해서 묶기
    <aside> </aside> : 사이드바

  3. 사용자 입력 양식

    <form> </form> 안에 사용자 입력 양식을 작성합니다.(백엔드 개발시 JSP 와 함께 사용되어 매우 중요합니다.)

    <input> 은 type 속성= "text", "password", "radio", "checkbox" , "number", "date" , "file" , "hidden" 등 입력 형태 설정 합니다.

    <textarea> </texarea> 는 다중 행 텍스트 입력
    <select> </select> 태그 안에 여러 개 <option> </option> 포함합니다. 드롭다운 선택 태그
    <button> </button> 버튼 태그. 사용자가 버튼을 클릭하면 지정된 동작을 실행하도록 합니다.

    • type 속성="submit" 또는 "button" 이 있습니다.

    • submit 은 form 태그안의 모든 사용자 입력을 서버로 전송합니다.button 은 주로 자바스크립트가 요청 기능을 실행할 때 사용합니다.

    <fieldset> </fieldset> 은 form 태그 안에서 입력 요소를 그룹화 합니다. <legend> </legend> 태그로 fieldset의 제목을 표시합니다.

    <label> </label> 입력 요소에 제목을 붙일 때 사용합니다. for 속성값을 정하여 특정(id속성값이 같은) input 요소와 연결된 동작을 시킵니다.

태그의 중요한 분류

  • 블럭 요소 : 태그 요소가 줄바꿈이 됩니다.

  • 인라인 요소 : 태그 요소가 줄바꿈이 안됩니다.