본문 바로가기
Otter's [ 개발새발 ]/# 프론트엔드 공부 - HTML_CSS

[HTML] 22.12.25 HTML/CSS 강의 수강 노트 - 구조 디자인(HTML)

by byeonPig 2022. 12. 26.

[ 내용 ]

1. HTML(HyperText Markup Language)이란?

 

HTML은 웹사이트 콘텐츠를 설명이라는 유일한 목적을 가진 마크업 언어이다. 구조 설계를 목표로 한다.

Hyperlink 시스템을 가지고, htm, html 확장자를 가진다.

HTML파일은 단순 Text파일이며, 이를 웹브라우저가 해석 후 구조화를 통해 사용자가 '뷰'라는 화면을 통해 보도록 렌더링을 해준다.

 

 

2. 시멘틱 마크업(Semantic Markup)

 

- 중요성!

마크업이 담고있는 내용을 더 효과적으로 전달하기 위한 디자인 효과들을 적용하기 전, 컨텐츠를 잘 구조화하는 것은 매우 중요하다.

시멘틱 마크업은 HTML요소의 올바른 사용에서 시작한다.

예컨데, heading요소를 div요소를 사용해 마크업 한다면 최적화, 접근성, 개발 효율성에 부정적 영향을 줄 것이다. 그래서 HTML, CSS, JS는 분리되는 것이 좋다.

 

1. 최적화: 검색엔진을 최적화 하는데 headings 요소의 키워드 중요

2. 접근성: 스크린리더기는 네비게이션 길잡이로 headings요소 참고

3. 개발 효율성: 스크립트 및 스타일 적용을 위한 사전 작업이 까다로움(default 값들을 일일이 바꿔줘야하는 문제가 발생 할 수 있다.)

 

<div id="heading" style="font-size: 300%; padding: 10px;">시멘틱 마크업이란?</div>

적절하게 시멘틱 마크업을 하지 않은 경우.

<h1>시멘틱 마크업이란?</h1>
 

적절한 HTML 요소를 사용해 코드를 간결하게 짤수 있다. 적절한 시멘틱 마크업을 할 경우 최적화, 개발 효율성, 접근성, 유지보수 등 여러 이점이 존재한다.

 

참고

 

시멘틱 마크업이란?

Semantic Markup Semantic Markup은 종종 POSH(Plain Old Semantic HTML)라고도 불리우는데 말 그대로 평범하고 오래된 의미론적인 HTML이라는 뜻입니다. 시멘틱 마크업은 중요하다 HTML은 디자인 요소이고, 기본적

webclub.tistory.com

 

3. 기본 문법

 

- HTML 용어

 

1. element

2. open tag / close tag

3. attribute / value (ex. id = "id-of-this-tag")

 

HTML 요소 (element)의 구조

 

 

4. Void Element(Empty Element): 컨텐츠를 감싸지 않는 요소. 그렇기 때문에 closing tag가 없다.

형식 <tag attr = "value">
tag 종류

+ Self Closing tag:

Self Closing Tag → <tag />

 XML, XHTML의 Void Element의 경우 opening 태그이름 뒤에 slash(/)를 써 Self Closing tag를 취한다. (HTML의 self closing tag는 parser가 그 slash를 무시한다. 그리고 HTML에서 slash를 쓰지 않더라도 일부 코드 포매터는 XML이나 XHTML의 호환성을 위해 slash를 추가하기도 한다.)

 

참고

 

Void element - MDN Web Docs Glossary: Definitions of Web-related terms | MDN

A void element is an element in HTML that cannot have any child nodes (i.e., nested elements or text nodes). Void elements only have a start tag; end tags must not be specified for void elements.

developer.mozilla.org

 

5. 표준 호환 모드(Standards Mode) vs. 비표준 호환 모드(Quirks Mode)

- 비표준 호환 모드(Quirks Mode): W3C에서 웹표준을 제정하기 전 사용되던 브라우저(IE, Netscape Navigator)의 경우 새로운 표준에 의해 작성된 페이지가 제대로 표현되지 않았다. 비표준 모드에서는 웹 표준 제정 전 제작된 웹사이트들을 표현하기 위해 브라우저들의 비표준 동작을 에뮬레이션 한다.

- 표준 호환 모드(Standards Mode): HTML과 CSS에 의해 웹 브라우저들의 작동을 에뮬레이션한다.(Full Standards Mode, Almost Standards Mode도 있다.)

 

+ 브라우저가 작동 모드를 결정하는 방식

