웹 표준 검사하기

강의 필기 🌸 웹 표준 검사 해주는 사이트 https://validator.w3.org/unicorn/?ucn_lang=ko Unicorn Nu Html Checker is now the default, for markup other than HTML5 you may use the legacy Markup Validator through custom task settings. validator.w3.org

CSS 초기화 (Eric Meyer CSS Reset 2.0)

태그 자체가 가지는 속성을 없애고 원하는 모양으로 만들기 위함 /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, ..

오픈소스 라이센스

강의 필기 🌸 Apache License 개인적/상업적 이용, 배포, 수정, 특허 신청 가능 🌸 MIT Licence 개인 소스에 이 라이센스를 사용하고 있다는 표시만 지켜주기 사용에 제약은 없음

JPG, PNG, GIF, WEBP, SVG

강의 필기 🌸 JPG(JPEG) 손실 압축 -> 용량은 적으나, 저장할수록 품질이 저하 표현 색상이 뛰어나 고해상도 표시장치에 적합 (24비트) 이미지 품질, 용량 조절이 쉬움 🌸 PNG 비손실 압축 -> 용량 축소 적음 8비트 / 24비트 동시 지원 Alpha Channel(투명도) 지원 ★ W3C 권장 포맷 ★ Gif의 대체 포맷으로 개발되었다 🌸 GIF 이미지 파일 내에 이미지 및 문자열 같은 정보들을 저장 가능 여러장의 이미지를 한 개의 파일에 담을 수 있음(움짤) 비손실 압축 8비트 컬러만을 지원 🌸 WEBP JPG, PNG, GIF를 모두 대체할 수 있는 구글이 개발한 이미지 포맷 완벽한 손실/비손실 압축 지원 GIF 같은 애니메이션 지원 투명도 지원 브라우저 지원 부족 🌸 SVG 마크업 기반..

비트맵과 벡터 이미지

강의 필기 🌸 비트맵(Bitmap) 각 픽셀이 모여 만들어진 정보의 집합, 레스터 이미지라고도 부름 정교하고 다양한 색상 표현, 해상도에 따른 품질 저하 🌸 벡터(Vector) 수학적 정보의 형태들이 만들어내는 결과물 이미지가 가지고 있는 점, 선, 면, 색상 등의 정보를 가지고 있어 화면에 렌더링, 연산이 필요하지만 해상도로부터 자유롭다. (확대, 축소해도 동일) .

웹 표준, 크로스 브라우징

강의 필기 🌸 웹 표준 웹에서 사용되는 표준 기술이나 규칙, W3C의 권고안에서 나온 기술들 웹 표준을 지키는 HTML 작성은 어떤 것일까 🌸 크로스 브라우징 다르게 구동되는 여러 브라우저에서 동일한 사용자 경험(UX)을 줄 수 있도록 제작하는 기술, 방법 대부분 IE에서 문제 없으면 이상 없다. 🌸 웹 접근성 일반 사용자부터 신체적, 환경적 제한이 있는 사용자를 포함해 모든 사용자들이 동등하게 접근할 수 있는 웹 콘텐츠를 제작하는 방법

언더바(_)와 하이픈(-)

파일명에는 - : 이름을 이어줌 태그에는 _ : 구분함

가변길이 테이블과 고정 길이의 header로 height 100% 맞추기

1. body와 저 header, title, content 태그를 감싸는 container의 height는 100 2. header는 height:50px; title은 height:59px; 일 때, content의 height: calc(100% - 109px); content 내부의 패딩으로 인해 109px가 늘어날 순 있다. 다른 방법도 있겠지만 고정 길이가 껴있을 때 해결 방법을 찾아보다가 이렇게 해결함 flex? 이용하는 것도 공부해보기

html5 구조

[HTML5] Semantic Tag, 의미론적 태그

Semantic HTML 학습목표 시맨틱 태그란 무엇인가 각 태그의 용도를 알아본다. 공부 내용 Semantic HTML 문서의 의미에 맞게, 각 요소의 의미에 맞게 HTML을 작성하는 것 웹을 의미있게 만든다. 이해하기 쉽다. Semantic 태그 의미론적 태그 설명 aside 광고와 같이 페이지의 내용과는 관계가 적은 내용들 details 기본적으로 화면에 표시되지 않는 정보들을 정의 figure 삽화나 다이어그램과 같은 부가적인 요소를 정의 header 화면의 상단에 위치하는 사이트나 문서의 전체적인 정보를 정의 footer 화면의 하단에 위치하는 사이트나 문서의 전체적인 정보를 정의 main 문서에서 가장 중심이 되는 컨텐츠를 정의 mark 참조나 하이라이트 표시를 필요로 하는 문자열 정의 nav..