웹 기초 지식

입문자에게 추천하는 HTML, CSS 첫걸음

공부를 위한 정리글이며 HEROPY님의 블로그를 참고하여 포스팅 하였습니다.

 

개념

HTML

Hyper Text Markup Language.

페이지에 제목, 문단, 표, 이미지, 동영상 등을 정의하고 그 구조와 의미를 부여하는 정적 언어로 웹의 구조를 담당한다.

HTML을 이용해서 화면을 꾸미는 것이 아니라 튼튼한 구조(Semantic)를 만드는 것에 집중해야 한다.

CSS

Cascading Style Sheets.

마크업 언어(HTML, XML 등)가 실제 표시되는 방법(색상, 크기, 폰트, 레이아웃)을 지정하여 콘텐츠 구조를 꾸며주는 정적 언어로 웹의 시각적인 표현을 담당한다.

Javascript

자바스크립트는 콘텐츠를 바꾸고 움직이는 등 페이지를 동적으로 꾸며주는 역할을 하는 프로그래밍 언어로 웹의동적 처리를 담당한다.

 

웹 페이지를 제작할 때 각 언어의 역할을 다른 언어가 대체하지 않도록 주의하며, 각 역할이 제대로 수행되도록 구조적, 기술적으로 언어(코드)를 최적화시킬 필요가 있다. 규모가 크고 복잡한 웹페이지를 만들 때 구조적, 기술적으로 최적화하는 과정이며 유지/보수, 확장성, 생산성 등을 위해서 꼭 필요하다.

 

웹표준

웹표준이란 웹에서 사용되는 표준 기술이나 규칙을 의미하며 W3C의 권고 안에서 나온 기술들이 여기에 해당한다.

이 표준 기술들을 기준으로 웹 브라우저들(Chrome, IE, Safari 등)이 만들어지는데, 브라우저를 만드는 업체(Google, MS, Apple 같은)에서 표준 기술을 해석하는 차이, 새로운 기술 삽입(표준화 제정 단계에 따른) 등으로 조금은 다르게 구동되는 브라우저가 생기게 된다.

지금은 거의 사라졌지만 ActiveX, Flash 같은 기술은 표준이 아니다.

 

크로스 브라우징

크로스 브라우징은 조금은 다르게 구동되는 여러 브라우저에서 동일한 사용자 경험(같은 화면, 같은 동작 등)을 줄 수 있도록 제작하는 기술, 방법을 말한다.

대부분의 브라우저는 최대한 웹 표준을 준수해서 제작되기 때문에 문제되는 경우가 적지만 MSIE(Microsoft Internet Explorer) 브라우저는 웹 표준에 벗어나 있어서 표준화하기 쉽지 않은 브라우저이다.

+ 21.09.24 기점으로 Internet Explorer 11에 대한 지원이 종료되었다.

 

웹 접근성

웹 접근성이란 정상적인 웹 콘텐츠 사용이 가능한 일반 사용자부터 고령자, 장애인 같은 신체적, 환경적 조건에 제한이 있는 사용자를 포함해 모든 사용자들이 동등하게 접근할 수 있는 웹 콘텐츠를 제작하는 방법을 말한다.

• 청각 장애인을 위해 영상에 자막을 넣는 것
• 마우스를 사용할 수 없는 사람들을 위해 키보드를 통해 웹을 이용할 수 있게 하는 것 (혹은 그 반대)
• 이미지에 대체 텍스트를 제공하는 것

- 정보 통신 보조기기

- 웹 접근성 품질인증 마크: 장애인 및 고령자가 웹 사이트 이용에 불편이 없도록 웹 접근성 표준을 준수한 우수 사이트에 대한 품질을 인증하고 마크를 부여하는 제도

 

웹 개발 추천 에디터

Sublime Text

무료. 상대적으로 가볍고 성능저하가 적은 편이라고 한다. 

 

Atom

무료. GitHub에서 만든 텍스트 에디터.

확장 기능도 충분하고 외국에서 인기가 많다고 한다.

Windows에서의 사용은 아쉬운 부분이 많다.

macOS에서는 문서 작업시 자주 사용한다.

 

Brackets

무료. Adobe에서 만든 텍스트 에디터.

Creative Cloud 제품군이 아니고 오픈소스로 풀려있다.

Live Preview 기능이 기본적으로 제공되는 등 시각적인 결과물을 확인하는데 특화되어 있으나 확장 기능이나 특히 성능 최적화에 대해선 아쉬운 감이 있다.

 

VS Code

무료. Microsoft에서 만든 텍스트 에디터.

가볍게 시작할 수 있고 확장 기능이 상당히 많다.

 

WebStorm

유료. JetBrain에서 만드는 통합 개발 환경(IDE) 프로그램 중 하나.

별도의 확장 기능이 거의 필요 없으며 대부분의 프로젝트를 바로 시작할 수 있다.

