
엔티티 코드(Entity Code)란? 엔티티 코드란 Html 문서에서 특수 문자를 입력하기 위해 사용하는 코드 입니다. 요즘은 UTF-8을 주로 이용하기 때문에 특수문자가 깨지지 않지만 W3C는 엔티티 코드가 아닌 특수 문자는 오류로 인식하기 때문에 특수 문자는 엔티티 코드로 작성하는 것이 좋습니다. 사용 빈도수가 높은 엔티티 코드 정리 엔티티 코드 문자식 표현(Entity Code) 숫자식 표현(Entity Number) > › © © © " " " & & & (공백) 엔티티 코드(Entity Code) 참고 사이트 https://entitycode.com/ Entity Code - A Clear and Quick Reference to HTML Entities Codes About EntityCod..

svg svg 요소는 Scalable Vector Graphics를 의미하며, XML 기반의 W3C 그래픽 표준 권고안입니다. 기존에 사용해 왔던 canvas 요소로는 벡터(vector) 이미지를 표현할 수 없었습니다. 하지만 svg 요소는 픽셀 기반인 웹 페이지에서 픽셀의 영향을 받지 않는 벡터 이미지를 표현할 수 있게 해줍니다. 따라서 이 요소는 도표나 그래프 등 벡터 기반의 다이어그램(diagram)를 표현하는 데 매우 효과적입니다. 사각형 그리기 다음 예제는 rect 요소를 사용하여 사각형을 그리는 예제입니다. 사각형을 그리는데 사용하는 rect 요소의 속성은 다음과 같습니다. 선그리기 다음 예제는 line 요소를 사용하여 사각형을 그리는 예제입니다. 선을 그리는데 사용하는 line 요소의 속성은..

Canvas canvas 요소 canvas 요소는 웹 페이지에 그래픽을 그려주는 쉽고 강력한 방법을 제공합니다. 이 요소는 그래픽을 위한 컨테이너(container) 역할만을 수행합니다. 따라서 실제로 그래픽을 그리기 위해서는 자바스크립트(JavaScript) 등의 스크립트 언어를 이용해야 합니다. canvas 요소의 속성 canvas 요소는 테두리(border)도 콘텐츠(content)도 없는 웹 페이지 내의 단순한 사각형의 공간입니다. 그러므로 반드시 style 속성을 이용하여 캔버스의 크기를 설정해 주어야 합니다. canvas 요소를 스크립트(script)에서 접근하기 위해서는 해당 요소의 id 속성을 이용하면 됩니다. CSS 좌표 체계 HTML 그래픽 요소에서 사용하는 x, y, z좌표는 다음 그..

그리드 시스템 그리드 시스템(Grid System)이란, 페이지 콘텐츠를 논리적이고 일관성 있는 질서와 구조로 디자인할 수 있도록 돕는 그래픽 시스템을 말합니다. 여기서 그리드(Grid)는 사전적 의미로 '격자무늬' 또는 '격자판'을 의미하며, 디자이너는 아래 그림과 같이 격자 선에 맞춰 디자인에 규칙을 부여하여 페이지를 더 보기 좋고, 알기 쉽게 제작하는 데 도움이 됩니다. 웹 디자인에서 그리드 시스템은 페이지의 디자인 영역을 나누고, 각 영역에 디자인 요소를 배치하는 데 사용됩니다. 그리드 시스템은 웹 디자인에 있어 아래와 같은 긍정적인 역할을 합니다. 컬럼 단위로 요소를 구성하므로 많은 양의 콘텐츠도 정돈된 느낌을 준다. 격자 형식에 따르므로 블록을 쌓듯 디자인이 편리하다. 일관되고 통일성 있는 아..

SEO (검색엔진최적화) SEO(Search Engine Optimization, 검색엔진 최적화)란 웹사이트의 정보를 크롤링 하고, 순위를 매기는 방식에 맞도록 웹사이트를 수정, 조율을 하여 최적화 작업을 하고, 이를 통해 검색 결과(SERPs)의 상단에 타겟 웹사이트를 구글 상위 노출을 시켜 트래픽(방문자)을 높이는 디지털 마케팅 전략을 지칭합니다. SEO 설명 웹 페이지 검색엔진이 자료를 수집하고 순위를 매기는 방식에 맞게 웹 페이지를 구성해서 검색 결과의 상위에 나올 수 있게 한다. 웹 페이지와 관련된 검색어로 검색한 검색 결과 상위에 나오게 된다면 방문 트래픽이 늘어나기 때문에 효과적인 인터넷 마케팅 방법 중의 하나이며 비용처리 없는 마케팅이라고 할 수 있다. 기본적인 작업 방식은 특정한 검색어..

시멘틱 태그 시멘틱(Semantic) 태그란 의미에 맞게 태그를 작성하는 것을 의미합니다. 의미에 맞게 태그를 작성하여 브라우저나 개발자가 그 태그의 사용의미를 잘 받아들일 수 있도록 코딩하는 것이 중요합니다. 시맨틱 태그에 의해 컴퓨터가 HTML 요소의 의미를 보다 명확히 해석하고 그 데이터를 활용할 수 있는 시맨틱 웹이 실현될 수 있다. 시맨틱 웹이란 웹이 존재하는 수많은 웹페이지들에 메타데이터를 부여하여 기존의 잡다한 데이터 집합이었던 웹페이지를 의미와 관련성을 가지는 거대한 데이터 베이스로 구축하고자 하는 발상이다. 종류 태그명 설명 여러 문단을 묶는 태그, 독립적인 콘텐츠를 정의할 때 사용합니다. 콘텐츠나 페이지의 외곽에 위치한 요소들을 묶는 태그, 보통 퀵메뉴나 스크롤탑버튼등에 사용합니다. 일..

웹표준 이란? 최근 국내 웹 관련 업계에서는 웹 접근성 수준 향상에 대한 요구로 인해 웹 표준에 대한 관심이 고조되고 있습니다. 이처럼 웹 접근성 이슈를 통해 웹 표준이 주목을 받고 있는 이유는 웹 접근성 수준을 향상시킬 수 있는 다양한 방법론의 중심에 웹표준이 있기 때문입니다. 웹접근성 수준 향상의 최적의 방법론으로 관심을 모으고 있는 웹 표준이란, ‘웹에서 표준적으로 사용되는 기술이나 규칙’을 의미하는데, 이는 우리가 흔히 생각하는 표준(standard)과는 조금 다릅니다. 웹에서의 표준은 W3C의 토론을 통해 나온 권고안(recomendation)을 말하며, 권고안 이외 단계 수준의 스펙은 비표준이거나 독자확장 요소를 의미하기 때문에 구분하여 사용해야 합니다. 웹접근성 웹 사이트에서 제공하는 정보를..