728x90
반응형
웹 표준
웹 표준(Web standard)이란,
'웹에서 사용되는 표준 기술이다 규칙'을 의미,
W3C의 표준화 제정 단계의 권고안(W3C)에 해당되는 기술.
크로스 브라우징
크로싱 브라우징(Cross Browsing)이란 조금은 다르게 구동되는 여러 브라우저에서,
동일한 사용자 경험(같은 화면, 같은 동작 등)을 줄 수 있도록 제작하는 기술, 방법.
크롬 / 엣지 / 파이어폭스 / 오페라 / 웨일 / 스윙 / 사파리 / IE
웹 이미지
비트맵(Bitmap)
픽셀이 모여 만들어진 정보의 집합, 레스터(Raster) 이미지라고도 부름.
.jpeg .gif .png
장점 : 정교하고 다양한 색상을 자연스럽게 표현 가능.
단점 : 확대/축소 시 계단 현상, 품질 저하
| 이미지 종류 | 정의 |
| JPG(JPEG) | Full-color와 Gray-scale의 압축을 위해 만들어졌으며, 압축률이 훌륭해 사진이나 예술 분야에서 많이 사용. 손실 압축 (실질적으로 이미지가 손실되면서 압축된다.) 표현 색상도(24비트, 약 1600만 색상)가 뛰어남 이미지의 품질과 용량을 쉽게조절이 가능하다 가장 널리 쓰이는 이미지 포맷이다. The JPG image file type, typically pronounced jay-peg, was developed by the Joint Photographic Experts Group (JPEG) in 1992. The group realized a need to make large photographic files smaller, so that they could be more easily shared. |
| PNG | Gif의 대체 포맷으로 개발됨 비손실 압축 ( 이미지가 손실 되지 않지만 용량이 비교적 크다 ) 8비트(256 색상) / 24비트(약 1600만 색상) 컬러 이미지 터리 Alpha Channel 지원(투명도) W3C 권장 포맷 PNG is short for Portable Network Graphic, a type of raster image file. It's particularly popular file type with web designers because it can handle graphics with transparent or semi-transparent backgrounds. |
| GIF | 이미지 파일 내에 이미지 및 문자열 같은 정보들을 저장. 비손실 압축 여러 장의 이미지를 한 개의 파일에 담을 수 있음 (움짤, 애니메이션) 8비트 색상만 지원( 다양한 색상 표현에는 적합하지 않다) GIF, in full graphics interchange format, digital file format devised in 1987 by the Internet service provider CompuServe as a means of reducing the size of images and short animations. |
| WEBP | JPG, PNG, GIF를 모두 대체 할 수 있는 구글이 개발한 이미지 포맷 (IE 지원 불가) 완벽한 손실/비손실 압축 지원 GIF 같은 애니메이션 지원 Alpha Channel 지원(손실, 비손실 모두) *지원되는 브라우저를 확인하세요 |
2. 벡터(Vector)
점, 선, 면의 위치(좌표), 색상 등 수학적 정보의 형태(Shape)로 이루어진 이미지
Material Design(머터리얼 디자인)은 고품질 디지털 경험을 구출할 수 있도록 Google에서 만든 디자인 시스템(방식)입니다.
.svg
장점 : 확대/축소에서 자유로움, 용량 변화가 없음.
단점 : 정교한 이미지(인물, 풍경 사진 같은)를 표현하기 어려움.
| 이미지 종류 | 정의 |
| SVG | 마트업 언어(HTML / XML) 기반의 벡터 그래픽을 표현하는 포맷 해상도의 영향에서 자유로움 CSS와 JS로 제어 가능 파일 및 코드 삽입 가능 svg 이미지의 복잡한 코드를 css와 js로 디테일하게 제어하기는 매우 어렵기 때문에, 색상이나 일부 영역의 추가/제거 혹은 간단한 형태 생성 정도로 가볍게 사용합니다. |
특수 문자
| 특수 문자 | 속성 |
| ' | Backtick(백틱), Grave(그레이브) |
| ~ | Tilde(틸드) |
| ! | Exclamation mark(엑스클러메이션마크) |
| @ | At sign(앳 사인) |
| # | Sharp, Number sign(샵, 넘버, 우물 정) |
| $ | Dollar sign |
| % | Percent sign |
| ^ | Caret(캐럿) : ~ 이상 을 표현할 때 사용 |
| & | Ampersand (엠퍼센드) |
| * | Asterisk (에스터리스크), 별표 |
| - | Hyphen, Dash (하이픈, 대시, 마이너스) |
| _ | Underscore, Low dash(언더스코어, 로우대시, 밑줄) |
| = | Equals sign |
| " | Quotation mark |
| ' | Apostrophe |
| : | Colon (콜론) |
| ; | Semicolon |
| , | Comma |
| . | Period, Dot |
| ? | Question mark |
| / | Slash |
| | | Vertical bar (버티컬 바) |
| \ | Backslash |
| () | Parenthesis (퍼렌서시스, 소괄호, 괄호) |
| {} | Brace (브레이스, 중괄호) |
| [] | Bracket(브래킷, 대괄호) |
| <> | Angle Bracket (앵글 브래킷) |
핵심요소 정리
| 태그 명 | 정의 |
| div | [블록(상자) 요소] 특별한 의미가 없는 구분을 위한 요소(Division) |
| h1~6 | [블록(상자) 요소] 제목을 의미하는 요소 (Heading) 숫자가 작을수록 더 중요한 제목을 정의 |
| P | [블록(상자) 요소] 문장을 의미하는 요소 (Paragraph) |
| img | [인라인(글자) 요소] 이미지를 삽입하는 요소 (Image) |
| ul | [블록(상자) 요소] 순서가 필요없는 목록의 집합을 의미 (Unordered LIst) |
| li | [블록(상자) 요소] 목록 내 각 항목 (List Item) |
| a | [인라인(글자) 요소] 다른/같은 페이지로 이동하는 하이퍼링크를 지정하는 요소. (Anchor) |
| span | [인라인(글자) 요소] 특별한 의미가 없는 구분을 위한 요소 |
| br | [인라인(글자) 요소] 줄바꿈 요소 (Break) |
| input | [인라인 + 블록 요소] = inline-block 사용자가 데이터를 입력하는 요소 |
| label | [인라인(글자) 요소] 라벨 가능 요소(input)의 제목 |
| table | [테이블 요소] 표 요소, 행(Row)과 열(Column)의 집합 |
728x90
반응형
728x90
반응형
웹 표준
웹 표준(Web standard)이란,
'웹에서 사용되는 표준 기술이다 규칙'을 의미,
W3C의 표준화 제정 단계의 권고안(W3C)에 해당되는 기술.
크로스 브라우징
크로싱 브라우징(Cross Browsing)이란 조금은 다르게 구동되는 여러 브라우저에서,
동일한 사용자 경험(같은 화면, 같은 동작 등)을 줄 수 있도록 제작하는 기술, 방법.
크롬 / 엣지 / 파이어폭스 / 오페라 / 웨일 / 스윙 / 사파리 / IE
웹 이미지
비트맵(Bitmap)
픽셀이 모여 만들어진 정보의 집합, 레스터(Raster) 이미지라고도 부름.
.jpeg .gif .png
장점 : 정교하고 다양한 색상을 자연스럽게 표현 가능.
단점 : 확대/축소 시 계단 현상, 품질 저하
| 이미지 종류 | 정의 |
| JPG(JPEG) | Full-color와 Gray-scale의 압축을 위해 만들어졌으며, 압축률이 훌륭해 사진이나 예술 분야에서 많이 사용. 손실 압축 (실질적으로 이미지가 손실되면서 압축된다.) 표현 색상도(24비트, 약 1600만 색상)가 뛰어남 이미지의 품질과 용량을 쉽게조절이 가능하다 가장 널리 쓰이는 이미지 포맷이다. The JPG image file type, typically pronounced jay-peg, was developed by the Joint Photographic Experts Group (JPEG) in 1992. The group realized a need to make large photographic files smaller, so that they could be more easily shared. |
| PNG | Gif의 대체 포맷으로 개발됨 비손실 압축 ( 이미지가 손실 되지 않지만 용량이 비교적 크다 ) 8비트(256 색상) / 24비트(약 1600만 색상) 컬러 이미지 터리 Alpha Channel 지원(투명도) W3C 권장 포맷 PNG is short for Portable Network Graphic, a type of raster image file. It's particularly popular file type with web designers because it can handle graphics with transparent or semi-transparent backgrounds. |
| GIF | 이미지 파일 내에 이미지 및 문자열 같은 정보들을 저장. 비손실 압축 여러 장의 이미지를 한 개의 파일에 담을 수 있음 (움짤, 애니메이션) 8비트 색상만 지원( 다양한 색상 표현에는 적합하지 않다) GIF, in full graphics interchange format, digital file format devised in 1987 by the Internet service provider CompuServe as a means of reducing the size of images and short animations. |
| WEBP | JPG, PNG, GIF를 모두 대체 할 수 있는 구글이 개발한 이미지 포맷 (IE 지원 불가) 완벽한 손실/비손실 압축 지원 GIF 같은 애니메이션 지원 Alpha Channel 지원(손실, 비손실 모두) *지원되는 브라우저를 확인하세요 |
2. 벡터(Vector)
점, 선, 면의 위치(좌표), 색상 등 수학적 정보의 형태(Shape)로 이루어진 이미지
Material Design(머터리얼 디자인)은 고품질 디지털 경험을 구출할 수 있도록 Google에서 만든 디자인 시스템(방식)입니다.
.svg
장점 : 확대/축소에서 자유로움, 용량 변화가 없음.
단점 : 정교한 이미지(인물, 풍경 사진 같은)를 표현하기 어려움.
| 이미지 종류 | 정의 |
| SVG | 마트업 언어(HTML / XML) 기반의 벡터 그래픽을 표현하는 포맷 해상도의 영향에서 자유로움 CSS와 JS로 제어 가능 파일 및 코드 삽입 가능 svg 이미지의 복잡한 코드를 css와 js로 디테일하게 제어하기는 매우 어렵기 때문에, 색상이나 일부 영역의 추가/제거 혹은 간단한 형태 생성 정도로 가볍게 사용합니다. |
특수 문자
| 특수 문자 | 속성 |
| ' | Backtick(백틱), Grave(그레이브) |
| ~ | Tilde(틸드) |
| ! | Exclamation mark(엑스클러메이션마크) |
| @ | At sign(앳 사인) |
| # | Sharp, Number sign(샵, 넘버, 우물 정) |
| $ | Dollar sign |
| % | Percent sign |
| ^ | Caret(캐럿) : ~ 이상 을 표현할 때 사용 |
| & | Ampersand (엠퍼센드) |
| * | Asterisk (에스터리스크), 별표 |
| - | Hyphen, Dash (하이픈, 대시, 마이너스) |
| _ | Underscore, Low dash(언더스코어, 로우대시, 밑줄) |
| = | Equals sign |
| " | Quotation mark |
| ' | Apostrophe |
| : | Colon (콜론) |
| ; | Semicolon |
| , | Comma |
| . | Period, Dot |
| ? | Question mark |
| / | Slash |
| | | Vertical bar (버티컬 바) |
| \ | Backslash |
| () | Parenthesis (퍼렌서시스, 소괄호, 괄호) |
| {} | Brace (브레이스, 중괄호) |
| [] | Bracket(브래킷, 대괄호) |
| <> | Angle Bracket (앵글 브래킷) |
핵심요소 정리
| 태그 명 | 정의 |
| div | [블록(상자) 요소] 특별한 의미가 없는 구분을 위한 요소(Division) |
| h1~6 | [블록(상자) 요소] 제목을 의미하는 요소 (Heading) 숫자가 작을수록 더 중요한 제목을 정의 |
| P | [블록(상자) 요소] 문장을 의미하는 요소 (Paragraph) |
| img | [인라인(글자) 요소] 이미지를 삽입하는 요소 (Image) |
| ul | [블록(상자) 요소] 순서가 필요없는 목록의 집합을 의미 (Unordered LIst) |
| li | [블록(상자) 요소] 목록 내 각 항목 (List Item) |
| a | [인라인(글자) 요소] 다른/같은 페이지로 이동하는 하이퍼링크를 지정하는 요소. (Anchor) |
| span | [인라인(글자) 요소] 특별한 의미가 없는 구분을 위한 요소 |
| br | [인라인(글자) 요소] 줄바꿈 요소 (Break) |
| input | [인라인 + 블록 요소] = inline-block 사용자가 데이터를 입력하는 요소 |
| label | [인라인(글자) 요소] 라벨 가능 요소(input)의 제목 |
| table | [테이블 요소] 표 요소, 행(Row)과 열(Column)의 집합 |
728x90
반응형
