코딩 공부 코딩 공부

엔티티(Entity)란? HTML에는 미리 예약된 몇몇 문자가 있으며, 이러한 문자를 HTML 예약어(reserved characters)라고 부릅니다. 이러한 HTML 예약어를 HTML 코드에서 사용하면, 웹 브라우저는 그것을 평소와는 다른 의미로 해석합니다. 따라서 HTML 예약어를 기존에 사용하던 의미 그대로 사용하기 위해 별도로 만든 문자셋을 엔티티(entity)라고 합니다. 엔티티의 형태는 다음과 같습니다. 문법 &엔티티이름; 또는 &#엔티티숫자; 다음 예제는 HTML 코드 내에서 꺾쇠괄호()를 사용하면 웹 브라우저가 그것을 어떻게 해석하는지 보여줍니다. 예제 태그는 두 번째로 큰 제목을 나타내는 태그입니다. 태그는 단락을 나타내는 태그입니다. 위의 예제처럼 HTML 코드에서 사용된 꺾쇠괄..

수많은 웹사이트들은 다양한 디자인과 구조들을 가지고 있습니다. 그러나, 실제로 내부를 들여다 보면 대부분 비슷한 구조를 가지고 있음을 알수 있습니다. 아래에 있는 그림과 같이, 웹사이트의 디자인 관점에서 크게 4가지로 나눌수 있습니다. 헤더 및 푸터의 경우는 모든 페이지에서 같은 내용이 보여지도록 되있습니다. 즉, 한번 만 헤더 및 푸터를 만들어 놓으면 모든 페이지에서 자동으로 보여지게 되는 것입니다. 내용을 변경하는 경우도 마찬 가지 입니다. 해더나 푸터의 내용을 한번 만 변경하면 모든 페이지에서 자동으로 변경이 됩니다. 이 부분에 착안해서 웹사이트에서 항상 보여질 필요가 있는 컨텐츠들을 헤더나 푸터에 넣으면 좋습니다. 메인 컨텐츠 부부은 웹사이트의 실제 내용이 들어가는 부분 입니다. 만약 ABOUT ..

HTML은 뼈대를 만드는 언어므로, 구역을 나눠주는 태그들이 있습니다. 1. div는 페이지를 논리적인 구간이나 그룹으로 나누어 줍니다. div를 사용하는 이유는 페이지를 논리적으로 구분해서 다른 사람들이 이해하기 쉽고, 관리도 편하게 할 수 있으며 한 구간마다 스타일을 적용할 수 있기 때문입니다. 구역1 구역2 2. 태그 p태그는 문단을 나누는 요소입니다. first paragraph second paragraph new line third paragraph 3. 태그 정렬되지 않은 태그를 말하며 ui 태그를 사용할때는 항상 li 태그를 같이 사용해야 합니다. 리스트를 나타낸다 ul이랑 같이 사용한다. 4. 태그 정렬된 태그들을 말합니다. 아메리카노 카페라떼 핫초코 녹차 홍차 자스민차

비트맵 그래픽 비트맵 그래픽은 특정 색상 값을 갖는 점(픽셀)의 배열로 이미지를 표현하는 방식이다. 대표적인 비트맵 그래픽인 jpeg, gif, png 형식의 이미지 파일을 확대하다보면 아래의 그림 좌측과 같이 이미지가 손상되는 현상이 발생한다. 비트맵 그래픽은 고정된 크기의 틀에 픽셀이라는 단위로 점을 찍어서 이미지를 표현하기 때문에 원본 크기보다 이미지를 확대하면 이미지가 손상되는 결과가 발생한다. 그러나 비트맵 그래픽은 단순히 데이터의 배열로써 이미지를 표현하기 때문에 컴퓨터가 연산하기 용이하다. 따라서, 비트맵 그래픽은 하드웨어의 자원을 적게 소모하는 장점이 있다. 벡터 그래픽 벡터 그래픽은 픽셀의 배열로 이미지를 표현하는 것이 아니라 실제로 이미지에 표현되는 점에 대한 정보를 저장하여 이미지를 ..

