HTML

JIY00N·2023년 2월 7일
html
0

HTML / CSS / JavaScript

목록 보기
1/18
post-thumbnail

2023.02.07

0. 시작하기전

1년전 학교에서 동기들과 함께 졸업 작품을 2학기 동안 제작했었다.
프로젝트를 간략히 말하자면 '음성회의 기록 시스템'의 데모를 웹으로 시연할 계획이였다.
프로젝트를 진행하면서 웹을 처음 접하게 되었고 공부하면서 흥미를 느꼈다.
프론트엔드 분야에 관심을 가지게 된 중요한 계기가 되기도 하였다.
본 포스트는 'Do it 웹 표준의 정석'을 바탕으로 작성한다.

HTML을 본격적으로 배우기 전에 웹 개발이 무엇인지와 웹의 작동 과정을 살펴보자

❓ 웹 개발이란?
사용자에게 제공할 기능과 서비스까지 모두 담는 것이다.

✔ 정적 사이트 - 서버에 미리 저장된 파일이 사용자에게 전달
✔ 동적 사이트 - 서버에 있는 데이터들을 가공처리한 후 생성되어 사용자에게 전달

❓ 서버와 클라이언트
✔ 서버 - 서비스를 제공하는 컴퓨터
✔ 클라이언트 - 정보를 요청, 서비스를 사용하는 컴퓨터

❓ 프론트엔드와 백엔드
✔ 프론트엔드 - 사용자 인터페이스 개발(HTML, CSS, JS)
✔ 백엔드 - DB와 API서버 개발(자바, PHP, 파이썬)
API - Application Programming Interface의 줄임말로 정의 및 프로토콜 집합을 사용하여 두 소프트웨어 구성 요소가 서로 통신 할 수 있게 하는 메커니즘
ex) 날씨 앱은 API를 통해 기상청의 소프트웨어 시스템과 '대화'하여 매일 최신 날씨 정보를 표시

1. HTML

HTML(Hyper Text Markup Language) 웹 사이트의 모습을 기술하기 위한 마크업 언어이다.

2. Tag

Tag(태그)란 웹 문서의 모양과 행동양식을 정해준다.

✔ 자주 사용하는 태그 순위
html, head, body, title, meta, div, a , script, link, img, span, p, li, ul, style, br, h2, input, h1, form, h3, nav, footer, header, iframe, button, strong, i, ol

출처 : https://www.advancedwebranking.com/seo/html-study/

2-1 HTML 기본 구조

✔ html, head, body

<!DOCTYPE html> <!--웹 문서 유형 지정 = HTML5-->
<html lang ="ko"> <!--웹 문서의 시작과 끝 표시-->
  <head> <!--웹 브라우저에서 문서 정보를 알려줌-->
    <meta charset="UTF-8"> <!--문자 세트를 비롯해 문서 정보가 들어있음-->
    <title> HTML 기본 구조</title> <!--문서 제목-->
  </head>
  <body> <!--웹 브라우저에서 내용을 표시-->
    <h1>Front-end Web Develop</h1>
    <hr>
    <p>HTML</p>
    <p>css</p>
    <p>JS</p>
  </body>
</html>

2-2 시맨틱 태그

  1. <p> - 하나의 문단을 만듬
  2. <a> - href 특성을 통해 다른 페이지나 같은 페이지의 어느 위치, 파일, 이메일 주소와 그 외 다른 URL로 연결할 수 있는 하이퍼링크를 만듬
  3. <header> - 주로 검색창이나 사이트 메뉴 삽입
  4. <nav> - 같은 웹 문서 안에서 다른 위치로 연결하거나 다른 웹 문서로 연결하는 링크
    - 웹 문서의 위치 자유
  5. <main> - body의 핵심이 되는 내용, 한번만 사용 가능
  6. <aritcle> - 문서, 페이지, 사이트 안에서 독릭적으로 구분해 배포하거나 재사용 할 수 있는 구획을 나타냄
  7. <section> - 콘텐츠 영역을 나타냄
  8. <aside> - 본문 내용 외에 왼쪽이나 오른쪽 혹은 아래쪽에 사이드바를 만듬
  9. <footer> - 웹 문서에서 맨 아래쪽 영역(사이트 제작 정보, 저작권 정보, 연락처)
  10. <div> - 문서 구조를 만들거나 스타일을 적용할 때 사용

2-3 텍스트 태그

  1. <hn> - 제목 h1~h6까지 사용 할 수 있으며, 숫자가 작을수록 글자 크기는 커짐
  2. <p> - 텍스트 단락
  3. <br> - 줄 바꿈, 텍스트 단락 중 원하는 위치에서 줄을 바꿈
  4. <blockquote> - 내용 인용
  5. <strong> - 중요한 텍스트를 굵게 표시
  6. <b> - 중요하지 않지만 굵게 표시
  7. <em> - 중요한 텍스트를 기울게 표시, 화면 낭독기에서 강조해서 읽음
  8. <i> - 중요하지 않지만 기울게 표시(마음속의 생각이나 용어)
  9. <ins> - 내용을 편집할 때 추가한 내용을 표시
  10. <del> - 내용을 편집할 때 삭제한 내용을 표시
  11. <sup> - 위 첨자
  12. <sub> - 아래 첨자

