DOCTYPE 🔥
DOCTYPE에 대하여 설명하시오
Document Type Declaration(DTD)
해당 문서가 어떤 형식을 갖추고 있는지 선언하는 것이다.
예를 들어, 우리가 보통 태그 정의 전에 <!DOCTYPE html> 이걸 써주는데, 문서 타입이 html5임을 알리는 역할을 한다.
참고로, html4는
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
이렇게 선언해줘야 함.
왜 DTD 선언을 해줘야하나면, 문서 형식을 정의해주지 않을 경우 브라우저는 이 문서를 Quirks Mode(쿼크 모드)로 해석한다. 이 모드는 오래된 웹페이지도 열려고 사용되기 때문에, 우리가 의도한 대로 렌더링이 안 될 가능성이 높다.
meta 태그에 대해서 알고 있나요?
meta 태그의 요소에 대해서 아는대로 말해보세요
메타 태그란? 웹 페이지의 메타 데이터를 표시하기 위한 태그다.
메타 데이터란? 페이지에 렌더링되는 요소는 아니지만, 이 페이지의 제목이나 설명, 주요 키워드 등 웹 페이지에 대한 정보를 제공하는 데이터이다.
메타 태그의 요소로는, name, http-equiv, content, charset 등이 있습니다. name은 메타 데이터의 이름을 담을 수 있다. 설명을 담는 description이나, 키워드를 담는 keywords, viewport, robots 등이 있다.
<meta http-equiv="refresh" content="3;url=https://www.mozilla.org" />http-equiv는 http 요청의 헤더의 정보를 담을 수 있다. 예를 들어, content-type이나, refresh 시간을 정해줄 수 있다.
<meta name="description" content="hello world!" >content에는 name 또는 http-equiv의 특성 값을 담을 수 있다. 예를 들어, name을 description로 지정했다면, content엔 설명에 들어갈 내용을 채울 수 있다.
<meta charset="utf-8" />charset에는 문자인코딩 방식을 담을 수 있다. utf-8은 전세계적인 문자 집합으로, 이를 쓰면 거의 모든 문자를 취급할 수 있게 된다.
자세한 내용: https://developer.mozilla.org/ko/docs/Web/HTML/Element/meta/name
웹 표준 및 웹 접근성 🔥
웹 표준이란?
웹에서 사용되는 기술이나 규약의 표준화된 형식이다.
World Wide Web Consortium (W3C)에서 권고한 표준안에 따라 웹사이트를 작성할 때 사용하는 HTML, CSS, JS 등에 대한 규정이 담겨 있다.
웹 표준이 없던 예전에는, 웹 사이트 개발자가 여러 브라우저에 환경에 따라 각기 다른 사이트를 제작해야 하는 어려움이 있었는데, 지금은 웹표준이 있기 때문에, 한번만 짜도 여러 브라우저에서 작동한다.
HTML5에서 추가된 내용이 있나요?
HTML5는 2014년에 표준화되었으며, 추가된 내용은 크게 선언문의 변경과 시멘틱 태그의 도입을 둘 수 있다.
선언문의 경우 길게 DOCTYPE을 선언해야했던 예전과 달리 이렇게만 적어도 되게 변화했다.
시멘틱 태그의 경우, div 태그 투성이었던 코드에 의미를 부여하기 위해 HTML5에 처음 도입된 태그다. 말 그대로 의미를 가지고 있는 태그다. <header>, <nav>, <section> 등의 태그가 있다.
웹 접근성이란?
웹 접근성이란, 웹 사이트가 장애를 가진 사용자들이 사용하는 데 어려움이 없도록 개발된 것을 말한다. 예를 들어, 시각 장애인을 위해 음성 기술을 제공하는 등이 있다. 웹 접근성은 장애를 갖지 않은 사람에게도 이점을 준다.
웹 접근성에 맞는 마크업 예시 몇가지 말해보시오
첫번째로는 이미지 대체 텍스트, img 태그의 alt 옵션이 있다. alt를 통해 이미지에 대한 대체 텍스트를 제공할 수 있다. 시각 장애인의 경우 페이지의 정보를 읽어주는 스크린 리더를 사용하는 사람들이 있기 때문에, 대체 텍스트를 넣어주면 이미지의 정보를 시각장애인들도 인식할 수 있다.
두번째로는 마우스 없이 키보드만 있어도 이용 가능하도록 하는 것이다. 마우스를 사용하기 어려운 장애인들이 키보드만으로도 콘텐츠에 접근할 수 있도록 tab 버튼을 사용해 다른 요소로 이동할 수 있게 한다.
또한 키보드와 유사한 기능을 할 수 있는 음성 입력을 도입하는 것도 하나의 방법이다.
세번째로는 aria tag나 role같은 속성을 사용하여, 해당 요소가 어떤 요소인지 명시하는 것이다. 이는 이미지 대체 텍스트와 같이 스크린 리더에 읽혀 시각장애인에게 정보를 제공할 수 있다.
네번째로는 시멘틱 태그다. 시멘틱 태그도 스크린 리더에서 읽을 수 있기 때문에, 지금 웹사이트에서 위치한 곳이 header인지, nav인지, section인지 등등을 인지할 수 있다.
다섯번째로는 적절한 색상 대비이다. 콘텐츠와 배경 색상 간의 명도 대비를 높여 저시력자도 콘텐츠를 이용할 수 있게 해야한다.
시멘틱 태그란 무엇인가 왜 사용하는가
시멘틱 태그란, 의미를 담은 태그로 <header>나 <nav> <section> 등이 있다.
시멘틱 태그를 왜 사용하는가? 첫째, <div> 사용 대신 시멘틱 태그를 사용하면, 개발자가 태그 안에 채워질 데이터를 추측할 수 있기 때문이다.
둘째, 검색 엔진이 의미론적 마크업을 중요한 키워드로 간주하기 때문에 SEO에 영향이 있기 때문이다.
셋째, 시각 장애가 있는 이용자가 스크린 리더로 페이지를 탐색할 때 의미론적인 마크업을 제공할 수 있기 때문이다.
💡 시멘틱 태그는 기능이 있을까?
텍스트 관련 태그
- 제목(Head)태그
<h1>heading 1</h1>
<h2>heading 2</h2>
<h3>heading 3</h3>
<h4>heading 4</h4>
<h5>heading 5</h5>
<h6>heading 6</h6>제목 태그로, h1~h6까지 있다. 6부터 1까지 작은 수일수록 점점 큰 글자크기로 출력된다. 제목을 나타내는 태그이기 때문에 남발하면 좋지 않다.
- 글자 형태 (Text Formatting) 태그
<b> - Bold text
<strong> - Important text //Semantic
<i> - Italic text
<em> - Emphasized text //Semantic
<mark> - Marked text**: 형광펜**
<small> - Smaller text**: 작은 텍스트**
<del> - Deleted text**: 취소선**
<ins> - Inserted text**: 밑줄**
**<sub> - Subscript text: 아래 첨자(제곱)
<sup> - Superscript text: 위 첨자(log)**글자 형태를 조정하는 태그.
b와 strong의 경우 둘 다 bold체로 바꾸는 효과가 있지만, strong의 경우 ‘중요’하다는 의미를 가진다.
i와 em의 경우도 둘 다 이탤릭체로 바꾸는 효과가 있지만, em의 경우 ‘강조’한다는 의미를 가진다.
- 본문 태그
<p> Defines a paragraph: block 태그
<hr> Defines a thematic change in the content: 구분선
<br> Inserts a single line break: 줄바꿈
<pre> Defines pre-formatted text: 입력하는 대로 보이는 태그SEO란 무엇인가?
SEO란 Search Engine Optimization로, 검색 엔진 최적화라는 뜻이다.
웹 페이지를 검색 엔진에서 높은 순위로 노출시키기 위해서 필요하다.
SEO 하는법:
첫째, 메타 태그를 사용한다.
둘째, 시멘틱 태그 등 의미 있는 태그를 사용한다.
+) SSR를 사용하여 html에 내용이 담기도록 하여 검색 엔진이 크롤링하는데 유용하도록 만든다 😲
Button 태그의 Default type은 무엇인가?
default type은 submit다.
button type에는 submit, button, reset이 있는데, 기본값이 submit이기 때문에 다른 설정을 해주지 않으면 button 클릭 시 기본 내장되어있는 form을 submit하는 액션이 일어난다. 따라서 해당 액션을 일으키고 싶지 않다면, 아예 button 타입을 바꾸거나, onClick 시 e.preventDefault() 등으로 기본 액션을 막는다.
Section 태그와 article 태그의 차이점
article 태그는 문서 혹은 요소가 독립적으로 존재할 수 있을 때 사용한다.
section 태그는 논리적으로 관계 있는 문서 혹은 요소를 분리할 때 사용한다.
💡 https://webactually.com/2020/03/03/
을-버리고-HTML5-을-써야-하는-이유/크로스 브라우징이란 무엇인가요?
웹 페이지가 다양한 브라우저와 버전에서 개발자의 의도대로 올바르게 작동하도록 하는 기술
💡 삼성 인터넷이랑 크롬 브라우저랑 뷰 포트 지정이 달라서 힘들었음!
그 외 🔥
이미지 크기가 클 경우 렌더링 속도가 느려질텐데 이를 개선하기 위한 방법
첫째, 브라우저의 사이즈에 따라 이미지 크기를 나눠서 다르게 렌더링하기 (ex pc 사이즈에선 큰 크기의 이미지를, mobile 사이즈에서는 작은 크기의 이미지를)
둘째, svg 같은 벡터 이미지를 사용한다. 용량이 png나 gif보다 작다.
셋째, 화면에 보이는 이미지만 로딩하는 lazy loading을 사용한다. 초기 페이지 로드 시간을 최적화 할 수 있다.
넷째, 이미지 cdn을 사용한다.
💡 이미지 cdn을 어떻게 쓸까요? 보통 서버에서 처리하는 듯
UI란 무엇인지 설명하시오
UI는 사용자 인터페이스의 약어로, 사용자와 서비스 간의 상호작용을 가능하게 하는 디자인된 요소들의 집합을 이야기한다.
사용자가 시각적으로 인식할 수 있는 모든 것, 버튼이나 메뉴, 폼, 아이콘, 레이아웃 등이 UI다.
UI는 사용자 경험(UX)의 핵심 부분으로, 사용자가 제품 또는 서비스를 사용하는 과정을 최대한 편리하고 효과적으로 만드는 것이 목표다.
SVG란 ? 🔥
SVG란, 2차원 벡터 그래픽을 표현하기 위한 XML 기반의 파일 형식이다.
SVG 장점과 단점
SVG의 장점
- 백터 이미지이기 때문에 확대를 해도 픽셀이 깨지지 않다. 그러므로 크기에 따라 다른 파일을 준비할 필요가 없다.
- 용량이 PNG나 GIF보다 작다.
- XML로 구성되어 있기 때문에 SVG 파일을 개발자가 수정 가능하다. 색깔이나 모양, 크기 등을 바꿀 수 있다.
- SVG 파일은 텍스트로 작성되기 때문에, 스크린 리더와 검색 엔진이 해당 텍스트를 분석할 수 있다. 고로 접근성과 SEO 측면에서 좋다.
단점
- 수학적 계산이 필요하기 때문에, 복잡한 이미지라면 오히려 크기가 커질 수 있다. 그럴 때는 PNG로 처리한다.
- XCode12부터 지원하고, 모든 브라우저에서 지원하는 건 아님 (하지만 대부분 지원함)
SVG 내부 도형에 대해 아는게 있나요?
- 직사각형(rect), 원(circle), 타원(ellipse), 직선(line), 폴리 라인(polyline), 다각형(polygon)과 같은 기본 도형들이 있다.
[<circle>](https://developer.mozilla.org/ko/docs/Web/SVG/Element/circle): 원의 중심(rx, ry), 반지름(r), 색상(fill)
<svg>
<circle cx="200" cy="200" r="50" fill="#3e295e" />
</svg>[<rect>](https://developer.mozilla.org/ko/docs/Web/SVG/Element/rect): 너비(width), 높이(height), 색상(fill)
<svg>
<rect width="480" height="240" fill="#3d87fb" />
</svg>