EdgeSecu

웹 기초 스터디 5주차 [HTML] 본문

STUDY/GDSC

웹 기초 스터디 5주차 [HTML]

Edgemine 2023. 4. 30. 00:46
 

웹 프로그래밍 튜토리얼 | 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개로만 표시된다.

연속적 공백 사용법: &nbsp;

- 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
'STUDY/GDSC' Related Articles more