개발자 지오의 블로그

마크업 언어 또는 마크업 랭귀지란 문서 내에서 요소를 정의하는 데 태그(tags)를 사용하는 컴퓨터 언어입니다. 이는 사람이 읽을 수 있는 방식으로 작성되는데 즉, 전형적인 프로그래밍 구문이 아닌 일반적인 단어를 사용하곤 합니다. 가장 잘 알려진 마크업 언어는 HTML과 XML입니다. 마크업 용어의 유래 마크업은 과거 조판사(typist)들이 손으로 쓴 원고를 어떻게 조판하고 해야 하는지를 지시하는 따옴표로 강조된 문구들이라는 의미였습니다. 오늘날 html 또한 과거의 타이피스트들과 마찬가지로 태그를 통해 특정 정보를 화면에 어떻게 출력할지를 결정하죠. 마크업과 HTML/ XML의 구성 HTML은 웹페이지를 만드는 데 사용되는 마크업 언어로, 각 웹페이지는 HTML 태그를 통해 구성됩니다. , , 들은 ..

HTML 2020. 5. 15. 15:45

모바일이나 태블릿이 등장하기 전, 웹페이지는 컴퓨터 스크린에 최적화되어 있었죠. 그러나 오늘날엔 사람들이 자신의 모바일 기기로 웹을 탐방하는 경우가 더 많아졌기에, 이를 반응형으로 디자인 최적화 하는 과정이 필요합니다. 이때 필요한 것이 viewport기능입니다. 뷰포트(viewport)란 사용자가 웹페이지를 보는 영역인데요. 이는 모바일, 컴퓨터 등 사용자의 기기에 따라 달라집니다. Viewport 설정하기 웹페이지 크기를 기기에 따라 최적화 시켜주는 viewport는 HTML5에서 도입되었는데요. 이는 태그를 통해 사용할 수 있습니다. 요소를 하나씩 살펴보겠습니다. 먼저, viewport 요소를 통해 브라우저에게 페이지를 제어하도록 명령합니다. 다음으로 나오는 content=width=device-w..

HTML 2020. 5. 8. 13:24

웹사이트를 어떻게 최적화 할 수 있을까요? 검색 엔진은 보통 봇을 통해 사용자의 html 파일을 다운로드 하고, 이를 기준에 따라 분류한 다음 사용자의 검색에 알맞은 웹사이트를 제공하는데요. 검색 엔진 최적화의 기본은 HTML 태그를 의미론적으로 최적화하는 것입니다. 이번 포스팅에서는 웹사이트 검색 엔진 최적화 방법에 대해 자세히 알아보도록 하겠습니다. 타이틀 태그 사용하기 타이틀 태그 title는 검색 엔진에게 특정 웹페이지의 주제를 알려주는 것입니다. 이를 통해 검색 엔진은 페이지의 주제를 쉽게 파악할 수 있습니다. 해당 태그는 태그 내에 위치하고 있어야 하며, 웹페이지 내용을 적절하게 반영하는 것이어야 합니다. description 메타 태그 활용하기 description 메타 태그에 사용한 내용은..

HTML 2020. 5. 5. 17:41

안녕하세요. 지오입니다. 이번 포스팅에서는 메타(meta) 태그란 무엇이며 이를 사용하는 이유에 대해 알아보도록 하겠습니다. 간략히 말하자면, 메타 태그를 사용하는 이유는 HTML을 통해 만든 웹페이지를 보다 브라우저가 개괄적으로 판단할 수 있게 하기 위해서입니다. 우리는 웹을 훑어보고 어떤 주제와 내용을 담고 있는지 살펴볼 수 있습니다. 그러나 브라우저는 그렇지 못하며, 따라서 메타 태그를 설정해 줌으로써 브라우저가 웹을 더욱 잘 이해할 수 있게 도와주는 것입니다. 즉, 메타 태그를 통해 웹에 대한 개략적인 정보를 제공하여 브라우저가 이를 보다 체계적으로 분류할 수 있게 하는 것입니다. 가장 일반적으로 널리 사용되는 태그는 일 것입니다. 이는 브라우저가 웹페이지를 해석하는 방식(디코딩)을 지정해주는 것..

