웹 프로그래밍 튜토리얼 | PoiemaWeb
Front-end Development Tutorial
poiemaweb.com
[HTML5]
1. HTML5 기본 문법
2014년 10월 28일 확정된 차세대 웹 표준.
html5 문서는 <!DOCTYPE html> 로 시작하여야 함
대표적인 HTML Editor: VSC, WebStorm, Atom, Brackets, Sublime text
html document는 element들의 집합으로 이루어짐
좋은 코드->읽기 쉬운 코드->indent 잘 하자
Attribute(속성): 요소의 성질, 특징을 정의하는 명세
-ex) <img src="html.png"> src: attribute name, html.png: attribute value
<!--주석-->
2. 시맨틱 요소와 검색 엔진
시맨틱 태그: 브라우저, 검색엔진, 개발자에게 콘텐츠의 의미를 명확히 설명하기 위해
<font size="6"><b>Hello</b></font>
<h1>Hello</h1>-이 둘은 브라우저에서 동일한 모습으로 나타나지만 1행의 요소는 의미론적으로는 의미를 가지고 있지 않다. 반면 2행의 요소는 최상위 레벨의 header(제목)이라는 의미를 가지고 있다.
-장점: 코드의 가독성을 높임, 유지보수 용이, 검색엔진 친화적
non-semantic 요소: div, span 등
semantic 요소: form, table, img 등
3. 웹페이지의 구성하는 기본 태그
문서 형식 정의 태그(DTD, Document Type Definition): 출력할 웹 페이지의 형식을 브라우저에게 전달
<!DOCTYPE html>
4. 텍스트 관련 태그
제목(Headings) 태그: h1~h6
글자 형태(Text Formatting) 태그:
- b(bold, 의미론적 중요성의 의미는 없음), strong(bold체, 의미론적 중요성의 의미를 가짐)
- i(italic체, 의미론적 중요성의 의미 없음), em(italic체, 의미론적 중요성의 의미 가짐)
- small, mark(highlight), del(취소선), ins(밑줄), sub(subscripted, 아래에 쓰인), sup(superscripted, 위에 쓰인)
본문 태그:
- p(Paragraphs)
- br: 개행, 빈 요소이므로 종료태그가 없음
html에서는 일반적으로 연속된 공백(space)이나 줄바꿈(enter)를 사용하여도 1개로만 표시된다.
연속적 공백 사용법:
- pre: preformatted(형식화된) text를 지정, 작성된 그대로 브라우저에 표시됨
- hr: 수평줄 삽입
- q: 짧은 인용문, 큰따옴표가 감싼다
- blockquote: 긴 인용문 블록, indent
'STUDY > GDSC' 카테고리의 다른 글
| 웹 기초 스터디 6주차 WIL6 (0) | 2023.05.03 |
|---|---|
| 웹 기초 스터디 5주차 [CSS] (0) | 2023.04.30 |
| 웹 기초 스터디 5주차 WIL5 (0) | 2023.04.11 |
| 웹 기초 스터디 4주차 WIL4 (0) | 2023.04.04 |
| 웹 기초 스터디 3주차 WIL3 (0) | 2023.03.31 |
