startdeveloping웹 개발

웹 사이트 이미지 표현 방법 웹 사이트에서 이미지를 표현하는 방법은 세 가지가 있습니다. 세가지 방법을 아래에 기술해 보았습니다. 첫번째 - HTML 태그를 통해서 표현 img 태그를 사용하여 표현합니다. img 태그를 사용할 때는 웹표준을 준수하기 위해 의미가 있는 이미지를 사용합니다. 거의 의미가 없는 이미지는 CSS를 이용하여 표현해줍니다. 웹표준을 준수하기 위해서는 img태그의 alt 속성을 이용하여 어떤 이미지 인지 설명 해주어야 합니다. 두번째 - CSS 속성을 통해서 표현 CSS에서 이미지를 표현하기 위해서는 background 속성을 이용해서 이미지를 넣어줍니다. background-image를 이용하여 url( )에 이미지의 주소를 넣어줍니다. 주로 의미가 없는 이미지(배경, 색 표현)를..

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

검색엔진 최적화(SEO)란? 검색엔진 최적화(SEO)란 검색엔진이 이해하기 쉽도록 홈페이지의 구조와 페이지를 개발해 검색 결과 상위에 노출될 수 있도록 하는 작업을 말합니다. 기본적인 작업 방식은 특정 검색어를 웹 페이지에 적절하게 배치하고 다른 웹 페이지에서 링크가 많이 연결되도록 하는 것입니다. 검색엔진에 알고리즘이? SEO의 첫 단계는 구글, 네이버 등 타겟팅 하고 있는 검색엔진이 어떻게 동작하는지, 홈페이지 내 콘텐츠를 검색봇이 잘 인식해 수집해갈 수 있게 하려면 어떻게 구성해야 하는지를 알아야 합니다. 네이버의 경우, 블로그/카페/지식인 위주로 콘텐츠가 노출되기 때문에 독립적인 홈페이지에서 제공하는 콘텐츠로는 노출이 쉽지 않습니다. 즉, 동일한 내용의 콘텐츠라도 네이버 서비스 내에 자리잡은 콘텐..

시맨틱 태그 Semantic은 '의미의', '의미론적인'이라는 뜻을 가진 형용사이다. 따라서 시맨틱 태그란 의미가 있는 태그를 말한다. 나 과 같이 의미가 없는 태그는 태그 이름만 보고는 어떤 내용인지 전혀 유추할 수가 없는 반면, , , 등 의미가 있는 태그는 내용을 명확하게 정의한다. 종류 태그는 주제별 그룹의 콘텐츠 섹션을 나타낼 때 사용합니다. 태그는 소개 컨텐츠 및 네비게이션 링크를 포함한 섹션입니다. 태그는 네비게이션 링크를 정의합니다. 태그는 문서내에 독립적인 컨텐츠를 정의합니다. 태그는 사이트 푸터부분을 정의합니다. 태그는 문서내에 사이드 컨텐츠를 정의합니다. 태그는 웹 문서의 주요 콘텐츠 영역을 설정합니다. HTML5에 의미가 변경된 태그 태그는 HTML4에서는 href="#" 또는 hr..

HTML이란? HTML(Hyper Text Markup Language)을 각 단어의 뜻을 순서대로 살펴보며 HTML의 의미와 목적에 대해 알아보겠습니다. 하이퍼 텍스트(Hypertext)는 하이퍼 링크를 이용해 독자가 원하는 순서에 따라 기존 문서에서 다른 문서로 접근할 수 있는 텍스트입니다. 즉, 하이퍼 텍스트는 책처럼 한 장 한 장 차례대로 내용을 읽는 전통적인 텍스트 접근 방식이 아닌, 링크라는 통로를 통해 원하는 페이지로 바로 도착하는 접근 방식을 가지고 있습니다. 마크업(Mark Up)이란 어떠한 표시를 뜻하며, 마크업 언어(Markup Language)는 태그를 이용하여 문서나 데이터의 구조를 명시하는 언어를 지칭합니다. 이제까지의 설명을 종합해보면 HTML은 웹 페이지의 구조 혹은 데이터 ..

HTML의 구성요소 4가지 HTML의 구성요소는 요소(Element), 태그(Tag), 속성(Attribute), 변수(Arguments) 4가지가 있다. 요소(Element) - HTML에서 시작과 종료 태그로 나타내지는 모든 명령어들을 뜻한다. 태그(Tag) - 시작 태그와 종료 태그 두가지 종류가 있다. 시작 태그는 요소를 시작하고, 종료 태그는 요소를 끝내준다. 일부 태그 중에서는( 예시) 태그는 종료 태그가 없다.)종료 태그(단일 태그 (empty element))가 없는 것도 있다. 태그를 예를들어 써보면 와 이렇게 만들어진 것을 태그라고 한다. 속성(Attribute) - 시작부터 종료 태그 안에서 사용하는 것으로 구체화된 명령어를 말한다. 예시) 의 align이나 border라는 속성을 사..