꽤 많이 알고 있다고 생각했지만 막상 설명을 해보려 하니까 어버버버버.... 결국 정리 해야겠다!
질문은 아래 블로그 분이 잘 정리해주셨다.
지금부터 나 혼자 공부하려고 만드는 면접 정리
px, em, rem 의 차이에 대해 설명해주세요
px : 모니터의 따라상대적인 크기를 가진다. 반응형 웹에 적절하지 않다.
em : 부모 요소의 글꼴 크기를 의미한다.
rem : 루트(html) 요소의 글꼴 크기를 의미한다. em 과 결정적인 차이점은 HTML 태그의 글자 크지만 참조한다.
vw, vh에 대해 설명해주세요.
vw : viewport width를 줄인 말로 창사이즈 중 가로폭의 1%를 크기로 갖는다. ex) 1vw를 주면 폭이 1000px이면 10px
vh : vh는 viewport height를 줄인 말로 창사이즈 중 높이의 1%를 크기로 갖는다.
반응형 브레이크 포인트는 보통 어떻게 잡으시나요?
반응형 브레이크 포인트 = 미디어 쿼리 라고 생각하면 편하다.
CSS 선택자의 우선순위에 대해 설명해주세요.
선택자 우선순위란 ? 같은 요소가 여러 선언의 대상이 된 경우 어떤 선언의 CSS속성을 우선적으로 적용 할 것인지를 결정하는 방법
- 점수를 매겨서 높은 선언이 우선으로 한다.
- 점수가 같으면 가장 마지막에 해석된 선언을 우선으로 한다.
이는 cascading 이랑도 관련이 있다
Cascading : HTML 요소는 하나 이상의 스타일에 영향을 받을 수 있는데 어떤 스타일을 적용 받을지에 대한 우선순위가 정해져야한다.
캐스캐이딩은 다음 3가지에 의해 결정된다.
1. CSS가 어디에 선언되어있나(중요도)
2. 대상을 명확하게 지정할 수록 높은 우선 순위를 가지고 있다(명시도)
3. 코드 순서
Flexbox에 대해 설명해주세요.
유동적으로 각 요소들을 배치하는 기법
float의 동작에 대해 설명해주세요.
요소를 부유 시키는 레이아웃 기법
- 그 이후 다른 요소는 float를 취소하고싶다면 clear를 사용한다.
⭐ SCSS에 대해 설명해주세요.
CSS를 효율적으로 쓸 수 있도록 만든 언어
scss 파일을 따로 만들어 코드의 재사용성을 높일 수 있다.
⭐postition 속성에 대해 설명해주세요.
HTML 요소를 원하는 위치에 배치하기 위해 사용하는 CSS 속성
position: static
속성을 별도로 지정해주지 않으면 기본값인 static이 적용된다.
position: relative
요소를 원래 위치 기준 top bottom left right 속성을 이용해서 상하좌우로부터 얼마나 멀리 떨어지게 할 지 결정한다. (부모 요소 를 기준으로 한다.)
position: fixed
고정요소가 부모가 아닌 뷰포인트 즉 브라우저 전체 화면에서 top bottom left right 를 설정하여 얼마나 떨어지게 할 지 결정한다.
position: sticky
스크롤링 할 때 효과가 나타나며 스크롤을 하게되어 요소가 표시가 되면 상단에 붙어서 더 움직이지 않는다.
margin과 padding에 대해 설명해주세요.
Padding은 Content와 Border 사이의 여백
Margin은 Border 바깥쪽을 차지한다. 주변 요소와 거리를 두기 위한 영역이다.
HTML 렌더링 도중 JavaScript가 실행되면 렌더링이 멈추는 이유가 뭔가요?
렌더링 엔진은 HTML 한 줄씩 순차적으로 파싱하며 DOM을 생성해 나가다가 Javascript를 만나면 DOM 생성을 임시 중단.
DOM 생성을 심시 중단하고, 자바스크립트 코드를 파싱하기 위해 자바스크립트 엔진에 제어권을 넘기게 되는데, 파싱이 끝나면 다시 렌더링 엔진에 제어권을 넘겨 중단된 부분부터 HTML 파싱을 재개하며 DOM 트리를 생성
Box model에 대해 설명해주세요.
HTML 요소는 박스로 간주된다 박스 모델이란 각각 요소들을 바긋 형태로 나타내어 브라우저에 배치하기 위한 규칙이다.
content : 요소의 텍스트나 이미지 등 실제 내용이 위치하는 영역
padding : 테두리(border) 안쪽에 위치하는 요소의 내부 여백 영역
요소에 적용된 배경 색상이나 이미지는 padding 영역까지 지정됨
border : 테두리 영역으로 border 프로퍼티 값을 테두리의 두께를 의미
margin: 테두리(border) 바깥에 위치하는 요소의 외부 여백 영역
Attribute와 Property의 차이에 대해 설명해주세요.
attribute 는 html 문서 안에서의 정적인(바뀌지 않는) 속성 그 자체를 의미한다.
예를 들어, div class= ‘my-class' 라는 ‘my-class’라는 클래스 속성을 가진 div 요소에서 div 는 element(요소) 이고 class 는 attribute(속성) 가 되며 ‘my-class’ 는 class attribute의 value(값)가 됩니다.
property 는 html DOM 안에서 동적인(바뀌는) 속성(또는 그 값)을 의미한다.
div class= ‘my-class’ 태그를 DOM 으로 표현한 것인데 위에서 className이 property가 되는 것이죠. 다시 말하면 html 문서 안에서는 class가 attribute를 의미하지만 html DOM 안에서는 property를 의미한다고 보시면 될 것 같습니다.
그럼 attribute와 property를 구분하는 차이 또는 차이점이 무엇일까?
attribute는 html document/file 안에서 property 는 html DOM tree안에서 존재합니다. 이것이 뜻하는 것은 attribute는 정적으로 변하지 않고 property는 동적으로 그 값이 변할 수 있다는 것을 내포하고 있습니다. 예를 들어 체크박스 태그가 있을 때 유저가 체크박스에 체크를 하면 attribute의 상태는 변하지 않지만 property의 상태는 checked로 변하게 됩니다.
⭐ display 속성에 어떤 것들이 있는지 설명해 주세요.
splay 속성은 웹 페이지의 레이아웃(layout)을 결정하는 CSS의 중요한 속성 중 하나다.
display 속성값은 4가지 입니다.
- none
- block
- inline
- inline-block
display: none
화면에서 사라진다.
display: block
일반적으로 설정하지 않아도 div가 갖게되는 기본값.
display: inline;
컨텐츠를 딱 감쌀정도의 크기만 갖게된다. block태그와 다르게 줄바꿈이 되지 않고, 반드시 컨텐츠를 감싸게 되고, 크기를 변화시킬 수 없다.
display: inline-block;
inline과 block의 특성을 합쳐놓은 속성. 기본적으로는 inline의 속성을 지니고 있지만, 임의로 크기를 바꿔줄 수 있다.
⭐시맨틱 마크업에 대해 설명해주세요.
시맨틱 마크업이란 의미를 잘 전달하도록 문서를 작성하는 것을 말한다.
작성방법
시멘틱 마크업을 하기 위해선 각 태그를 그 용도에 맞게 사용하여야 한다. 즉, 다음과 같은 것들을 말한다.
작성 방법
- 헤더/푸터에 header와 footer 사용
- 메인 컨텐츠에 main과 section사용
- 독립적인 컨텐츠에 article 사용
- 최상위 제목으로 h1 사용
- 순서가 없는 목록으로 ul과 li 사용
- 내비게이션에 nav사용
특징
- 검색엔진이 시맨틱 태그를 중요한 키워드로 간주하기 때문에 검색엔진 - 최적화(SEO)에 유리하다.
- 웹 접근성 측면에서, 시각장애가 있는 사용자로 하여금 그 의미를 훨씬 잘 파악할 수 있다.
- 단순한 div, span으로 둘러싸인 요소들보다 코드를 볼 때 가독성이 좋다.