- 문서의 시작지점에 DOCTYPE을 입력하는가 여부에 따라(정확히는 DTD에 작성되어 있는 요소에 따라) 판단한다. HTML5에서의 DOCTYPE의 유일한 목적은 완전 표준 모드를 활성하기 위함이다. 이전 버전의 HTML 표준에서는 다른 추가적인 의미가 있었지만 실제로 그 이외 목적으로 사용한 브라우저는 없다.

 

참고

 

Quirks Mode and Standards Mode - HTML: HyperText Markup Language | MDN

In the old days of the web, pages were typically written in two versions: One for Netscape Navigator, and one for Microsoft Internet Explorer. When the web standards were made at W3C, browsers could not just start using them, as doing so would break most e

developer.mozilla.org

 

 

6. 주 언어 설정: html 루트 요소에 lang 속성을 사용해 문서에서 사용되는 언어를 설정한다. 스크린 리더가 해당 컨텐츠를 읽기 위한 기본 언어가 설정된다.

<html lang = "언어정보코드-지역정보코드"> 
<!DOCTYPE html>
<html lang="ko-KR">
  <head>
  	~~~
  </head>
  <body>
    ~~~
  </body>
</html>

 

- 언어 코드 예시 -

언어 코드
한국어 ko
영어 en
일본어  ja
스페인어 es

 

참고

1. about the lang attribute

 

HTML Standard

 

html.spec.whatwg.org

2. ISO 639 - 전 세계 언어 명칭에 고유 부호를 부여하는 국제 표준

 

ISO 639 - 위키백과, 우리 모두의 백과사전

위키백과, 우리 모두의 백과사전.

ko.wikipedia.org

3. ISO 3166-1: 국가(지역)코드

 

ISO 3166-1 - 위키백과, 우리 모두의 백과사전

위키백과, 우리 모두의 백과사전. ISO 3166-1은 ISO 3166 표준의 일부로, 세계의 나라와 부속 영토, 국가의 주요 구성 단위의 명칭에 고유 부호를 부여한다. 국가나 부속 영토의 이름이 바뀌면 보통 새

ko.wikipedia.org

 

7. 제목과 단락

 

1. 제목(headings level): h1~h6로 구성

2. 단락: <p></p>

3. 주석: <!-- -->

 

8. HTML 이미지 & 피규어 & 캡션

 

1. figure 요소: 이미지, 표, 도표, 차트를 캡션과 함께 묶어주는 요소

2. 이미지 요소의 종류: JPG, GIF, PNG, SVG(vector) 

img와 figcaption을 감싸는 figure요소

 

9. HTML 문법 유효성 검사(Validator)

 

1. validator.w3.org 이용!

 

The W3C Markup Validation Service

Validate by File Upload Note: file upload may not work with Internet Explorer on some versions of Windows XP Service Pack 2, see our information page on the W3C QA Website.

validator.w3.org

2. Web Developer를 이용

3. HTML 예약어 " < , > " 충돌 문제 해결 -> 엔티티 코드 사용

 

- 엔티티 코드란: HTML 예약어를 기존에 사용하던 의미 그대로 사용하기 위해 별도로 만든 문자셋.

 

- 엔티티 코드

 

Entity Code - A Clear and Quick Reference to HTML Entities Codes

About EntityCode The idea came from my constant need to add those hard to remember HTML entity codes, such as the copyright symbol ( © ), every time I’m developing a new website or writing a new article. Usually, I either open one of my previously done

entitycode.com

 

10.  순차 목록(Ordered List), 비순차 목록(Unordered List), 목록 아이템(List Item)

요소(element) 설명 비고
ul 목록(List)의 아이템이 순서와 상관이 없을 경우 사용하는 list 요소  
ol 목록(List)의 아이템이 순서와 상관이 있을 경우 사용하는 list 요소 ol의 item요소의 attribute 관련 문서: https://developer.mozilla.org/ko/docs/Web/HTML/Element/ol#%ED%8A%B9%EC%84%B1
li ul, ol의 item요소  

- ul, ol 요소 안에는 li만 가능

- li 요소는 body 요소 안에 들어갈 수 있는 요소들은 다 올 수 있다.

 

11. 앵커(Anchor)와 하이퍼링크(Hyperlink)

 

[TO-DO LIST ]

1. 브라우저는 어떻게 동작하는가(https://d2.naver.com/helloworld/59361) 아티클 읽어보기

2. Void Element Tag 종류들 문서 읽어보고 정리하기

 

[ 참고 자료 ]

 

 

HTML 시작하기 - Web 개발 학습하기 | MDN

HTML 기본 사항을 둘러 보셨기를 바랍니다.

developer.mozilla.org

 

꾸준히 열심히!

티스토리툴바