🙋🏻♀️ 목표: 실제 현업에서 면접시에 나올법한 내용들을 간추려서 한 번 정리해보자.🚀
1. 자네, 🐍은 무엇인가?
🙌 "네, BEM이라는 것은 Block__element—modifier입니다.
작성 시 유의할 점은 BEM을 너무 nested 하게 작성하지 않는 것입니다. 우리는 재사용이 가능한 컴포넌트를 BEM 규칙을 따라서 작성하게 되는데 이것이 과하면 코드의 양이 너무 많아져요. 그래서 작은 단위로 만드는 것이 중요합니다.
기본적으로 우리가 현업에서 프로젝트를 진행할 때 점점 규모가 커지게 되는데요, 이 때 우리는 유지 보수에 신경을 써줘야 합니다. 따라서 클래스 네임도 유지 보수에 적합한 이름을 작성해 주는 것입니다. 이것을 우리는 BEM 규칙 이라고 부릅니다.
나중에 우리가 프로젝트를 모듈화 하거나 SASS, LESS, PostCSS를 사용하게 되면 BEM은 필요가 없어집니다.
그러나 소규모 개인 프로젝트 등을 진행할 때 BEM을 활용한다면 아주 유용할 수 있습니다."
<!-- block__element -->
<div class="card"></button>
<div class="card__img"></button>
<div class="card__title"></button>
<div class="card__subtitle"></button>
<div class="card__button"></button>
<!-- block__element--modifier -->
<div class="card--blue"></button>
<div class="card--red"></button>
<div class="card__button--white"></button>2. meta태그는 무엇인가?
🙌 "네, <meta> 태그는 문서 자체 정보를 나타냅니다. 대표적으로 viewport, title, author 등이 있습니다."
3. Semantic tags는 무엇인가?
🙌 "네, Semantic tag는 특정한 태그에 의미를 부여해서 좀 더 효율적으로 코드를 바라보기 위한 방법 중에 하나입니다. 여담으로 HTML5로 만든 웹 페이지를 시멘틱 웹 페이지라고 부릅니다. 태그는 header, nav, aside, section, article, footer가 있습니다."
4. b태그와 strong태그의 차이점은?
🙌 "네, 두 방법 모두 bold체를 만들 수 있습니다. 그러나 strong 태그를 쓰는 것이 웹표준을 준수하는 방법입니다."
5. 에러 페이지에 대해서 생각해 보았는가?
🙌 "네, 에러 페이지는 404 페이지와 5xx 페이지가 있습니다. 5xx 에러 페이지는 서버 에러입니다. 따라서 서버로 부터 데이터를 전송받지 않고 독립적인 그 자체 CSS를 포함하고 있어야 합니다."
6. Noopener은 어떻게 생각하는가?
🙌 "네, 외부 링크에서 새 탭 : target="_black" 으로 연 경우에 tab nabbing 피싱 공격을 방지하기 위해서 사용하는 것입니다. 따라서 코드로 속성값을 넣어줍니다."
rel="noopener"rel="noopener noreferrer"(Firefox 구버전까지 지원할 시)
7. 주석이 필요한가? 어떻게 생각하는가?
🙌 "네, 필요합니다. 다만, 웹사이트를 만들어내기 이전에 불필요한 코드나, 불필요한 주석은 삭제하는 것이 좋습니다."
8. HTML testing에 대해서 생각해 보았는가?
🙌 "네, 모든 페이지는 HTML 코드 내에서 일어날 수 있는 변수에 대비해야 합니다. 따라서 W3C validator을 이용하여 테스트합니다.
또한 HTML Lint를 활용해서 코드를 정리정돈 하거나 Lint checker을 이용해서 페이지 내에 깨진 링크는 없는지, 404 에러가 존재하지는 않는지 한 번 더 체크합니다. 마지막으로 광고차단기를 활성화해서 테스팅 할 수 있습니다."
9. !DOCTYPE이 무엇인지 아는가?
🙌 "네, HTML은 역사가 굉장히 길다고 합니다. 예전에는 브라우저가 따라야 하는 중요한 룰 같은 것들을 문서내에 기입했었고, 버전도 따로 적여야 했었습니다.
지금은 그러한 것들은 작성하지 않는다고 합니다. 모든 브라우저가 HTML5를 지원하기 때문에 관습적으로 <!DOCTYPE html> 이라고 한번만 선언합니다."
