HTML/CSS 질문

px, em, rem의 차이

• px은 고정적인 단위로 모니터의 해상도가 변하지 않는 이상 고정된 값을 브라우저에 전달합니다. 따라서 반응형으로는 적합하지 않습니다.

• em은 폰트사이즈의 px값에 비례한 값으로 Font-size 기본값인 16px을 예로 들어 1.5em인 경우 16px 곱하기 1.5를 하여 24px을 표현하는 단위입니다. 단점으로는 글자 크기가 지정되지 않은 경우 부모의 값을 상속하여 설정이 복잡해 질 수 있습니다.

• rem의 경우 em과 비슷하게 폰트사이즈에 비례한 값이지만 다른 점은 오직 html 태그의 폰트사이즈만 참조한다는 점입니다. 팀프로젝트를 진행해보며 가장 자주 사용한 단위로 반응형과 협업을 진행할 때 장점이 많았습니다.

vh, vw란?

• viewport height, width를 말하며 viewport란 현재 실행중인 스크린의 크기를 말합니다. 100vh, 100vw가 전체화면을 말하며, 사용자의 전체화면을 기준으로 하기 때문에 부모 요소의 길이와 스크롤바 포함 여부에 영향을 받는 %보다 간편하게 사용할 수 있습니다.

반응형 브레이크 포인트는 보통 어떻게 잡으시나요?

• 모바일, 태블릿, PC로 나누어 3가지 브레이크 포인트를 잡는 것이 이상적이라고 생각합니다. 모바일의 경우 350px 정도로 min-width를 설정해주고 그 이상부터 max-width 767px을 넘기 전까지는 태블릿 사이즈로 설정하여 프로젝트를 구현하고 나머지를 PC로 간주하여 잡습니다.

CSS 선택자의 우선순위

• !important가 가장 우선시 되고 html에 인라인 방식으로 작성하는 방법의 스타일을 유일한 방법입니다. 선택자의 순서대로 id, calss, tag. 전체 *, 부정 선택자를 순서로 점수를 산정하여 적용됩니다. 점수가 같은 경우 나중에 작성된 스타일이 적용되고 정확한 선택자를 입력해 줄 수록 점수가 높아져서 우선순위로 채택됩니다.

Flexbox에 대해 설명해보세요.

• flexbox는 레이아웃 메서드로 부모 요소가 포함한 자식 요소들을 column 또는 row로 정렬할 수 있도록 합니다. 이때 기본 축과 교차축이 설정되고 이 기본축을 통해 justify-content로 배치가 가능하고 교차축은 align-items를 사용하여 배치가 가능합니다. 그리고 기본 영역을 설정해주는 flex-basis와 영역을 늘리고 줄이는 flex-grow, flex-shrink를 사용할 수 있습니다. flex는 gird보다 작성이 편리하여 자주 사용하고 있으나 grid와 flex를 적절히 혼용하여 원하는 레이아웃을 만드는 것이 중요할 것이라고 생각합니다.

Gird에 대해 설명해보세요

• Grid는 행과 열로 이루어진 2차원 레이아웃 시스템입니다. 그렇기에 flexbox와는 다르게 행과 열을 동시에 다뤄 설정해줄 수 있습니다. 이를 통해 잡지와 같은 비교적 더 복잡한 레이아웃을 구현할 수 있습니다. fraction과 같은 단위도 사용이 가능하여 비율을 표현하여 작성할 수 있습니다.

float의 동작에 대해 설명

• float는 요소의 배치와 위치를 제어하는 속성으로 이미지와 텍스트를 함께 사용할 때 이미지를 텍스트로 감싸는 용도로 등장했으나 레이아웃용으로 많이 사용되었습니다. float 속성을 사용하면 부모 요소가 요소의 높이를 인식하지 못하게 됩니다. 끌어 들여진 요소들의 영향을 제거하기 위해 부모 요소에 clear로 제거하는 사용하고 최근에는 flexbox와 gird로 레이아웃을 구성하는 추세입니다.

CSS에서 Cascading에 대해 설명해주세요.

• cascading은 스타일 규칙이 적용되는 방식을 말합니다. 동일한 요소에 대해 서로 다른 스타일이 지정되었을 경우, 어떤 스타일을 적용할지 결정하는 규칙입니다. 두가지 규칙이 존재하고 첫번째로는 스타일 우선순위로 중요도, 명시도, 코드 순서 이 3가지의 요소를 통해 우선순위를 결정합니다. 두번째로는 스타일 상속입니다. color와 같은 속성은 스타일을 상속하여 자식요소에도 적용되지만 background-Image와 같은 속성은 상속이되지 않습니다.

SCSS에 대해 설명해주세요.

• CSS 확장 문법 중 하나로 코드 작성을 편하고 가독성이 좋게 만들어줍니다. 또한 변수, 함수, 믹스인과 같은 기능들을 제공하여 스타일 중복을 최소화하고 유지보수성을 높힙니다. sass와 같은 전처리기를 통해 작성하고 이를 css 파일로 컴파일하여 적용되는 방식입니다. 개인적으로는 중첩을 사용하여 명시도나 중복되는 코드들을 많이 줄일 수 있어서 선호하는 방법입니다.

HTML4와 5의 차이점은 뭔가요?

