HTML

치로·2024년 8월 5일

1. HTML이란?

  • HT : Hyper Text - 문서와 문서가 링크로 연결되어 있음
  • M : Markup - 태그로 이루어져 있는
  • L : Language - 언어
  • 웹 사이트를 만들어주는 마크업 언어

2. W3스쿨즈

  • 온라인으로 웹 기술을 배우는 교육용 웹 사이트
  • HTML, CSS, 자바스크립트(JS), JSON, PHP, 파이썬, XML, SQL, Bootstrap, node.js, jQuery

3. 주석

  • : 주석 처리
  • ctrl + / = 주석 처리

4. 목록태그

- <ol></ol>
 -> orderedList : 일련 번호 표시
- <ul></ul>
 -> UnorderedList : 순서 없는 목록
- <li></li>
 : 목록의 각 항목을 명시
- <hr>
 : 직선을 표시, 레이아웃의 영역을 나누는 과정에서 사용
- <p>
 -> 본문으로 정의하기 위한 태그
 -> 하나의 문단을 구성하고자 할 때 사용

5. 문서 구조를 표현

  • 문서의 구조를 표현하는
    태그
  • 각 영역의 구분은
    태그에 고유한 id값을 부여하여 처리

6. HTML 안에서의 특수 문자

- &lt; : <
- &gt; : >
- &amp : &
- &copy : (c)

7. 이미지 표시

- <img src="이미지 파일의 경로" alt="이미지 설명" width="가로px" height="세로px" />
- <figure></figure> 
 : 이미지를 감싸는 용도로 사용되는데 범위를 지정
- <figcaption></figcaption>
 : 이미지의 설명을 담은 태그

8. 테이블

- <table></table> : 테이블 생성
- <tr></tr> : 행
- <td></td> : 열
- <thead></thead> : head 부분
- <tbody></tbody. : 테이블 본문
- <th></th> : 제목
- <tfoot></tfoot> : 표상에서 가장 아래 쪽
- align : <table>, <th>, <td> 정렬의 의미 (left, center, right)
- 행을 병합하기 위한 rowspan
 -> rowspan은 현재 열이 아래로 몇 행을 병합할지 결정하는 속성
 -> rowspan="3"으 지정했으면 그 열은 3줄을 병합
 -> 그리고 2,3번째 행은 열을 정의해서는 안됨
- 열을 병합하기 위한 colspan
 -> 가로로 열을 몇 칸 병합할 것인지 설정하는 속성

9. 입력 양식

- 입력 양식을 표시하는 <input/>
- <input name="이름(영어)" id="식별자(영어)" type="종류" value="기본값" maxvalue="숫자" />
- name 속성과 id 속성
 -> name 속성은 웹 프로그램과 연계되는 속성으로 한 페이지 안에서 고유한 값을 명시해야 함
 -> id 속성은 해당 페이지에서 그 요소를 식별하기 위한 값으로 고유한 값을 명시 해야함 
- <label></label> : 입력 요소 앞이나 뒤에서 표시되는 제목을 구성
 -> for : input 요소에 부여한 id값
 -> <label> 태그로 감싸면 됨
- <textarea></textarea> : 장문을 입력하기 위한 요소

10. 의미론적 태그

  • semantic 태그
  • 문서의 정보를 보다 잘 표현하기 위해서는 의미에 맞는 태그를 잘 사용해야한다.
    특히 HTML5에서는 웹페이지에서 통상 많이 사용하는 구조에 의미를 분명히 부여하기 위해서 의미론적 태그를 새롭게 정의하고 있음

10-1. SEO(Search Engin Optimization)

  • 검색을 최적화하기 위해서 우리가 제목, 부제목, semantic 태그를 잘 활용한다면 특정 키워드로 검색했을 때, 내가 만든 웹사이트가 검색창에 노출될 수 있음

10-2. 유지 보수성

  • 단순히 div 태그로만 모든 구조를 짜는 것보다 더 한 눈에 알아볼 수 있기 떄문에, 다른 개발자들이 코드를 유지보수하기가 더 편해짐

0개의 댓글