🔸 HTML

• address 태그 사용시 주의할 점은 무엇인가?

: 나타내는 값이 주소여도 main과 같은 본문 영역에 사용하면 안 됨, footer에 부가 정보를 제공하는 목적으로 사용

• small 태그는 어떤 경우에 사용하는가?

: 원래는 크기가 작은 글자의 마크업시 사용했지만, 요즘은 footer의 저작권 정보와 같이 부가적인 정보 마크업시 사용

• footer에 헤딩 태그를 사용하는 것은 적절한가?

: 보편적으로 footer는 사이트를 마무리하면서 부가적인 정보를 제공하는 역할을 하기 때문에, 헤딩 태그를 사용하지 않는 편임
: 그러나 footer에도 의미 있는 제목을 설정해야 하는 경우 사용해도 무방함

• a 태그의 href 값으로 이메일 주소를 연결한 경우, 클릭하면 메일 소프트웨어를 실행시키는 방법은 무엇인가?

: href 값 앞에 mailto: 작성
: 메일 제목까지 지정하고 싶다면 href 값 뒤에 ?subject="제목" 작성

• picture 태그를 사용하여 이미지 삽입 시 어떤 이점이 있는가?

: 배율에 따라 다른 이미지를 제공하고 싶은 경우 srcset 속성의 사용으로 편리하게 설정할 수 있음

🔸 CSS

• 자식 요소 postition 값이 absolute인 경우, 부모 요소 position 값이 relative가 아니더라도 부모 요소를 기준으로 배치되는 경우에는 무엇이 있는가?

: 부모 요소의 transform이나 perspective 속성이 none이 아닌 값을 갖는 경우
: will-change 속성의 값이 transform이나 perspective인 경우
: filter 속성의 값이 none이 아닌 경우
: contain 속성의 값이 paint인 경우
: 위와 같은 경우에 부모 요소의 내부 영역을 기준으로 absolute, 혹은 fixed 설정된 자식 요소가 배치됨

• will-change는 무엇이고 어떻게 사용할 수 있는가?

: transform, animation 등 요소에 예상되는 변화의 종류에 대한 힌트를 제공
: 힌트를 바탕으로 브라우저가 미리 실행함으로써 성능을 최적화할 수 있음
: 그러나 남용하면 오히려 렌더링이 오래 걸리기 때문에 적절히 사용해야 함

• grid 설정시 row의 높이 값을 auto로 설정하면 어떤 이점이 있는가?

: 콘텐츠 크기에 맞춰서 높이 값이 자동으로 확대/축소되기 때문에 수정 상황에서 유연하게 대처할 수 있음

• Firefox 브라우저의 개발자 도구를 사용하면 grid 스타일링시 어떤 점이 편리한가?

: grid의 아웃라인, 행과 열의 번호 등을 시각적으로 파악할 수 있어서 편리함

• justify-content의 값으로 space-evenly는 왜 자주 사용하지 않는가?

: IE11에서는 지원하지 않기 때문에 크로스 브라우징 이슈 발생

• grid 하위 요소를 하나만 정렬하고 싶다면 어떤 방법을 사용해야 하는가?

: align-self와 justify-self 속성의 값을 적절하게 사용

• 대문자로 변환하는 스타일링시 text-transform 값을 uppercase로 설정하는 경우와 font-varient 값을 small-caps로 설정하는 경우 어떤 차이가 있는가?

: 둘 다 대문자로 변환된다는 점은 동일, 폰트 크기에 차이가 있음
: small-caps는 폰트 크기가 소문자로 적용되면서 변환됨

• transform 속성을 사용하여 어떻게 세로축 기준 중앙 정렬을 할 수 있는가?

: position 값을 absolute로 설정했다면 먼저 top 값을 50%로 지정, 그러면 부모 요소 높이의 50% 지점에서 배치가 시작될 것임
: 그 후 transform의 값으로 transformY에 자신 높이 값의 절반만큼 음수로 설정하면 세로축 기준 중앙 정렬된 것처럼 보임

• flex 하위 요소에 order 속성 값을 -1로 설정하면 어떻게 되는가?

: 마크업 순서에 상관없이 설정한 요소를 가장 우선적으로 배치함

• 뷰포트 크기가 축소되면서 button의 텍스트가 세로로 배치되는 경우 이를 어떻게 해결할 수 있는가?