• 기존 4에서는 비디오, 오디오등 다양한 부가기능과 멀티미디어 콘텐츠를 액티브X를 설치하여 감상해야하는 불편함이 있었으나 5는 audio나 video태그로 플러그인 없이 멀티미디어 재생이 가능하다. 또한 header, nav, article, section, aside, footer와 같은 태그들이 추가되었고 이러한 시멘틱 태그들을 활용하여 접근성, SEO와 같은 내용을 개선할 수 있게 되었습니다.

script 태그에서 Async와 Defer의 차이에 대해 설명해주세요.

• Async와 Defer는 HTML에서 외부 스크립트를 불러올때 언제 다운로드하고 실행되는가를 결정해줍니다. async는 스크립트 다운로드와 html문서 파싱이 병렬로 수행되고 스크립트 다운로드가 완료되면 즉시 실행됩니다. 그렇기 때문에 스크립트 다운로드와 실행을 가능한 빨리 실행하고, 스크립트의 실행이 다른 스크립트나 DOM 로딩에 영향을 미치지 않아야할때 유용합니다. Defer의 경우는 스크립트 다운로드와 HTML 파싱이 병렬로 수행됩니다. 하지만 스크립트의 실행은 HTML이 완전히 파싱되고 모든 DOM요소가 준비된 후에 수행됩니다. DOM조작이 필요한 스크립트에 유용하고 페이지 로딩 속도를 향상시킵니다.

HTML 렌더링 도중 JavaScript가 실행되면 렌더링이 멈추는 이유가 뭔가요?

• 렌더링 과정 중에 script태그를 만나게 되면 진행중인 HTML 파싱을 중지하고 JS엔진으로 제어 권한을 넘긴다. JS 파싱과 실행이 종료되면 렌더링 엔진으로 다시 돌아가 파싱이 중단된 시점부터 다시 파싱을 시작하게 된다 이러한 이유로 스크립트 소스는 body 태그 끝부분에 두는 것을 권장한다. 이를 통해 HTML 문서를 화면에 표시하는 속도가 빨라져 사용자의 불편이 감소한다.

meta 태그는 어떤 용도로 사용되며, 어떤 속성들이 있는지 설명해주세요.

• 메타 태그는 그 html 문서 자체를 설명합니다. 문서의 제목과 내용, 작성자, 소개 같은 내용들을 담을 수 있고 이 메타 태그를 활용해 SEO 설정과 크롤러에게 공개할지 여부를 결정할 수 있고 또한 다른 페이지로 이동하는 기능도 설정할 수 있습니다. 저 같은 경우는 오픈그래프와 트위터 카드를 작성하기 위해 메타 태그를 활용하여 링크의 설명과 신뢰도를 올리기 위해 사용합니다.

Position 속성에 대해 설명해주세요.

• position은 총 5개의 속성이 있습니다. 저희가 배치할때 기본값인 static과 relative, absolute, fixed, 비교적 최신에 추가된 sticky로 static은 별도로 속성을 지정하지 않거나 지정하면 html 태그상 원래 있어야할 위치에 배치됩니다. Relative는 원래있어야할 위치를 기준으로 top left bottom right등을 활용하여 배치하는 방법이고 absolute는 부모 요소 중 static이 아닌 상위 요소를 찾아 올라가다가 static이 아닌 요소를 찾으면 그 요소를 기준으로 배치를 하고 만약 계속 static이 없다면 body요소를 기준으로 배치할 수 있게됩니다. 그리고 fixed는 viewport를 기준으로 배치를 가능하게 해주고 마지막으로 sticky는 스크롤링할때 효과가 나타나고 top을 0으로 설정하고 스크롤을 내리면 그 요소가 위부분에 붙어 있는 배치를 구현할 수 있습니다.

1. 시맨틱 태그란 무엇이며 왜 사용해야 할까요?

2. HTML5에서 새로 추가된 태그들을 알려주세요.

3. 웹 접근성이란 무엇이며, 웹 접근성을 고려한 HTML 작성 방법에 대해 설명해주세요.

4. 웹 표준이란 무엇이며, 웹 표준을 준수하는 이유는 무엇인가요?

5. meta 태그는 어떤 용도로 사용되며, 어떤 속성들이 있는지 설명해주세요.

6. HTML과 XHTML의 차이점은 무엇인가요?

7. input 태그에서 type 속성에 대해 설명해주세요.

8. HTML에서 iframe 태그는 어떤 용도로 사용되며, 어떤 속성들이 있는지 설명해주세요.

9. HTML5에서 form 태그에 추가된 속성들을 알려주세요.
보통 <input> Tag 들은 <form> Tag에 감싸져있어야 한다. 하지만 form속성은 위치에 상관없이 <form> Tag에 포함될 수 있다.
예시

<form action="#" method="#" id="login">
    아이디:<input type="text" name="id"><br>
</form>
 비밀번호:<input type="password" name="pwd" form="login">

10. HTML에서 이미지 태그의 alt 속성은 왜 필요한가요?
<img> 태그의 alt 속성은 이미지를 보여줄 수 없을 때 해당 이미지를 대체할 텍스트를 명시합니다.
이러한 alt 속성은 사용자가 느린 네트워크 환경이나 src 속성값의 오류, 시각 장애인용 스크린 리더의 사용 등 어떤 이유로든 사용자가 이미지를 볼 수 없을 때 이미지 대신 제공할 대체 정보를 제공합니다.
이미지를 텍스트로 묘사하는 것이 베스트, 이미지가 a 태그를 포함하고 있다면 텍스트는 링크가 어디와 연결 되어있는지 설명, 단순 장식이라면 alt=”” 와 같이 사용해야 함