[ 면접 준비 ] 프론트엔드 개발자 면접 준비 , HTML + CSS

안녕하세요!~ 오늘 프론트엔드 개발자로써 면접 준비 과정을 정리해 기록해봤습니다.

DOCTYPE 이란 무엇인가요?

Doctype (Document Type Declaration)은 "문서 현식 선언", 또는 doctype이란 문서의 유형을 정의하기 위해 사용하는 선언문입니다. 문서 타입 정의는 HTML5, XHTML, HTML의 세가지 문서 유형이 존재하며 웹 문서의 시작을 알려주며 태그보다 먼저 선언하며 DOCTYPE은 웹 브라우저에서 처리할 문서가 HTML이며 어떠한 버전으로 사용했으니, 해당 방식대로 해석하라는 의미를 갖습니다.

웹 브라우저에서는 문서 형식 선언이 없는 HTML 문서를 쿼크 모드로 렌더링하지만, 문서 형식 선언이 있는 HTML 문서를 표준 모드로 랜더링하기 때문에, 문서 형식 선언을 이용해서 어떤 웹 페이지가 모든 웹 브라우저에서 같은 레이아웃으로 제공되도록 할 수 있습니다.

메타 태그(meta Tag)이란?

메타 태그는 페이지에 대한 중요한 정보를 검색 엔진에 제공하는 요소로 HTML 코드의 헤더 섹션에 있습니다. 메타 태그는 검색 엔진에 사용자에게 페이지를 표시하는 방법과 검색 결과에 표시되는 방법을 알려줍니다.

메타데이터(Metadata)는 몇 가지 다른 분야에서 서로 다른 것을 참조할 수 있지만 SEO와 관련하여 매우 구체적인 매개변수 세트를 가지고 있습니다. 여기에는 메타 타이틀(Meta titles), 메타 디스크립션(Meta descriptions), 그리고 헤더(headers)가 있습니다. 두 가지 중요한 예외는 일반적인 메타 태그(Meta tags)와 메타 키워드(Meta keywords)입니다.

시맨틱 태그 ( Semantic Tag )이란?

Semantic은 '의미의', '의미론적인'이라는 뜻을 가기며 시맨틱 태그란 의미가 있는 태그라고 합니다. div나 span과 같이 의미가 없는 태그는 태그 이름만 보고는 어떤 내용인지 전혀 유추할 수가 없는 반면, form, table, article 등 의미가 있는 태그는 내용을 명확하게 정의합니다. 따라서 몇가지 중요한 테그들 정리해봤습니다.

header : 일반적으로 페이지 제목, 소개 글, 로고 또는 아이콘, 저작권 정보, 검색 양식, 작성자 이름 등을 포함합니다.

nav : 메뉴, 목차 등에 사용됩니다.

aside : 감접적으로 문서와 관련된 내용 들어가고 사이드바 상자로 사용합니다.

main : 지배적인 콘텐츠 영역을 나타내는 태그입니다.

section : 구체적인 시맨틱 태그가 없는 문서의 독립적인 영역을 나타냅니다.

article : 독립적으로 배포 또는 재사용되도록 의도 된 문서입니다. 게시물, 잡지 또는 신문 기사, 블로그 작성글, 제품 카드, 사용자가 제출한 댓글, 대화형 위젯 등이 있습니다.

footer : 일반적으로 섹션의 작성자에 대한 정보, 저작권 데이터 또는 관련 문서에 대한 링크를 포함됩니다.

em , strong : strong은 (bold)볼드체로 나타나며 em은 기울기체 (italic)로 나타납니다.

p : 태그는 HTML 문서의 단락을 정의합니다

CSS Position

CSS의 position 속성은 HTML에서 element를 배치하는 방법을 지정하는 속성입니다. 따라서 position 속성에 쓸 수 있는 값은 5개가 있습니다.

static(기본 값) :
- element에 position을 지정하지 않았을 때 기본으로 적용되는 값이 static 입니다.
- position은 static을 경우 top, right, bottom, left, z-index 속성들이 아무런 효과를 주지 못합니다.
- 만약 div element에 top: 100px; 이라고 효과를 주어도 아무런 변화가 없는 것을 확인하실 수 있습니다.