2-4 목록 태그

  1. <ol> - 순서 있는 목록 시작과 끝을 나타냄
  2. <ul> - 순서 없는 목록 시작과 끝을 나타냄
  3. <li> - 순서 있는 목록이나 순서 없는 목록의 각 항목을 나타냄
  4. <dl> - 설명 목록의 시작과 끝을 나타냄
  5. <dt> - 설명 목록의 제목을 나타냄
  6. <dd> - 설명 목록의 설명을 나타냄

2-5 표 태그

  1. <table> - 표 나타냄
  2. <caption> - 표의 제목
  3. <tr> - 표의 행
  4. <td> - 표의 셀
  5. <th> - 제목 셀
  6. <thead> - 표 구조에서 제목 부분을 나타냄
  7. <tbody> - 표 구조에서 본문 부분
  8. <tfoot> - 표 구조에서 요약이나 정리 부분
  9. <col> - 표에서 열의 스타일 지정
  10. <colgroup> - 표에서 여러 열을 함께 묶어서 스타일 지정

2-6 멀티미디어 태그

  1. <object> - 멀티미디어, PDF파일등 다양한 형식의 파일 삽입
  2. <embed> - <audio>,<video> 태그와 <object> 태그도 지원하지 않을 경우 멀티미디어 파일 삽입
  3. <img> - 이미지 파일 삽입
  4. <audio> - 오디오 파일 삽입
  5. <video> - 비디오 파일 삽입

2-7 폼에서 사용하는 태그

  1. <form> - 폼의 시작과 끝
  2. <fieldset> - 폼 요소를 그룹으로 묶음
  3. <legend> - 필드셋에 제목을 붙임
  4. <input> - 사용자가 내용을 입력할 필드를 삽입
  5. <select>, <option> - 드롭다운 목록을 삽입
  6. <textarea> - 텍스트를 여러 줄 입력할 수 있는 텍스트 영역을 삽입
  7. <datalist> - 데이터 목록을 삽입

2-8 <input> 태그 유형

  1. <text> - 한 줄짜리 텍스트를 입력할 수 있는 텍스트 상자
  2. <password> - 비밀번호를 입력할 수 있는 필드
  3. <search> - 검색할 때 입력하는 필드
  4. <url> - url주소를 입력할 수 있는 필드
  5. <email> - 이메일 주소를 입력할 수 있는 필드
  6. <tel> - 전화번호르 입력할 수 있는 필드
  7. <checkbox> - 주어진 여러 항목에서 2개 이상 선택할 수 있는 체크 박스
  8. <radio> - 주어진 여러 항목에서 1개만 선택할 수 있는 라디오 버튼
  9. <number> - 숫자를 조절할 수 있는 스핀 박스
  10. <range> - 숫자를 조절할 수 있는 슬라이드 막대
  11. <date> - 사용자 지역을 기준으로 날짜(년, 월, 일) 삽입
  12. <month> - 사용자 지역을 기준으로 날짜(년, 월) 삽입
  13. <week> - 사용자 지역을 기준으로 날짜(년, 주) 삽입
  14. <time> - 사용자 지역을 기준으로 시간 삽입
  15. <datetime> - 국제 표준시로 설정된 날짜와 시간 삽입
  16. <datetime-local> - 사용자가 있는 지역을 기준으로 날짜와 시간 삽입
  17. <submit> - 전송 버튼
  18. <reset> - 리셋 버튼
  19. <image> - submit 버튼 대신 사용할 이미지
  20. <button> - 일반 버튼
  21. <file> - 파일 첨부 버튼
  22. <hidden> - 사용자에게 보이지는 않지만 서버로 넘겨주는 값이 있는 필드

2-9 <input> 태그 속성

  1. <autofocus> - 웹 문서가 열리면 입력 필드 안에 마우스 포인터 표시
  2. <placeholder> - 텍스트 필드에 힌트를 표시
  3. <readonly> - 입력 필드를 읽기 전용으로 지정
  4. <required> - 필수 입력 필드를 지정
  5. <max> - 숫자 입력 필드에서 최댓값 지정
  6. <min> - 숫자 입력 필드에서 최솟값 지정
  7. <step> - 숫자 입력 필드에서 증감할 간격 지정
  8. <maxlength> - 텍스트 관련 필드에서 입력할 수 있는 최대 길이 지정
  9. <minlength> - 텍스트 관련 필드에서 입력할 수 있는 최소 길이 지정
  10. <size> - 텍스트 관련 필드에서 화면에 표시할 크기 지정
  11. <list> - 연결할 데이터 목록 지정

3. The End

웹 개발에서 필요한 기본 개념들과 HTML이 무엇인지, HTML에 자주 사용하는 태그들을 알아보았다.
태그들의 예시는 필요에 따라 다시 찾아보자
다음 포스트는 CSS에 관해 정리해보는 시간을 갖도록 하자 :)

profile
JIY00N
블로그 이전 했습니다. https://yoon-log.vercel.app/
다음 포스트

#1 JS 개념 / 변수 / 표현식과 문

0개의 댓글