1일차. HTML, CSS 기본적으로 알고있어야 하는 지식

웹 표준

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

이 표준 기술들을 기준으로 웹 브라우저들(크롬, IE, 사파리 등)이 만들어지는데 브라우저를 만드는 업체(구글, MS, 애플 등)에서 표준 기술을 해석하는 차이, 새로운 기술 삽입(표준화 제정 단계에 따른) 등으로 조금은 다르게 구동되는 브라우저가 생긴다.

표준화 제정 단계의 권고안(REC)에 해당하는 기술을 표준이라고 생각하면 쉽다.

크로스 브라우징

다양한 브라우저에서 동등하게 사용될 수 있도록 하는 것

웹 접근성

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

웹 콘텐츠 제작 기법

한국형 웹 콘텐츠 접근성 지침(http://www.websoul.co.kr/accessibility/WA_guide21.asp)

실무 가이드에 들어가서 실무에서는 어떻게 사용해야 할지 예시도 볼 수 있다.

웹 접근성 품질인증 마크

웹 접근성 표준을 준수한 우수 사이트에 품질 인증 마크를 부여하는 제도로 비용이 든다. 적지 않은 비용이어서 중소기업이나 개인은 적용하기 어렵다.

확장 프로그램 설치

beautify : 내가원하는 부분만 or 파일자체를 코드를 정리할 수 있다.

Live Server : 실시간 확인 가능.

유용한 단축키

- 찾기 / 대체 : cmd + alt + f

- 감싸기 : 예를들어 h1태그를 마우스 스크롤해서 블럭선택하고 cmd + shift + p > wrap > div 치면 h1태그가 div로 감싸진다. div.class 이렇게도 가능하다.

비트맵과 벡터 이미지

비트맵(Raster) : 픽셀 단위로 화면에 렌더링 jpg, gif, png 등등 / 그림판, 포토샵과 같은 툴로 편집 가능

벡터 : 수학적 정보의 형태들이 만들어내는 결과물. 확대하거나 축소해도 깨지지 않는다. 해상도로부터 자유롭다. 수학적 연산으로 만들어지기 때문에 확대/축소시 용량변화가 없다. 일러스트로 편집할 수 있다. .svg

이미지 포맷

- JPG(JPEG)

손실 압축, 높은 압축률(적은 용량), 이미지 품질, 용량 쉽게 조절 가능, 가장 널리 쓰이는 이미지 포맷

- PNG

비손실 압축, 투명도 지원

- GIF

애니메이션 같은 이미지. 8비트 컬러만 지원

- WEBP

JPG, PNG, GIF를 모두 대체 가능. 구글이 개발한 이미지 포맷 / 손실, 비손실 압축 지원, gif같은 애니메이션 지원, 투명도 지원 / 그러나 브라우저 지원이.. 무엇인지정도만 알고 있고 나중에 상황에 따라 사용할 수 있을지 지켜본다.

- SVG

코드로 되어있는 svg, 파일로 되어있는 svg를 확인할 수 있다. 서로 변경할 수 있다. 벡터 방식이다. 해상도 영향에서 자유롭고 어느정도 CSS에서 사용이 가능하고 Javascript로 이벤트 핸들링 가능하다. 왜냐면 코드로 이루어져 있기 때문이다. 쉽지는 않지만 가능하다.

특수 기호

• ` : Grave
• ~ : Tilde
• • : 하이픈, 대쉬
• _ : 언더스코어, 로대쉬

라이선스

Apache License

개인적 / 상업적 이용, 배포, 수정, 특허 신청이 가능하다.

MIT License

개인 소스에 이 라이선스를 사용하고 있다는 표시만 지켜주면 되고 나머지 제약이 없어 인기가 많다.

(BSD License 도 동일, 그런데 소스코드를 긁어오면 소스코드 안에 표기되있을 것이라 지우지만 않으면 문제가 없다.)

Beerware

오픈소스 개발자에게 맥주를 사줘야 하는 라이선스이나 무료라고 사용하면 된다.