relative :
- static과 마찬가지로 element가 문서의 일반적인 흐름에 따라 배치가 됩니다.
- relative가 적용된 요소의 배치만 변경되고 다른 부분의 배치에는 영향을 주지 않는 것을 확인할 수 있습니다.
- relative를 사용시 글자가 겹쳐지게도 보일 수 있으므로 주의가 필요합니다.
- static과의 차이점은 element가 자신의 static 위치에서 top, right, bottom, left와 같은 속성에 의한 상대적인(relative) 위치에 배치된다는 점입니다.

absolute :
- absolute는 element가 문서의 일반적인 흐름을 따르지 않으며 가장 가까운 위치에 있는 조상 element (static 이 아닌)에 상대적 위치로 배치됩니다.
- 조상 element 없으면 body기준으로 됩니다.

fixed [고정] :
- fixed은 absolute와 마찬가지로 element가 문서의 일반적인 흐름에서 제거됩니다.
- 대신, 스크린의 뷰포트(웹페이지가 사용자에게 보여지는 영역)를 기준으로 한 위치에 배치됩니다.
- 즉, 스크롤되어도 움직이지 않는 고정된 자리를 갖게 됩니다.

sticky :
- sticky는 element가 문서의 일반적인 흐름에 따라 배치되며 top, right, bottom, left 속성들의 값을 기준으로 flow root 및 해당 element를 포함하는 containing block에 대한 상대적(relative) 위치에 배치됩니다.

sticky는 relative와 마찬가지로 다른 요소들에 영향을 주지 않는 특징을 가집니다.

fixed와 sticky의 차이점 :
- fixed와 sticky 둘 다 스크롤을 하더라도 보여지는 공통점을 가지고 이 두 position의 차이점은 fixed는 문서의 흐름 을 따르지 않고 뷰포트를 기준으로 배치가 되는 반면 sticky는 문서의 흐름을 따르면서 containing box를 기준으로 상대적인 위치에 배치됩니다.
- 즉, fixed를 쓰면 요소들이 겹쳐보일 수 있는 상황이 나올 수 있는 반면 sticky를 쓰면 그러한 상황을 예방할 수 있습니다.

CSS DISPLAY

Css에서 Display은 요소를 어떻게 보여줄지 레이아웃을 결정하는 속성입니다.

none : 요소를 렌더링하지 않도록 설정하고 visibility 속성을 hidden으로 설정한 것과 달리 영역도 차지하지 않습니다.

inline : span태그, a태그, b태그, i태그, img태그 등이 해당됩니다. block과 달리 줄 바꿈이 되지 않고, width와 height, 여백을 지정할 수 없으며 문서에서 볼드, 이탤릭, 색상, 밑줄 등 글자나 문장에 효과를 주기 위해 존재하는 단위라고 할 수 있습니다.

block : div태그, p태그, h태그, li태그, form태그 등이 해당됩니다. 가로 영역을 모두 차지하며 항상 줄 바꿈이 되어 새로운 라인에서 시작됩니다. 문서에서 문단을 표시할 때, 한 문단이 끝난 뒤에 나타나는 요소는 항상 다음 줄에 표시되던 것과 비슷한 맥락이고 width와 height 속성을 지정할 수 있습니다.

inline-block : 요소 자체는 inline 요소처럼 동작하지만 줄바꿈이 되지 않고 해당 요소 내부에서는 블록 요소처럼 동작합니다. width와 height 속성을 지정할 수 있습니다.

* flex : 아이템들을 가로 방향으로 배치할 수 있는 방식으로 요소의 크기가 불문명하거나 동적인 경우에도 각 요소를 정렬할 수 있는 효율적인 방법을 제공하고 Flex의 속성은 컨테이너에 적용되는 속성, 아이템에 적용되는 속성으로 나눕니다.

[ * justify-content ] 가로선 상에서의 정렬 방식 (위치)

