xtring.dev

meta tag meta tag🔖는 description, keywords, author, 기타 메타데이터 정의에 사용됩니다. 메타 데이터는 브라우저와 검색엔진의 키워드(keyword) 등에 사용됩니다. meta tag에 다양한 정의를 통해 웹 사이트에 다양한 정의와 설명을 할 수 있습니다. HTML 문서의 사이에 위치할 수 있으며 semantic 태그이며 Empty element입니다. 🤓 대표적인 예들을 살펴봅시다. charset 속성은 브라우저가 사용할 문자셋을 정의합니다. keywords 속성을 사용하면 SEO(검색엔진 최적화)에 도움을 줄 수 있습니다. keywords를 정의함으로서 검색엔진의 필터에 우선으로 걸리게 해줄 수 있죠. rotbots은 검색로봇(검색엔진)에 대한 명령을 지정할 수 있..

이번 포스트에서는 시맨틱 웹에 대해서 설명드리겠습니다. 🤓 제가 갑자기 HTML을 다시 찾아보게 된 이유도 사실 이 때문입니다. Front end 개발자로 1년 넘게 일하면서 HTML을 잘 사용한다고 생각했지만 되돌아보니 막무가내로 바른 div와 none semantic하게 작성한 HTML 문서를 보고 현타가 왔기 때문입니다. 🥲그래서 다시 한번 알아보려고 해요. 부족하거나 틀린 부분에 대해서는 댓글을 달아주세요 .😁 🧐 시맨틱 웹(Semantic Web) 그게 뭘까요? 인터넷의 활성화를 시작으로 웹의 사용은 폭발적으로 늘어났습니다. 그에 따라 웹상에 축적된 정보의 지나친 비대로 인해 많은 문제에 봉착하게 되었습니다. 웹 기술은 축적된 방대한 데이터에 대하여 키워드(keyword)에 의한 정보접근만을 허..

HTML에는 HTML의 모든 요소들이 공통으로 사용할 수 있는 어트리뷰트가 있습니다. 🤓 이를 글로벌 어트리뷰트(Global Attribute)라고 합니다. 예외적으로 몇몇 요소에는 적용되지 않을 수 있지만, 글로벌 어트리뷰트는 대부분의 모든 요소에 사용될수 있습니다. 예시를 살펴볼까요? 녹색 글자들이 주로 사용되는 어트리뷰트입니다. 대표적인 글로벌 어트리뷰트는 아래와 같습니다. id 유일한 식별자를 요소에 지정합니다. id 명이 중복일 수 없습니다. class 스타일 시트에 정의된 class를 요소에 지정할 때 주로 사용합니다. 중복으로 지정이 가능합니다. hidden css의 hidden과 다르게 의미상으로도 브라우저에 노출하지 않게 됩니다. lang 지정된 요소의 언어를 지정합니다. 검색엔진의 크롤..

HTML 요소의 종류는 정말 많습니다. 그 중 content를 가질 수 없는 요소를 빈 요소(Empty element or Self-Closing element)라고 합니다. 말 그대로 요소 사이에 Content 없이 동작하는 요소라는 의미죠. 😃 따라서 빈 요소들은 어트리뷰트만을 가집니다. 아래 예시를 볼까요? React 프로젝트를 시작하면 자동으로 생성되어있는 meta 태그와 link 태그 입니다. 이 처럼 빈 요소가 사용될 때는 Content를 생략하기 때문에 의 형태를 보입니다. 빈 요소 중 대표적인 요소는 아래와 같습니다. 텍스트 안에 줄바꿈(*Carriage Return)을 생성합니다. 가로방향의 Division Line를 생성합니다. 이미지를 생성합니다. 사용자의 데이터를 받을 수 있는 대화..

1. Introduce Flexbox 기존의 웹 layout을 정의하는 방식 보다 세련되고 편한 방법을 제공합니다. Flexbox를 잘 알고 있다면 어떠한 Layout이라도 쉽고 빠르게 정의할 수 있습니다. 사이즈가 불명확하거나 동적인 경우에 효율적이며 쉽게 예측 가능하여 사용하기 편합니다. 웹 뿐만 아니라 React Native에서도 주로 사용되는 Position 방법이기 때문에 잘 알아두면 아주 쓸모가 있습니다! 기본적으로 웹에서는 div요소 즉 block 요소를 기본으로 수직정렬 상태를 가지고 있습니다. 이를 수평정렬하기 위해서는 1. 자식 요소(children)를 inlin-block으로 지정하고 2. `float` 속성 지정을 사용합니다. .item { display: inline-block; ..