본문 바로가기

달밤에 코딩하기/HTML CSS 공부하기

#1 - 배경 지식 쌓기

웹을 구성하기 위해 필요한 것

HTML

HTML은 Hyper Text Markup Language의 약자이다.

HTML은 제목, 단락, 목록 등을 정의할 수 있다. 그 밖의 여러 항목들을 구조적으로 만들 수 있는 방법을 제공한다.

 

CSS

CSS는 Cascading Style Sheets의 약자이다.

HTML / XHTML의 요소를 지정하고 레이아웃과 스타일을 정의할 때 사용한다.

 

JS

JS는 JavaScript의 약자이다.

Java와는 명칭만 비슷하고 다른 언어다. HTML / XHTML의 요소를 바꾸고 움직이는 등 페이지가 움직일 수 있도록 꾸며주는 역할을 한다.

 

 

 


 

 

웹 제작을 위해 알아야 할 규칙

웹 표준

웹 표준은 W3C(World Wide Web Consortium)을 따른다. 웹에서 사용되는 공식 표준이나 기술 규격을 말한다. 아래 사이트에서 자신이 만든 웹 표준을 검사할 수 있다.

 

#웹 표준 검사

validator.w3.org/#validate_by_upload

 

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

 

크로스 브라우징

여러 브라우저에서( 크롬, 익스플로러, 파이어폭스, 사파리, 오페라 등..) 사용자가 동일한 경험을 얻을 수 있도록 웹사이트를 제작하는 것을 말한다. 

 

웹 접근성

웹 접근성(web accessibility)은 장애를 가진 사람과 장애를 가지지 않은 사람 모두가 웹사이트를 이용할 수 있게 하는 방식을 가리킨다. 사이트가 올바르게 설계되어 개발되고 편집되어 있을 때 모든 사용자들은 정보와 기능에 동등하게 접근할 수 있다.

 

#웹 접근성 연구소

www.wah.or.kr:444/

 

 


 

 

웹 에서 사용 가능한 이미지와 동영상

구분 이름 내용
이미지 JPG 손실 압축 방법의 이미지 포맷. 가장 많이 사용
PNG 비손실 압축 방법의 이미지 포맷. 투명도 지원
GIF 비손실 압축으로, 여러 PNG 이미지를 연결하여 동영상 처럼 만드는 이미지 포맷. (움짤)
WEBP 구글이 개발한 이미지 포맷. 손실/비손실 모두 지원. 구버전 브라우저는 잘 지원하지 않음
SVG 벡터 방식으로 깨지지 않으며, XML 방식이기 때문에 코드로 제어가 가능함.
동영상 MP4 일반적으로 사용하는 동영상 포맷.
WebM 구글이 개발한 동영상 포맷. 고화질 영상 압축 형식. 투명도가 반영 된 동영상을 지원한다.
Ogg 오픈소스이기 때문에 지적 재산권과 관련이 없고, 성능이 뛰어남. 구버전 브라우저는 잘 지원하지 않음

'달밤에 코딩하기 > HTML CSS 공부하기' 카테고리의 다른 글

#5 - HTML 작성 준비  (0) 2021.04.04
#4 - CSS 기본 문법  (0) 2021.04.04
#3 - HTML 기본 문법  (0) 2021.04.04
#2 - VS Code 사용법  (0) 2021.04.04
#0 - 프롤로그  (0) 2021.04.04