: white-space 속성의 값을 nowrap으로 설정하면 줄 바꿈을 방지할 수 있음

• 반응형 디자인시 미디어 쿼리로 뷰포트 크기를 나누는 보편적인 기준은 무엇인가?

: 보통 뷰포트 너비의 값이 768px 이상인지, 이하인지에 따라 데스크탑/모바일 구분

• 반응형 디자인시 모바일 버전을 먼저 설계하는 경우의 이점은 무엇인가?

: 데스크탑을 먼저 구현하고 모바일을 구현하면 화면 크기가 작음에도 불구하고 데스크탑의 자원을 모두 받아오므로 성능이 저하될 수밖에 없음
: 모바일을 먼저 설계하고 데스크탑에서 보여져야 할 요소를 추가하는 방식으로 설계하는 것이 바람직함

• 반응형 디자인시 주목해야 할 meta 태그는 무엇인가?

: viewport 관련 값을 설정할 수 있는 meta 태그 중요함
: 확대/축소 가능 여부, 비율, 너비 등 지정 가능

• 반응형 디자인시 값의 단위는 어떤 것을 사용해야 하는 것이 바람직한가?

: 고정 단위인 px을 사용하기보다 상대 단위인 rem, em 등을 사용해야 다양한 장치 크기에 따라 유연하게 스타일링할 수 있음

• 반응형 디자인시 box-sizing 값을 어떻게 지정하는 것이 바람직한가?

: border-box로 설정해야 함
: 장치마다 뷰포트 크기가 다르므로 여백이 다 다르게 설정되기 때문에, content-box로 설정하면 장치마다 크기가 달라지게 됨

• 반응형 디자인시 max-width, width 속성은 각각 어떤 경우에 사용하는가?

: 비트맵 방식 이미지를 삽입하는 경우 이미지 크기가 원본보다 커지면 안 되므로 max-width로 크기 제한 필요
: 비디오나 iframe 같은 경우 화질 이슈를 걱정하지 않아도 되므로 width를 사용해도 무방함

• 반응형 디자인시 이미지를 원본, 2배율로 2가지를 준비한다면 그 이유는 무엇인가?

: 2배율의 이미지는 고해상도의 레티나 디스플레이에 대응하기 위한 목적

• 성능 개선에 도움이 되는 이미지 포맷은 무엇인가?

: webp 포맷을 사용하면 압축률과 품질이 좋기 때문에 적은 용량으로 질 높은 이미지를 삽입할 수 있음

• CSS 파일에 @import로 외부 파일을 많이 연결하면 어떤 이슈가 발생하는가?

: 외부 파일을 순차적으로 읽어오기 때문에 그만큼 렌더링이 오래 걸림
: HTML의 link 태그에 개별적으로 사용하거나, Sass 등의 프레임워크 사용하여 여러 파일을 통합시키는 것이 바람직함

• CSS에서 변수를 어떻게 사용하고, 변수 사용시 이점은 무엇인가?

: :root 선택자 지정 후 변수 명과 값을 설정하면 됨
: 크기나 굵기 등 폰트에 관련된 속성, 색상에 관련된 속성, 여백에 관련된 속성 등을 설정해놓고 사용하면 편리함
: 변수를 불러올 때는 var 함수의 값으로 지정한 변수명을 설정
: 다만 예전 브라우저에서는 작동하지 않는 경우 있으니 확인 필요

• CSS에서 할당한 변수를 재할당하여 사용하면 어떤 이점이 있는가?

: 하나의 변수만 바뀌어도 연결되어 한 번에 바꿀 수 있기 때문에 편리함

• BEM 방식은 무엇이고, 보편적으로 어떻게 사용하는가?
  
  
• grid는 무엇이고, 어떻게 사용하는가?

🔸 Git & CLI

• 원격 저장소의 public repository에서 특정 폴더만 추출하여 설치하는 방법은 무엇인가?

: degit이 설치되어 있지 않은 경우 일회성 설치 명령어인 npx 사용하여 $ npx degit "저장소의 경로/불러올 repository 이름" "설치할 이름"과 같이 명령어 작성

• live-server 패키지 설치 후 서버를 작동시키는 명령어는 무엇인가?

: $ npm run server로 라이브 서버 실행 가능