flex-start : 요소들을 컨테이너의 왼쪽으로 정렬
flex-end : 요소들을 컨테이너의 오른쪽으로 정렬
center : 요소들을 컨테이너의 가운데로 정렬
space-between : 요소들 사이에 동일한 간격을 둠
space-around : 요소들 주위에 동일한 간격을 둠

[ * align-items ] 세로선 상에서의 정렬 방식 (위치)

flex-start : 요소들을 컨테이너의 꼭대기로 정렬
flex-end : 요소들을 컨테이너의 바닥으로 정렬
center : 요소들을 컨테이너의 세로선 상의 가운데로 정렬
baseline : 요소들을 컨테이너의 시작 위치에 정렬
stretch : 요소들을 컨테이너에 맞도록 늘림

[ align-content ] 여러줄의 간격 지정 ( 한 줄일 경우 효과 없음 )

flex-start : 여러 줄들을 컨테이너의 꼭대기에 정렬
flex-end : 여러 줄들을 컨테이너의 바닥에 정렬
center : 여러 줄들을 세로선 상의 가운데에 정렬
space-between : 여러 줄들 사이에 동일한 간격을 둠
space-around : 여러 줄들 주위에 동일한 간격을 둠
stretch : 여러 줄들을 컨테이너에 맞도록 늘림

[ * flex-direction ] 컨테이너 내 요소들의 정렬 방향

row : 요소들을 텍스트의 방향과 동일하게 정렬
row-reverse : 요소들을 텍스트의 반대 방향으로 정렬
column : 요소들을 위에서 아래로 정렬
column-reverse : 요소들을 아래에서 위로 정렬

[ flex-wrap ] items의 줄 바꿈 설정

nowrap: 모든 요소를 한 줄에 정렬
wrap: 요소들을 여러 줄에 걸쳐 정렬
wrap-reverse: 요소들을 여러 줄에 걸쳐 '반대로' 정렬

[ flex-flow ] flex-direction와 flex-wrap의 단축 속성

< flex-direction인자 > < flex-wrap인자 >

[ order ] flex item의 순서 결정

정수 (숫자가 작을수록 앞으로, 클수록 뒤에 위치하게 됨 )

[ * align-self ] 해당 아이템의 세로선 상에서의 정렬 방식 , align-self를 개별 요소에 적용할 수 있는 방식

baseline : 교차축 기준으로, 부모 컨테이너의 기본선에 위치
initial : 이 속성의 기본값으로 설정
inherit : 부모 요소의 속성값 상속

* grid : Flex와는 다르게 2차원으로 배치하는 방식으로 column과 row의 비율이나 크기를 지정한다. grid-template-rows는 가로에 배치할 셀들의 비율이나 크기를 지정하는 속성이고 grid-template-columns는 세로로 배치할 셀들의 비율이나 크기를 나타납니다.

grid-template-rows나 grid-template-columns에 입력할 수 있는 단위는 px, fr이 있는데 fr은 fraction으로 숫자 비율대로 트랙의 크기를 나누는 것이다. 즉 은 1:1:1로 나누는 것이고, 첫번째 셀은 100px, 두번째 셀과 세번째 셀은 남은 부분을 3:1로 나누어집니다.

grid-template-columns : 1fr 1fr 1fr

grid-template-columns : 100px 3fr 1fr

* table : CSS display: table 속성은 말 그대로 요소를 table의 성질을 갖게 한다는 뜻합니다

display : table-row // tr 요소처럼 표현하기
display : table-column // col 요소처럼 표현하기
display : table-cell // td 요소처럼 표현하기
display : table-caption // caption요소처럼 표현하기

CSS Box Model

모든 HTML 요소는 박스(box) 모양으로 구성되며, 이것을 박스 모델(box model)이라고 부릅니다.
박스 모델은 HTML 요소를 패딩(padding), 테두리(border), 마진(margin), 그리고 내용(content)으로 구분합니다.

content : 텍스트나 이미지가 들어있는 박스의 실질적인 내용 부분입니다.
padding : 내용과 테두리 사이의 간격입니다. 패딩은 눈에 보이지 않습니다.
border : 내용와 패딩 주변을 감싸는 테두리입니다.
margin : 테두리와 이웃하는 요소 사이의 간격입니다. 마진은 눈에 보이지 않습니다.