웹표준이란? 웹 표준이란 HTML5 기준으로 W3C에서 2014년도에 공식으로 표준화한 HTML의 법이라 볼 수 있습니다. 웹에서 표준으로 사용되는 기술이나 규칙이 생기고 개발자들이 이를 따름으로써 어느 정도 틀이 통일되고 효율이 높아졌습니다. 모바일 환경에서도 대응이 더욱더 쉽게 가능해졌으며, 검색엔진 최적화에도 도움이 되었습니다. 또한 다양한 브라우저에서 호환할 수 있게 개발이 가능해졌습니다. 웹 표준은 선택사항이 아닌 필수사항이 되었고, 꼭 표준에 맞게 HTML과 CSS 코드를 작성하는 게 좋습니다. 웹표준의 효과 1. 웹접근성의 향상 2. 구조와 표현의 분리 3. 호환성 확보 4. 작업, 유지보수 속도의 향상 웹접근성이란? 웹 사이트, 도구, 기술이 일반인, 장애인, 고령자 등 모두가 차별없이 사..

SEO(검색 엔진 최적화) 검색 엔진 최적화(search engine optimization, SEO)는 검색 엔진으로부터 웹사이트나 웹페이지에 대한 웹사이트 트래픽의 품질과 양을 개선하는 과정이다. 웹 페이지 검색엔진이 자료를 수집하고 순위를 매기는 방식에 맞게 웹 페이지를 구성해서 검색 결과의 상위에 나올 수 있게 한다. 웹 페이지와 관련된 검색어로 검색한 검색 결과 상위에 나오게 된다면 방문 트래픽이 늘어나기 때문에 효과적인 인터넷 마케팅 방법 중의 하나이며 비용처리 없는 마케팅이라고 할 수 있다. 기본적인 작업 방식은 특정한 검색어를 웹 페이지에 적절하게 배치하고 다른 웹 페이지에서 링크가 많이 연결되도록 하는 것이다. 구글 등장 이후 검색 엔진들이 콘텐츠의 신뢰도를 파악하는 기초적인 지표로 다른..

그리드 시스템이란? 그리드(Grid)는 사전적 의미로 '격자무늬'또는 '격자판'을 의미합니다. 그리드 시스템(Grid System)이란, 페이지 콘텐츠를 논리적이고 일관성 있는 질서와 구조로 디자인 할 수 있도록 돕는 그래픽 시스템을 말합니다. 그리드 시스템은 1970년대 중반부터 건축, 일러스트레이션, 책, 신문과 같은 다양한 분야에 사용되어 왔는데, 인터넷 보급 후 기술의 발전에 따라 웹 디자인에도 사용되기 시작했습니다. 웹 디자인에서 그리드 시스템은 페이지의 디자인 영역을 나누고, 각 영역에 디자인 요소를 배치하는 데 사용됩니다. 그리드 시스템은 웹 디자인에 있어 아래와 같은 긍정적인 역할을 합니다. 컬럼 단위로 요소를 구성하므로 많은 양의 콘텐츠도 정돈된 느낌을 준다. 격자 형식에 따르므로 블록을..

HTML이란? 'HyperText Markup Language'의 약자이며 웹 문서를 표현하기 위한 언어입니다. 하이퍼텍스트란 웹 문서에서 다른 문서로 이동하는 것을 말하며, 마크업이란 태그를 사용하여 콘텐츠의 의미를 부여하는 것을 말합니다. HTML은 제목, 단락, 목록 등과 같은 본문을 위한 구조적 의미를 나타내는 것뿐만 아니라 링크, 인용과 그 밖의 항목으로 구조적 문서를 만들 수 있는 방법을 제공합니다. HTML의 구성 요소 1. 태그(tag) HTML에서 사용하는 명령어는 태그(tag)라고 하는데 꺽쇠괄호""를 사용하여 나타냅니다. 일반적으로 태그는 시작과 끝을 표시하는 2개의 쌍으로 이루어져 있으나 "img", "br"등의 태그와 같이 시작태그만으로 그 영향을 나타내는 경우도 있으며, 종료 태..