HTML 2020. 5. 5. 15:23

안녕하세요. 지오입니다. 오늘은 HTML에서 이미지 태그를 사용해 화면에 이미지를 출력하는 방법에 대해 알아보도록 하겠습니다. 웹 페이지에 이미지를 추가하기 위해 img 태그를 사용할 때는 src 와 alt 속성을 함께 부여해줘야 합니다. 사용 방법은 다음과 같습니다. 참고로, 이미지를 사용할 때 이는 실제로 HTML 페이지에 삽입되는 것이라기 보다는 웹페이지에 이를 연결해 표현해 준다고 보는 것이 정확합니다. img 태그와 함께 사용되는 속성들 img 태그와 가장 먼저 사용하는 속성은 이미지 파일의 위치를 지정해 주는 src 속성인데요. 이뿐만 아니라, width, height 등을 통해 이미지의 폭과 높이를 조절할 수 있습니다. 이미지에 부여되는 alt 속성은 Alternative Text라는 의미로..

HTML 2020. 5. 5. 15:14

개발 도구란 사용하는 개발 언어를 보다 쉽고 편리하게 사용할 수 있게 해주는 도구죠. 저는 생활 코딩에서 추천한 아톰(ATOM)을 현재 사용 중인데요. ATOM을 설치한 다음에는 확장 툴인 EMMET을 설치하면 몇 가지 확장 기능을 통해 보다 수월한 코딩이 가능합니다. 확장 툴을 설치하려면 ATOM - SETTING - INSTALL에서 Emmet을 검색하시면 되공요. Emmet 설치 후 특정 태그를 입력하고 TAB을 누르면, 자동으로 닫히는 태그가 형성되는 등 보다 간편한 코딩을 할 수 있습니다. Emme을 활용하면 여러 리스트를 한 번에 만들 수도 있는데요. ol>li*4라고 입력 후 TAB키를 누르면 다음과 같은 코드가 완성됩니다. 또한 태그와 내용 간의 빠른 이동을 원할 경우 옵션키와 좌우 방향키..

HTML 2020. 5. 4. 16:41

HTML에서는 문서를 시작하기 전에 을 선언합니다. 이는 자신이 작성한 코드가 HTML5 표준을 따라 작성되었음을 브라우저에게 알려주기 위함인데요. 은 태그가 아니기에, 이를 문서의 처음에만 사용하고 태그처럼 닫아주지 않아도 됩니다. DOCTYPE(Document Type)을 굳이 선언해주는 이유는 HTML의 발달 역사 때문입니다. 이제까지 HTML은 HTML 4.0 등, XHTML 1.1 등의 수정과 보완을 반복해 왔기 때문에, 브라우저는 사용자가 어떤 버전에 기반해 코드를 작성했는지 사실상 알 길이 없습니다. 따라서, 을 통해 해당 문서가 오늘날 사용하는 HTML5 표준을 따라 작성되었음을 알려주는 것입니다. 참고로, 은 대소문자를 구분하지 않기 때문에, , 등으로도 표현할 수 있습니다.

HTML 2020. 5. 4. 16:13

안녕하세요. 지오입니다. 오늘은 HTML이란 무엇이며 이는 어떠한 구조를 갖는지 포스팅해보려 합니다. 또한, HTML에서 가장 기본적으로 사용되는 코드의 의미와 이를 사용하는 방법에 대해서도 알아보도록 하겠습니다. HTML이란? HTML은 Hyper Text Markup Language의 줄임말인데요. Hyper Text는 링크 기능을 의미하며, Markup은 마크업이라는 형식을 가졌다는 의미이고, Language는 언어를 의미하죠. 즉, HTML은 하이퍼 텍스트 기능을 가진 마크업 형식 언어이라 할 수 있습니다. HTML에는 버전이 존재하는데, 2020년 5월 현재는 HTML 5를 사용하고 있습니다. HTML 5는 2008년에 출시되었고, 계속해서 추가적인 기능들이 탑재되고 있습니다. HTML은 그 자..

HTML 2020. 5. 1. 12:06