한 번 쓰면 다른 에디터로 넘어가기 어려울 정도로 편한 권장 프로그램이지만 유료이다..

 

VS Code 추천 확장기능

- Korean Language Pack for Visual Studioi Code

VS Code의 거의 모든 메뉴가 한국어로 변경된다.

 

- Beautify

코드 가독성을 위해 코드 작성 스타일을 예쁘게 수정한다. 

1. Preferences > Keyboard Shortcut 선택
2. HookyQR.beautify 를 검색
3. 키 바인딩 선택
4. 원하는 단축키 등록 (Ctrl + Alt + L 추천)

 

- Live Server

하단 상태바에서 Go Live 선택 또는 HTML 화면에서 우클릭 > Open with Live Server 선택

 

- Auto Rename Tag

태그 이름을 수정할 때 열린 태그와 닫힌 태그가 쌍으로 수정된다. 

 

- 그 외

• Terminal
• Live Sass Compiler
• Turbo Console log
• Better Comments
• Highlight Matching Tag
• GitLens
• REST Client

 

약어로 랩핑(Wrap)

1. 랩핑할 코드 선택
2. 모든 명령 표시 실행 / Ctrl + Shift + P
3. Emmet: Wrap with Abbreviation (Emmet: 약어로 랩핑) 를 입력하거나 목록에서 선택
4. div, span 등의 Emmet 문법 (ex. .wrapper, span.bold)을 입력
5. 완료

 

웹에서 사용하는 이미지

비트맵

비트맵(Bitmap)은 각 픽셀이 모여 만들어진 정보의 집합으로 레스터(Raster) 이미지라고도 부른다.

픽셀 단위로 화면에 렌더링 한다.

우리가 일반적으로 사용하는 대부분의 이미지가 비트맵 형식이다. 

그림판, 포토샵과 같은 툴로 편집할 수 있다.

 

벡터

벡터(Vector)는 수학적 정보의 형태(Shape)들이 만들어내는 결과물이다.

이미지가 가지고 있는 점, 선, 면의 위치(좌표), 색상 등의 정보를 온전히 가지고 있으며 그를 화면에 렌더링한다.

따라서 좀 더 많은 연산을 해야 하지만, 대신 해상도(픽셀)에 영향을 비트맵 이미지와 달리 해상도로 부터 자유롭게 렌더링 할 수 있다.

이미지를 확대 및 축소를 해도 이미지가 깨지지 않고, 수학적 정보만을 가지고 있기 때문에 이미지 확대/축소에 따른 용량 변화가 없다.

일러스트 같은 툴로 편집할 수 있다.

출처: HEROPY 블로그 

이미지 종류	장점	단점
비트맵	정교하고 다양한 색상을 자연스럽게 표현	확대/축소 시 계단 현상, 품질 저하
벡터	확대/축소에서 자유로움, 용량 변화가 없음	정교한 이미지(인물, 풍경사진)를 표현하기 어려움

 

이미지 포맷

기능	압축	표현 색상	Alpha Channel (투명도 지원)
JPG	- 손실 압축 - 높은 압축률(적은 용량)	- 24bit, 약 1600만 색상 - 고해상도 표시장치에 적합	X	이미지의 품질과 용량을 쉽게 조절 가능
PNG	비손실 압축	- 8bit, 256색상 - 24bit, 약 1600만 색상	O	W3C 권장 포맷
GIF	비손실 압축	- 8bit - 다양한 색상을 표현하는 작업에는 적합하지 않음		여러 장의 이미지를 한 개의 파일에 담을 수 있음(움짤, 애니메이션)
WEBP	손실/비손실 압축 지원		O	- 구글이 개발한 이미지 포맷 - GIF 같은 애니메이션 지원 - 완벽한 포맷! 그러나 지원 브라우저가..
SVG		해상도의 영향에서 자유로움		- 마크업 언어 기반의 벡터 그래픽을 표현하는 이미지 포맷 - CSS로 스타일링 가능 - Javascript로 Event Handling 가능 - 코드 혹은 파일로 사용 가능

 

오픈소스 라이선스

오픈소스란 어떤 제품을 개발하는 과정에 필요한 소스 코드나 설계도를 누구나 접근해서 열람할 수 있도록 공개하는 것.

현실적으론 처음부터 끝까지 모든 코드를 직접 작성할 수 없기 때문에 많은 경우 오픈소스에 의존하게 된다.

개인적인 사용을 목적으로는 문제가 없겠지만, 회사에서(상업적으로) 아무 생각 없이 사용하다가는 문제가 돼서 해고당하거나 피해 보상을 해줘야 할지도 모른다.

물론 인터넷에 떠도는 코드 몇 줄 복사해서 썼다고 그 정도 심각한 문제가 되진 않겠지만 항상 조심하는 것이 좋다.

회사에서 작업 중에 괜찮은 오픈소스를 찾았다면 반사적으로 'License'부터 찾는 것이 좋다!