Margin, Padding

Margin은 Border 바깥쪽을 차지한다. 주변 요소와 거리를 두기 위한 영역입니다.

1. 속성 4개 사용 : 시계방향 (위, 오른쪽, 아래, 왼쪽) 순서로 값을 주면 된니다

margin: 10px 5px 10px 5px

// margin-top : 10px;
// margin-right : 5px;
// margin-bottom : 10px;
// margin-left : 5px;

2. 속성 2개 사용: 2개의 속성만 사용할 경우, 첫번째 값은 위와 아래 / 두번째 값은 오른쪽과 왼쪽 여백을 의미합니다

margin: 10px 5px

// margin-top and margin-bottom : 10px
// marign-right and margin-left : 5px

3. 속성 1개 사용 : 1개의 속성만 사용할 경우, 위, 오른쪽, 아래, 왼쪽 모두 같은 값을 사용하게 됩니다.

margin : 10px;

// margin-top : 10px;
// margin-right : 10px;
// margin-bottom : 10px;
// margin-left : 10px;

Padding은 Content와 Border 사이의 여백을 나타낸는 영역이며 Content 영역이 배경색이나 배경 이미지를 가질 때, 이 Padding 영역까지도 영향을 미친다. 즉, Padding 영역도 Content의 연장으로 볼 수 있습니다.

padding 속성 1개 사용할 때 패딩의 1개 속성만 사용할 경우, 안쪽여백이 변경됩니다.

padding : 20px;

차이점 : Margin만 음수값이나 auto 값을 적용 가능합니다

CSS에서 px, em, rem, vh, vw 단위들의 차이점

px : 가장 기본적으로 사용되는 단위입니다. 이것은 픽셀단위라는 고정값에 따라 정해지기 때문에 화면의 크기나 확대와 같이 사용자가 임의로 정의할 수 없는 고정된 값을 말합니다. 이 단위는 가장 기본이 되는 단위이기 때문에 앞으로 설명할 다른 단위들의 기준이 됩니다.

em: em은 부모 요소를 기준으로 자식 요소의 크기를 정하는 것을 말합니다.

  <div class="body">
    <div class="parent">
      <div> class="child"</div>
    </div>
  </div>  

.body { font-size: 10px }
.parent { font-size: 2em } // 20px
.child { font-size: 2em }  // 40px

다음과 같이 바디 요소를 10px로 정의했을 때 부모 요소를 2em 으로 정의하면 부모 요소는 10px*2=20px로 정의됩니다.

따라서 부모 요소는 이미 20px 이고 자식 요소도 2배라서 자식 요소는 40px 값을 가지게 됩니다.

rem : rem은 root em의 약자입니다. 즉 위와 같은 공식을 가장 최상단(root) 기준으로 맞추겠다는 소리인데요. 최상위 태그 html에 정의된 사이즈를 기준으로 배수하겠다는 것을 의미합니다. rem 시스템은 모바일 환경에서 접근성을 위해 글자 크기를 키우거나 그리드 시스템에 사용하기에 유용합니다.

  <div class="body">
    <div class="parent">
      <div> class="child"</div>
    </div>
  </div>  

.body { font-size: 10px }
.parent { font-size: 2rem } // 20px
.child { font-size: 2rem }  // 20px

vh,vw : vh와 vw는 각각 verticah height, vertical width의 약자입니다. 이것들은 vieport (화면의 크기)의 높이와 너비에 비례합니다. 이 단위는 반응형 페이지를 만들 때 아주아주 유용하게 사용될 수 있습니다.
1vh는 실제 높이값의 1/100을 나타냅니다. 즉 눈에 보이는 화면 높이가 1000px일 때 1vh는 10px이 됩니다.

div { 
  height: 50vh; 
  width: 100vw; 
}

vmin (Viewport Minimum), vmax (Viewport Maximum) : vmin은 뷰포트 너비 또는 높이를 기준으로 하는 최소 값입니다. 이어서 vmax은 뷰포트 너비 또는 높이를 기준으로 하는 최대 값이라고 합니다.

