FrontEnd/HTML

<section>과 <article>의 차이

Section과 Article, 언뜻보면 비슷한 사용시기 혼용하여도 문제는 없지만 엄연히 다른 두 태그 무엇이 다를까? 우선 각각의 역할을 알아보자 section section 태그는 섹션(부분, 구역, 영역) 들을 그룹화 해서 분리하는 역할을 한다. article article 태그는 문서내에서 그룹화해서 분리하는 역할을 한다. 의미상에서는 비슷한 article과 section 두 태그는 div와 같은 블록 속성을 가지고 있기 때문에 div로 대치해도 기능상으로 문제가 없고 두 요소 다 콘텐츠를 구분하는 데 사용되며 서로 바꿔서 사용 가능하다. 하지만 정확히 무슨 차이가 있고, 언제 사용해야 할까? ▷ article은 내용이 독립적이다. article 태그는 section과 다르게 독립적으로 존재할 수..

Cross Browsing의 의미

Cross Browsing이란 적어도 표준 웹 기술을 채용하여 다른 기종 혹은 플랫폼에 따라 달리 구현되는 기술을 비슷하게 만듦과 동시에 어느 한쪽에 최적화되어 치우지지 않도록 공통 요소를 사용하여 웹페이지를 제작하는 기법을 말하는 것이다. 또한, 지원할 수 없는 다른 웹브라우저를 위한 장치를 구현하여 모든 웹브라우저 사용자가 방문했을 때 정보로서의 소외감을 느끼지 않도록 하는 방법론적 가이드를 의미하는 것이다. 이는 인터넷 환경 자체가 일반 테스크톱 웹 브라우저 뿐만 아니라 모바일, 임베디드 기기, 홈 네트 워킹용 장비 등 아주 다양한 인터넷 환경이 존재하며, 일반인, 장애자, 노약자, 어린이 등 다양한 사용자가 존재하기 때문이다. -한국소프트웨어진흥원 공개SW지원센터-Cross Browsing 가이드..

CORS란?

웹에서 외부 Api 호출 등의 이유로 발생할 수 있는 에러인 CROS에 대해 정리해보려한다. CORS란? Cross-Origin Resource Sharing의 줄임말로, 한국어로는 교차-출처 리소스 공유라고 한다. 교차 출처가 무엇이냐, 쉽게 말해 다른 출처라고 말할 수 있다. URL 구조 출처가 무엇인지 알아보기 위해서는 URL 의 구조를 살펴보아야 한다. 서버의 위치를 의미하는 https://google.com 과 같은 URL 은 사실 여러 요소로 이루어져 있다. 여기서 Protocol / Host / (port번호) 가 URL의 출처이다. 💡 포트번호가 생략이 가능한 이유는 http, https 프로토콜의 기본 포트번호가 정해져 있기 때문이다. http://dsfds.com:870 과 같이 포트번..

HTML 기술 정리

HTML5를 개방형 웹 플랫폼으로 간주할 때, HTML5의 구성 요소는 무엇인가? main, footer, nav 등 의미론적 태크(semantic tag)가 추가돼, 콘텐츠의 구조를 더 명확히 설명할 수 있다. 더 새롭고 혁신적인 방법으로 서버와 통신할 수 있게 되었다. 브라우저의 로컬 스토리지를 활용하여, 웹 페이지가 브라우저에 데이터를 로컬로 저장할 수 있게 되었다. 이를 통해, 오프라인에서도 효율적으로 작동할 수 있게 되었다. 플러그인의 도움 없이 비디오나 오디오를 웹에서 조작할 수 있게 되었다. 컴퓨터 하드웨어의 성능 최적화와 개선으로 더 나은 사용을 제공한다 다양한 입출력 장치의 사용을 허용한다. 사용자가 더 세련된 테마를 사용할 수 있다. 2D/3D 그래픽과 효과를 사용할 수 있어, 훨씬 다..