개발자 지오의 블로그

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

HTML 2020. 5. 8. 13:24

안녕하세요. 지오입니다. 개발 공부 5일차. 오늘은 생활코딩 클라이언트 HTML을 모두 수강했습니다. 그간 웹페이지의 기본도 모르고, 티스토리 스킨 개발에 주먹구구 식으로 뛰어들려 했던 제 자신이 넘모나 부끄러워졌습니다. 다음 코스로는 이제 생활 코딩에서 본격적으로 WEB 섹션을 수강하려 합니다. CSS부터 시작해서 자바스크립트, Node.js, PHP까지 진도를 빼보려고 합니다. 초보자여서 그런지, 그리고 생활 코딩이 정말 쉽게 알려줘서 그런지 재미는 있습니다. 이런 게 초심자의 행운과 비슷한 게 아닌가 싶기도 합니다. 개발자로 밥 벌어 먹고 살고 싶은 마음도 한 켠에 있지만, 제가 정말로 개발을 배우고 싶은 이유는 이를 통해 '추상적인 생각'을 '실물적으로 구체화'할 수 있기 때문입니다. 삶의 많은 ..

개발 공부 일지 2020. 5. 5. 17:47

웹사이트를 어떻게 최적화 할 수 있을까요? 검색 엔진은 보통 봇을 통해 사용자의 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

안녕하세요. 지오입니다. 이번 달은 티스토리 스킨을 자체 제작해 보는 것을 목표로 공부를 하고 있는데요. 기초가 부족하다는 걸 다시 한 번 깨닫고 생활 코딩의 HTML을 수강하고 있습니다. 이전에 생활 코딩에서 파이썬을 흥미롭게 배울 수 있었기에, 여러 강좌 중에서도 망설임 없이 생활 코딩에서 강의를 듣기 시작했습니다. 이렇게 된 거, HTML 수강을 마치고 혼자서 뻘짓을 계속 하느니 커리큘럼을 쭉 이수하는 게 좋겠다는 생각이 듭니다. 참고로 이제까지 파이썬 기초와 자바스크립트 강좌를 하나씩 수강했는데, 아직까지 이를 유기적으로 활용하는 방법에 대해서는 전혀 감이 없는 거 같습니다. HTML을 시작으로 CSS, JavaScript, PHP를 배워서 결과물이라 할 수 있을만한 웹 개발을 진행해보고 싶습니다..

개발 공부 일지 2020. 5. 4. 22:10

개발 도구란 사용하는 개발 언어를 보다 쉽고 편리하게 사용할 수 있게 해주는 도구죠. 저는 생활 코딩에서 추천한 아톰(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