vmin, vmax 값은 뷰포트의 너비, 높이 길이 중 '작은' 혹은 '큰' 길이를 기준으로 값이 동적으로 설정됩니다.
예를 들어 1000 × 500 크기의 뷰포트가 있다고 했을 때 1vmin 값은 5px 이고, 1vmax 값은 10px로 계산됩니다. 크기가 1200 × 570 으로 변경되면 1vmin은 5.7px, 1vmax는 12px이 됩니다.

reset.css, nomalize.css는 무엇인가요?

간단히 번역해보면 브라우저마다 서로 다른 스타일링이 있을 때, reset은 기본 스타일의 대부분을 제거하고 새롭게 정의하는 스타일을 조금 추가하며 normalize는 브라우저마다 일관되지 않는 스타일링만 제거합니다.

reset CSS : 브라우저마다 다르게 설정된 요소의 기본 스타일링을 모두 초기화하는 방식이고
크로스 브라우징을 위해 필요한 속성을 임의로 지정하여 파일로 통합한 것입니다.

normalize CSS : reset CSS와 방식은 동일하지만, 사용하기 좋은 기본 값들은 초기화하지 않고 유지하고
CDN 기법을 사용하여 head 영역에 link 태그로 삽입할 수 있으며 부분적으로 개선하는 방식이기 때문에 reset CSS보다 성능 면에서 유리합니다

크로스 브라우징 이슈를 해결하기 위해 User Agent Stylesheet의 재정의는 필수적이고, 따라서 reset CSS나 normalize CSS의 사용 역시 피해갈 수 없고 성능을 생각한다면 무작정 reset CSS를 사용하는 것보다 normalize CSS를 사용하는 편이 바람직할 것입니다.

Sass, Css Module, Css In Js + 각각 장단점

전통적인 방법으로는 CSS를 별도의 파일로 저장하고 HTML의 link태그를 이용해 적용합니다.
리액트에서는 컴포넌트 아키텍쳐를 이용하기때문에 컴포넌트 간의 의존성을 최소화하고 내부 응집도를 높히는게 좋습니다. 따라서 css-module과 css-in-js로 자바스크립트를 이용해 CSS를 만드는게 좋습니다.

일반 css를 사용해 잘 작동 되는 모습이지만 npm run build 명령으로 패키징 해보면 build폴더의 static폴더를 보면 파일들이 빌드되면서 css파일들이 각각 갖고있던 클래스들 덮어 씌워지는 걸 알 수 있습니다. 클래스명이 서로 갖기 때문에 클래스명이 충돌되며 덮어씌워집니다. 이것은 바로 일반적인 css의 단점입니다.

css-module : css-module을 이용하면 클래스명이 충돌하는 단점을 극복할 수 있습니다.
css-module은 간결한 클래스명을 이용해서 컴포넌트 단위로 스타일을 적용할 때 좋습니다.

일반 Style.css 파일을 Style.module.css 파일로 변경합니다.

import style from './Style.module.css'

css가 덮어 씌워지지않고 잘 적용된 걸 볼 수 있고 클래스 이름에 hash값이 붙어 고유한 값으로 인식됩니다. 따라서 클래스명이 같더라도 덮어씌워지지 않습니다.

Sass : CSS는 HTML 태그를 꾸미거나 효과를 넣어 주는 등 디자인 요소를 추가할 때 사용하는 전처리 과정입니다. 프로젝트 규모가 커지면 CSS는 불가피하게 가독성이 떨어지는 등 유지보수의 어려움을 주는 요소가 됩니다. 코드의 재활용성을 올리고, 가독성을 올리는 등 CSS에서 보이던 단점을 보완하고, 개발의 효율을 올리기 위해 등장한 개념이 SASS/SCSS라고 합니다.

SASS는 CSS의 태생적 한계를 보완하기 위해 아래와 같은 추가기능과 유용한 도구들을 제공한다.
- 변수의 사용
- 조건문과 반복문
- Import
- Nesting
- Mixin
- Extend/Inheritance

