FrontEnd/HTML&CSS

[HTML] HTML의 기본

이수밈 2023. 8. 6. 13:52

  • hyper text markup language → 프로그래밍 언어가 아님
    • hyper text : 참조(링크)를 통해 한 문서에서 다른 문서로 즉시 접근할 수 있는 텍스트
    • markup : 태그 등을 이용하여 문서나 데이터의 구조를 명기하는 언어
  • 첫 번째 웹페이지 : world wide web
  • HTML
    • 웹페이지를 작성하기 위한 언어
    • .html의 확장자를 가진다
    • 태그는 대소문자 구분이 없다
    • 엔터, 스페이스바, 탭이 적용되지 않는다
  • 태그
    • html의 요소는 태그와 내용으로 구성된다 <>~속성값~</>
    • 시작태그 / 종료태그로 쌍을 이루거나 시작 태그만 존재할 수도 있음
    • 각각의 시작태그는 속성과 속성값을 가질 수 있다.
  • 주석
    • 주석의 내용은 브라우저에 출력이 되지 않는다
    • html 태그의 내용을 설명하기 위한 용도로 사용한다
    • <!- - 주석내용 - ->
  • 기본 구조
    • html : HTML 최상위 요소, 문서의 root → head 와 body로 구성
    • head : 문서제목 문자코드(인코딩) 등 해당문서에 대한 정보를 가지고 있고, 브라우저 화면에 출력되지 않음
    • meta : 문서의 작성자, 날짜 등 본문에 나타나지 않은 일반 정보들
    • body : 브라우저 화면에 나타나는 정보 → header, main, footer 등 포함한
      • id 속성을 이용하여 문서 내에서 tag 식별이 가능하다 (중복x)
      • class 속성을 이용하여 여러 tag에 공통적인 특성을 부여한다(중복0)
  • 특수문자
    • &nbsp : 공백 → 공백을 여러개 집어넣어도 하나만 적용된다
    • &lt;
    • &gt;
    • &amp;
    • &quot;
    • &copy;
    • &reg;

🖥️ https://developer.mozilla.org/ko/

https://www.w3schools.com/→ 여기서 특수문자 검색 🖥️

 

  • semantic tag : 의미론적 요소를 담은 태그, 역할이나 기능을 담은 태그
    • 코드의 가독성을 높이고 유지보수를 쉽게 한다.
      • <header>
      • <nav>
      • <aside>
      • <section>
      • <article>
      • <footer>
      • <h1> ~ <h6>
  • display는 inline과 block으로 나뉘어진다. inline은 필요한 만큼만 차지하고, block은 새로운 줄에서 시작하고 그 한줄을 다 차지한다.
    • text content : 줄바꿈(block)
      • <blockquote>
      • <hr>
      • <pre>
      • <p>
      • <ul>
      • <ol>
      • <div>
    • Inline text semantics
      • <a>
      • <b>, <strong>
      • <br>
      • <i>, <em>
      • <q>
      • <s>
      • <u>
      • <sup>, <sub>
      • <span>
<!-->
target 속성
_self : 현재 창, 프레임
_blank : 새로운 탭, 창

# : id 속성 <--!>
  • Image & Multimedia
    • <audio>
    • <img>
    • <video>
  • Table content 
    • <table>
    • <thead>
    • <tbody>
    • <tfoot>
    • <tr>
    • <th>, <td>
    • <col>
    • <colgroup>
    • <caption>
  • Forms 태그 (중요)
    • 사용자로부터 데이터를 입력받아 서버에서 처리하기 위한 용도로 사용
    • <form> 안에 method: 메소드를 어떤 방식으로 보낼지가 중요함
      • action : 어디로 보낼까..?가 중요하다.
    • 사용자가 작성한 데이터를 서버로 전송(submit)
    • form은 form으로 중첩이 안된다.
    • front(client) → back(server) : 서로 소통하기 위해 폼태그가 필요
      • <form>
      • <button>
      • <input>
      • <label>
      • <select>
      • <option>
      • <textarea>
      • <fieldset>
      • <legend>
  • input : 요소의 동작은 타입 속성에 따라 달라진다.
    • 입력을 받을 때는 <input type = “text”/password/file/submit>
    • <fieldset> : 묶어줄때
    • <legend> : 필드셋의 제목으로 달아줄 수 있다.
    • <label> : 목차
    • <radio> : 선택창 동그라미
    • <checkbox> : 여러개 선택할 수 있을 때
    • ★html 기본적인 indent = 4칸, css 기본적인 indent = 2