SEO란 무엇인가?

Search Engine Optimization : 검색엔진 최적화 검색엔진에서 더 찾기 쉽도록 사이트를 개선하는 프로세스 https://velog.io/@hyacinta/SEO-Search-Engine-Optimization-%EA%B2%80%EC%83%89%EC%97%94%EC%A7%84-%EC%B5%9C%EC%A0%81%ED%99%94

Button 태그의 Default type은 무엇인가?

button에 type=”button”을 지정하는 이유는 Default가 아니기 때문이다 button의 type으로는 submit, reset, button 3가지 값이 있다. 아무런 값도 지정하지 않는다면 Default는 submit이 된다.

button의 Default는 submit이다.
button에 타입을 명시하지 않아도 사실 큰 문제는 없지만 form내부에서 혹은 하위 IE는 고려 해야함.
명확한 구분을 위해 submit이 아닌 button에는 type=”button>을 지정해주는것이 마크업 측면에서도 좋다

Section 태그와 article 태그의 차이점

section 태그는 섹션(부분, 구역, 영역) 들을 그룹화 해서 분리하는 역할을 한다. article 태그는 문서내에서 그룹화해서 분리하는 역할을 한다.

article과 section 이 두 시맨틱 태그는 div와 같은 블록 속성을 가지고 있기 때문에 div로 대치해도 기능상으로 문제가 없고 두 요소 다 콘텐츠를 구분하는 데 사용되며 서로 바꿔서 사용 가능하다.

section article 차이

https://moo-you.tistory.com/m/406

▷ article은 내용이 독립적이다. article 태그는 section과 다르게 독립적으로 존재할 수 있으며 재사용 할 수 있다. 즉 article이 좀 더 구체적이다.

▷ section은 주제별로 구분한 그룹이다. 논리적으로 관계있는 요소 또는 문서를 분리할 때 사용한다.

사용예시

<section>
  <h1>HOT TOPIC</h1>
  <section>
     <p>World</p>
     <article>World news 1</article>
     <article>World news 2</article>
     <article>World news 3</article>
  </section>
  <section>
    <p>Sport</p>
    <article>Sport news 1</article>
    <article>Sport news 2</article>
    <article>Sport news 3</article>
  </section>
</section>

※ 논리적인 관계가 없는 요소들을 그룹화 할 경우에는 div를 사용한다.

SVG 장점과 단점

svg란?

SVG(Scalable Vector Graphics)는 2차원 벡터 그래픽을 서술하는 XML 기반의 마크업 언어입니다. SVG는 텍스트 기반의 열린 웹 표준 중 하나로, 모든 사이즈에서 깔끔하게 렌더링 되는 이미지를 서술하며 CSS, DOM, JavaScript, SMIL (en-US) 등 다른 웹 표준과도 잘 동작하도록 설계됐습니다. SVG는 달리 말하자면 HTML과 텍스트의 관계를 그래픽에 적용한 것입니다. -MDN

장점은? 우리가 주로 알고 있는 레스터화 이미지 혹은 비트맵 이미지(JPG, GIF, PNG)와 비교했을때 SVG가 가져다주는 장점은 다음과 같습니다.

웹사이트 로딩 속도가 빠르다. 💨 SVG는 XML코드이기 때문에 파일의 크기가 작습니다. 사용 사례에 따라서 SVG는 60%에서 80%정도의 대역폭을 절감한다고 합니다. SVG는 HTML파일에 작성이 될 수 있기때문에 외부 이미지를 가져오기 위해서 HTTP request를 할 필요가 없습니다. 어떤 크기에서든 재활용이 가능 (Future Proof) ♻️ SVG는 크기에 따라 이미지가 왜곡되거나 품질이 떨어져 보이지 않습니다. 그렇기 때문에 하드웨어 해상도가 높은 디바이스에서도 품질 저하없이 볼 수 있습니다. SEO 친화적이다. 💻 XML코드에는 키워드, 설명, 링크 등이 포함될 수 있습니다. 그래서 해당 콘텐츠를 검색 엔진에서 더 쉽게 인실할 수 있도록 할 수 있습니다. 개발 효율 증대 효과 디자이너들은 Figma, Sketch 등에서 디자인한 작업물들을 SVG로 내보낼 수 있습니다. 직접 개발자가 SVG로 다운받을 수도 있습니다. 번거로운 작업을 줄일 수 있습니다. CSS로 디자인 수정이 가능하다. 또한 개발자는 SVG파일을 코드로 직접 변경할 수 있기때문에 디자이너에게 재요청 및 기다릴 필요가 없어지고 디자이너는 이미지를 수정할 필요가 없습니다. 단점은? 너무 복잡한 SVG는 비효율적일 수 있다. 많은 모양, 색상, 그라디언트를 포함하여서 파일 크기가 JPG나 PNG 보다 커지는 경우가 종종 있기 때문에 단점이 될 수 있습니다. 최적화 다양한 편집툴에서 내보내진 SVG 파일에는 중복되고 쓸모없는 정보가 많이 포함되어 있습니다. 예를 들어, 편집기의 메타 데이터, 주석, 숨겨진 요소가 있습니다. 최적화 되지 않은 경우에는 PNG보다 파일 크기가 커질 수 있기때문에 최적화를 할 수 있는 도구의 도움을 받는 것이 좋을 수 있습니다.

SVG 내부 도형에 대해 아는게 있나요?

사각형, 원, 폴리라인, 타원, 직선, 다각형

https://a11y.gitbook.io/graphics-aria/svg-graphics/svg-basic-shapes

html-웹 표준 및 웹 접근성2

웹 표준 및 웹 접근성2

개발 기본 상식