SASS와 SCSS의 차이:

SASS = Syntactically Awesome Style Sheets = 문법적으로 멋진 스타일 시트
SCSS = Sassy CSS = 멋진 CSS

SCSS는 중첩, 변수 선언, 연산자 등 많은 장점을 가지고 있습니다. 대표적인 장점이라고 볼 수 있는 셀렉터 중첩기능이며

셀렉터 안에 셀렉터를 넣어 중첩을 시켜 코드 가독성이 좋아집니다.

// app.css , 일반적인 CSS 

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  display: inline-block;
}

// SASS로 구현한 모습
  
nav
  ul
    margin: 0
    padding: 0
    list-style: none

  li
    display: inline-block

//  SCSS로 구현한 모습

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }
}

SCSS 변수 사용 : 한번 정해놓게 계속 사용 가능합니다

$color: #ed5b46;
$borderRadius: 5px;

div {
    background-color: $color;
    border-radius: $borderRadius;
}

SCSS 중첩 ( Nesting ) : SCSS 사용 중 가장 큰 장점 중 하나라고 생각하는 기능입니다. 셀렉터를 중첩시킨다던지, 속성을 중첩시키거나 상위 요소를 참조하는 것이 가능합니다.

CSS-IN-JS : CSS코드를 자바스크립트 파일안에서 작성합니다. 자바스크립트 내에서 관리하기 때문에 내부응집도가 올라가고, 동적으로 CSS를 변경하기도 쉽습니다.

Styled-components 패키지를 사용해보겠습니다. Styled Components는 CSS-in-JS 스타일링을 위한 프레임워크입니다. 자바스크립트의 태그가 지정된 템플릿 리터럴과 CSS의 기능을 사용하여 구성 요소에 반응하는 스타일을 제공합니다.

Styled Components 장점은 다음과 같습니다.

- CSS 모델을 문서 레벨이 아닌 컴포넌트 레벨로 추상화하는 모듈성

- CSS-in-JS는 JavaScript 환경을 최대한 활용

- 자바스크립트와 CSS 사이의 상수와 함수를 공유

- 현재 사용 중인 스타일만 DOM에 포함

Styled Components 단점은 짧은 길이의 유니크 한 클래스를 자동으로 생성하는 코드 경량화 단점으로는 러닝 커브(Learning Curve), 새로운 의존성 발생, 별도의 라이브러리 설치에 따른 번들 크기 증대 및 CSS에 비해 느린 속도 등을 들 수 있습니다. Styled Components는 스타일링을 위한 코드 사용량이 줄어들고 CSS 문법에 친화적입니다.

import styled from 'styled-components';

const Text = styled.div`
  color: white,
  background: black
`;

<Text>Hello</Text>

float : 레이아웃을 구성할 때 블록 레벨 요소를 가로 정렬하기 위해 사용되는 기법

z-index : position 속성은 태그를 어떻게 위치 시킬지를 정의하고, z-index는 어느 객체가 앞으로 나오고 뒤에 나올지 배치 순서를 결정하는 속성입니다. z-index는 포토샵으로 생각한다면 레이어를 생각할 수 있으며, 값이 클 수록 상단에, 값이 작을 수록 하단에 위치합니다. z-index는 position 속성이 적용된 요소에서만 작동합니다.

참고 블로그 문서 :

1. HTML-DOCTYPE

2. Meta Tags

3. CSS Position
4. Display 속성

5. Css 단위

'면접준비' 카테고리의 다른 글

[프론트엔드 면접] HTTP와 HTTPS의 개념 및 차이점 (6)	2024.02.12
[ 프론트엔드 면접 ] Vue.js 면접 질문 정리 (1)	2023.04.07
[ 리액트 면접준비 ] 프론트엔드 면접 준비, React.js (3)	2023.02.21
[ 면접 준비 ] 프론트엔드 개발자 면접 준비 , JavaSctipt (0)	2023.02.21
[ 면접 준비 ] 프론트엔드 면접 준비, 기술 면접 (0)	2023.02.18