HTML, CSS
1. px, em, rem 의 차이에 대해 설명해주세요.
css에서 길이를 다룰 때 상대 단위와 절대 단위로 구분되는데,
em, rem 는 상대 단위로 고정되지 않고 어떤 기준에 따라 환경적, 유동적으로 바뀌는 길이를 말하고, px 는 고정된 절대 단위입니다.
rem 은 r은 root로 기준이 되는 폰트 크기 하나로 고정되어 최상위 엘리멘트(html)에서 지정된 font-size의 값을 기준으로 변환되는 반면에 em 은 같은 엘리먼트는 어디서라도 그 기준이 바뀔 수 있기 때문에 복잡한 css 를 가질 경우 변환될 크기를 예측하기 어렵다는 단점이 있습니다. 어느 페이지에서 고정된 사이즈를 사용한다면 rem(font-size)을, 부모요소에 따라 유동적으로 변한다면 em(padding, margin) 을 사용하는 것으로 지향합니다.
- 반응형 웹을 구현할 때는 이 단위 중에서 어떤 단위를 주로 사용하시나요?
상대적인 단위인 em 와 rem 입니다. em 은 현재 폰트 사이즈를 나타내는 단위로 부모 요소 font-size 를 기준으로한 상대적인 size 입니다. 따라서 em 을 많이 사용하게 된다면 즉각적으로 폰트 사이즈를 계산하기 어렵습니다. rem 은 최상위 요소인 html 를 기준으로 기본 font-size인 16px 를 기준으로 해당 요소의 크기를 정합니다. 따라서 폰트 사이즈만 보기 때문에 계산이 쉽고 직관적으로 값을 적용할 수 있어 rem 을 더 선호합니다.
2. vw, vh에 대해 설명해주세요.
vw 와 vh 는 상대적인 단위로 접두사로 붙은 v 는 viewport 로 보여지는 영역을 말합니다. 화면 넓이를 기준으로 하는 백분율 단위를 기준으로 합니다. 사용자의 브라우저 화면의 너비가 변경될 때마다 브라우저가 알아서 1vw 이나 1vh 의 값을 알아서 바뀌게 합니다.
3. 반응형 브레이크 포인트는 보통 어떻게 잡으시나요?
반응형 페이지를 작업한다고 하면 크게 pc, 태블릿, 모바일로 세가지로 나눕니다. 따라서 태블릿일 경우 해상도가 768px 에서 1199px 까지, 모바일일 경우 360px 에서 767px 로 설정합니다.
4. CSS 선택자의 우선순위에 대해 설명해주세요.
선택자 우선순위란 같은 요소가 여러 선언의 대상이 된 경우, 어떤 선언의 css 속성을 우선적으로 적용할 것인지를 결정하는 방법입니다.
그 기준은 점수가 높을수록 우선이지만 같은 점수일 경우 가장 마지막에 작성된 선언이 우선시됩니다. 그 점수는 !important일 경우 무한대, inline 으로 선언일 경우 1000점, id 선택자일 경우 100점, class 선택자일 경우 10점, 태그 선택자일 경우 1 점, 그 외 전체 선택자나 부정 선택자일 경우 0점입니다.
5. 페이지 크기가 변해도 항상 같은 비율을 유지하는 요소를 만들려면 CSS를 어떻게 설정해야될까요?
이 때는 고정적인 길이를 가지는 절대단위 px 를 사용하여 width 나 height 속성을 설정해주면 됩니다.
6. Flexbox에 대해 설명해주세요.
flexible box layout model 로 행과 열 형태로 항목 무리를 배치하는 1차원 레이아웃 모델입니다. 뷰포트나 요소의 크기가 불명확하거나 동적으로 변할 때에도 복잡한 계산 없이 효율적으로 요소를 유연하게 배치, 정렬, 분산할 수 있다는 큰 장점이 있습니다.
복수의 자식 요소인 flex item 과 그 상위 부모 요소인 flex container 로 구성됩니다. 부모 요소에 display: flex 스타일을 적용시킴에 따라 flex-direction, justify-content, align-items 와 같은 속성을 적용시킬 수 있고, 자식 요소에도 flex, align-self, order 과 같은 속성을 사용할 수 있습니다. 이때 원하는 대로 제어하기 위해 서로 수직을 이루는 main - corss axis 축을 잘 이용해야합니다.
7. float의 동작에 대해 설명해주세요.
float 는 해당 요소를 다음 요소 위에 떠 있게 하는 속성입니다. 프로퍼티값으로는 none, right, left 가 있습니다.
기본값인 none 으로 떠 있지 않게 하고, right 와 left 는 각각 오른쪽과 왼쪽으로 요소를 이동시키도록 합니다. 사용시에는 요소의 위치를 고정시키는 position : absolute를 사용하면 안됩니다. float 속성이 relative 한 위치 지정을 하기 때문에 absolute 속성이 적용되지 않기 때문입니다. 또한 float 속성을 지정하면 요소의 부모 요소는 해당 요소의 높이를 인식하지 못하게 되는데, 이때 부모 요소에 overflow : hidden 속성을 추가하여 해결할 수 있습니다.
8. CSS에서 Cascading에 대해 설명해주세요.
CSS 는 Cascading Style Sheet의 약자로 Cascading 은 위에서 아래로 떨어지는 폭포라는 의미를 가진 단어로 이 원리를 가장 중요하게 적용됩니다. 캐스케이딩은 css 가 어디에 선언되어 있는지에 대한 중요도와 대상을 명확하게 지정할 수록 높은 우선순위를 가지는 명시도와 코드 순서에 따라 결정됩니다.
중요도는 css 가 적용되는 인라인 스타일, 인터널 스타일, 링크 태그 안에 별도의 css 파일과 연결되는 방법 등이 있는데 그 중에서도 style 이나 외부로 css 파일로 빼는 것이 스타일과 마크업을 명확하게 구분할 수 있고, 선택자를 사용하여 여러 요소에 규칙을 적용시킬 수 있어 중복을 피하고 쉽게 관리할 수 있어서 가장 우선순위가 높습니다. 명시도는 !important 와 id, class, tag 선택자에 의해 점수가 결정됩니다. 코드 순서는 가장 마지막에 선언된 스타일이 우선 적용됩니다.
9. ⭐ SCSS에 대해 설명해주세요.
SCSS는 Sass Syntactically Awesome StyleSheet 의 약어로 코드의 재활용성과 가독성을 올려 단점을 보완시킨 CSS 전처리기 언어입니다. Sass 가 제공하는 문법을 기반으로 코드를 작성하고 이를 컴파일해 CSS 파일을 빌드하는 것이 Sass 를 통해 스타일시트를 생산시킵니다. 이는 CSS 보다 심플한 표기법으로 구조화시켜 표현할 수 있습니다. 상속되는 선택자를 계층적으로 명시하여 불필요한 반복적 사용을 줄일 수 있습니다. 선택자의 중첩을 통해 반복되는 부모 요소 선택자 사용을 줄이고 변수를 사용하여 속성값을 통일해서 관리할 수 있다는 장점이 있습니다. 단점으로는 앞서 언급했던 컴파일 과정이 있다보니 시간이 더 소요될 수 있고, 전처리기를 위한 도구가 필요하다는 점입니다.
SCSS 와 Saas 는 문법 생김새는 다르지만 같은 파생 언어입니다. SCSS 는 Sass 3버전에서 등장한 언어로 들여쓰기를 사용했던 Sass 반면에 중괄호와 세미콜론을 사용하는 문법적인 차이가 있습니다. 믹스인 mixin 문법으로 재사용 가능한 기능을 만드는 방식을 사용할 수 있습니다. (https://inpa.tistory.com/entry/SCSS-%F0%9F%92%8E-SassSCSS-%EB%9E%80-%EC%84%A4%EC%B9%98-%EB%B0%8F-%EC%BB%B4%ED%8C%8C%EC%9D%BC#sassscss%EC%9D%98_%EB%93%B1%EC%9E%A5)
10. ⭐ postition 속성에 대해 설명해주세요.
position 은 레이아웃을 배치하거나 객체를 위치시킬 때 사용하는 속성입니다. 이는 상속되지 않고 top bottom left right 위치를 설정할 수 있습니다. 속성값으로는 static, relative, absolute, fixed 가 있습니다.
기본값으로 위치를 딱히 지정하지 않을 때 static, relative 는 원래위치부터 top right bottom left 프로퍼티로 계산하기 때문에 방금 언급한 필요한 위 아래 오른쪽 왼쪽 프로퍼티가 필요합니다. absolute는 원래 위치와 상관없이 가장 가까운 상위 요소를 기준으로 절대적으로 위치가 결정됩니다. 이때 기준 부모 요소에는 position: relative 로 지정해주어야 합니다. fixed 는 브라우저 화면의 상대위치를 기준입니다. 따라서 상위 요소에 영향을 받지 않습니다.
11. margin과 padding에 대해 설명해주세요.
두 속성은 border 를 기준으로 margin 은 바깥쪽 여백, padding 은 안쪽 여백을 의미합니다. 위 오른쪽 아래 왼쪽의 각각의 값을 부여할 수도 있고 통일된 한 속성값으로 부여할 수도 있습니다.
12. HTML 렌더링 도중 JavaScript가 실행되면 렌더링이 멈추는 이유가 뭔가요?
HTML 파서는 렌더링 과정 중에 script 태그를 만나면 진행중인 파싱을 중단하고 자바스크립트 엔진에게 제어 권한을 넘겨주게 됩니다. 자바스크립트 파싱과 실행이 종료되면 다시 렌더링 엔진으로 다시 돌아가 중단된 시점부터 다시 파싱을 시작합니다.
그렇기 때문에 스크립트 태그는 body 태그 끝에 두는 것을 권장하고 그렇게 된다면 렌더링 속도가 빨라지고 사용자가 화면을 보는데 불편함을 되도록 주지 않습니다.
13. Box model에 대해 설명해주세요.
박스 모델은 박스 모양으로 구성되고 안쪽에서 바깥으로 순서대로 content, padding, border, margin 로 구분됩니다.
content 는 텍스트나 이미지 등의 박스의 실질적인 내용을 담는 부분입니다. 다음은 테두리인 border 를 기준으로 border 와 content 사이의 간격인 padding 과 border 의 바깥 여백인 margin 입니다.
여기서 box-sizing 속성에 따라 width 속성값가 다르게 지정될 수 있습니다. box-sizing 속성값으로 기본값으로 content-box 와 border-box 가 있습니다. content-box 란 width 속성값을 content 영역의 너비만을 포함하는 것이고 border-box 란 padding 과 border 까지 포함한 width 속성을 지정할 수 있습니다. 디폴트 동작 방식이 전체적인 레이아웃을 잡을 때 불편하게 계산될 수 있기 때문에 border-box 를 권장합니다.
14. Attribute와 Property의 차이에 대해 설명해주세요.
둘 다 속성이라는 의미를 갖고 있지만 attriute 는 html 의 속성으로 요소에 아이디나 클래스와 같은 추가 정보를 의미합니다. property 는 dom 의 속성으로 html 의 attribute 를 dom 내에서 대신해서 표현하는 것입니다. 각각 html 과 dom 내에 존재하기 때문에 html 의 속성인 attribute 는 정적으로 변하지 않는 값이고, property는 동적으로 변할 수 있는 값입니다.
15. ⭐ display 속성에 어떤 것들이 있는지 설명해 주세요.
화면에 어떻게 드러나게 할 지 결정하는 속성으로 none, block,inline, inline-block 4가지 속성값이 있습니다.
none 으로 설정시 화면에서 사라지게 되고 아예 크기를 차지하지 않습니다. 기본값으로 block 속성값은 width 가 자신의 container 의 100%가 되도록 가로 한 줄을 다 차지하게 됩니다. inline 은 content 를 감싸는 크기로 block 과 다르게 줄바꿈이 되지 않고 크기를 변화시킬 수 없습니다. inline-block 은 앞서 언급한 inline 과 block 을 합친 속성으로 기본적으로는 inline 속성을 가지고 있지만 임의로 width 크기를 변경할 수 있는 block 의 속성을 가질 수 있습니다.
16. CSS 애니메이션과 JS 애니메이션의 차이에 대해서 설명해 주세요.
애니메이션 효과를 부여할 때 css 에서 transition / animation 속성을, js 에서는 setInterval(), requestAnimationFrame() 메서드를 사용할 수 있습니다. 간단하게 처리하는 경우에는 css 로 처리하는데 렌더링 과정에서 레이아웃이나 페인트 단계를 거칠 수 있기 때문에 성능 개선에 효율적이지 않을 수 있습니다. 반면 훨씬 복잡하고 무거운 애니메이션을 작업할 때 js 를 사용하는데 조금 효율적이고 세밀하게 다룰 수 있습니다.
17. CSS in JS의 장단점에 대해 설명해주세요.
스타일을 css 파일 대신 자바스크립트 파일로 하는 것으로 대표적으로 styled-component 가 있습니다. 이는 css 를 컴포넌트화하는 것이기 때문에 따로 스타일시트의 파일을 유지보수할 필요가 없어 컴포넌트 레벨로 추상화하는 개념으로 모듈성을 지닙니다. js 와 css 사이의 상수와 함수를 쉽게 공유할 수 있고, 짧은 길이의 클래스를 자동으로 생성하기 때문에 코드 경량화의 장점이 있습니다. 하지만 별도의 라이브러리를 설치해야하므로 번들 크기가 커집니다. 러닝 커브나 새로운 의존성이 생길 수 있습니다.
18. ⭐ 시맨틱 마크업에 대해 설명해주세요.
시맨틱 마크업이란 의미를 담은 마크업입니다. 대체적으로 div 태그 대신 header나 nav, section, article, aside, footer 등의 태그를 세분화하여 사용함으로써 좀 더 역할적이고 의미있게 보일 수 있습니다. 이는 가독성이 좋아서 유지 보수가 좋고 검색 엔진 최적화 SEO 에 유리하며 웹 접근성 측면에서도 이점이 있습니다.
19. HTML5의 태그에 대해 설명해주세요.
20. script 태그에서 Async와 Defer의 차이에 대해 설명해주세요.
async 옵션은 html 을 읽으면서 병렬로 동시에 처리하기 때문에 script 를 처리하는 도중에 dom 생성을 멈추지 않아서 속도가 빠르지만, 여러개의 script 가 있을 경우 동시에 병렬로 처리되지만 의존경우가 있는 경우 이상이 생길 수도 있습니다.
defer 옵션은 html 문을 읽고 마지막에 script 태그를 실행하는 방식으로 html 을 먼저 그리고 script 을 호출하여 화면에 그려지는 속도가 빠릅니다.
정리하자면, 독립적이거나 실행 순서에 의존하지 않는 경우 async 를 사용하고 DOM 전체가 필요한 스크립트나 실행 순서가 중요할 경우에 defer 를 사용합니다.
21. 가상 클래스에 대해 설명해주세요.
가상 클래스란 실제로 존재하는 요소에 특정 이벤트나 환경에 맞춰 가상으로 클래스를 주어 css 로 제어하는 것을 말합니다. 예를 들어 active, checked, disabled, enabled, empty, focus, hover, link, visited, not, nth-child 등이 있고 콜론을 함께 사용합니다.
반면에 실제로 존재하지 않는 가상의 요소에 스타일을 주는 것은 가상 요소입니다. 이는 가상 클래스와 다르게 구분하기 위해 이중콜론과 함께 사용합니다. 대표적으로는 before 과 after 가 있습니다.
22. margin 병합에 대해 설명해주세요.
margin 이란 요소의 네 방향 바깥 여백 영역을 설정하는 css 속성입니다. 마진 병합 현상은 인접한 블록 요소의 상하단의 마진이 병합되는 현상을 말합니다. 이때 좌우의 여백의 병향은 일어나지 않습니다. 이때 마진의 크기는 병합되는 마진 중에서 큰 값을 가진 마진값으로 병합됩니다.
