HTML/CSS
HTML
リファレンス
1. 일반적으로 CSS <link> 태그를 <head></head> 태그 사이에 위치시키고,
JS <script> 태그를 <body> 태그가 끝나기 직전에 위치시키는 이유가 무엇인가요?
FOUC(flashes of unstyled content, 스타일 없는 내용이 잠깐 보이는 현상)을 방지할 수 있고,
유의미한 화면을 빠르게 보여줄 수 있다.(두 가지가 우선적으로 로딩됨)
HTML과 CSS 로딩이 끝난 직후에 JS파일을 로딩하기 때문에 DOM렌더링 후 JS 적용까지의 시차를 최소화할 수 있고,
html 로딩 모두 끝난 후 script가 읽히기 때문에 DOM 렌더링을 방해하지 않는다.2. <script> <script async> <script defer> 태그들의 차이점은 무엇인가요?
동적인 웹을 만들기 위해서는 JavaScript 파일을 불러와야하는데,
JavaScript 파일은 용량이 크기 때문에 비동기 방식으로 불러와서 로드 시간을 줄여야한다.
이를 가능하게 만들어주는 것이 <script> 태그이다.
<script> 태그는 DOM을 따라 순서대로 실행된다.
<script async>는 DOM이나 다른 스크립트에 의존성이 없고, 실행 순서가 보장되지 않는다.
<script defer>는 DOM이나 다른 스크립트에 의존성이 있고, 선언한대로 실행 순서가 보장된다.3. 시맨틱 태그(sementic tag) 에 대해 설명하세요.
시맨틱 태그는 의미를 가지는 태그이다.
시맨틱 태그는 문서의 구조와 의미를 브라우저와 개발자 모두에게 명확하게 설명한다.
그리고 유저가 웹에서 검색을 할 때 웹페이지에서 해당 코드를 찾아
그 정보를 기반으로 의미있는 내용이 출력되도록 할 수 있다.CSS
リファレンス
1. CSS보다 SCSS/SASS가 가진 장점에 대해 설명하세요.
SCSS/SASS는 불필요한 선택자(Selector)의 과용과 연산 기능의 한계,
구문(Statement)의 부재 등 프로젝트가 커지면서 복잡해지는 CSS 작업을 쉽게 해주며
가독성과 재사용성을 높여주어 유지보수가 쉬워지게 도와준다.
SASS보다는 SCSS가 더 넓은 범용성과 CSS의 호환성을 가지고 있기 때문에 사용이 권장된다.2. id와 class 셀렉터의 차이점에 대해 설명하세요.
id는 각 element에 고유한 id를 부여하는 방법으로, #이름 방식으로 사용하며,
하나의 문서에 한 번 밖에 쓸 수 없다.
class는 그룹으로 묶어서 스타일을 지정할 때 쓰는 이름으로,
.이름 방식으로 나타내며, 여러 태그에 하나의 class를 부여할 수도 있고,
하나의 태그에 여러 class를 부여할 수도 있다. 3. CSS 박스 모델에 대해서 설명하세요.
content: 택스트나 이미지등 박스의 실질적인 내용
padding: 내용과 테두리 사이의 간격, 눈에 안보임
border: 내용과 패딩 주변을 감싸는 테두리
margin: 테두리와 이웃하는 요소 사이의 간격, 눈에 안보임
リファレンス
4. CSS에서 px, em, rem, vh, vw 단위들의 차이점은 무엇인가요?
px: 픽셀단위에 따라 정해지기 때문에 사용자가 임의로 정의할 수 없는 고정된 값, 가장 기본이 되는 단위
em: 부모 요소를 기준으로 자식 요소의 크기를 정하는 것
rem(root em): 가장 최상단(root) 기준으로 맞추는 것
vh(verticah height): 뷰포트(화면의 크기)의 높이와 비례
vw(vertical width): 뷰포트(화면의 크기)의 너비와 비례
→ 반응형 만들기에 유용5. CSS 레이아웃 기법의 종류와 특징에 대해서 설명하세요. (grid, flexbox)
Grid Layout: 페이지를 여러 주요 영역으로 나누거나, 크기와 위치 및 문서 계층 구조의 관점에서
HTML 기본 요소로 작성된 콘트롤 간의 관계를 정의
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
grid-auto-rows: minmax(100px, auto);
}
.one {
grid-column: 1 / 3;
grid-row: 1;
}
.two {
grid-column: 2 / 4;
grid-row: 1 / 3;
}
.three {
grid-column: 1;
grid-row: 2 / 5;
}
.four {
grid-column: 3;
grid-row: 3;
}
.five {
grid-column: 2;
grid-row: 4;
}
.six {
grid-column: 3;
grid-row: 4;
}
Flexbox: flexbox는 flexbox 인터페이스 내의 아이템 간 공간 배분과
강력한 정렬 기능을 제공하기 위한 1차원 레이아웃 모델로 설계되었다.
레이아웃을 다룰 때 한 번에 하나의 차원(행이나 열)만을 다룬다.
반면에 grid Layout은 행과 열을 함께 조절하는 2차원 모델이다.
リファレンス
6. CSS in JS(styled component)의 장단점에 대해서 설명하세요.
Styled Component의 장점으로 Scss 라이브러리 설치 없이 Scss 문법을 사용할 수 있다.
또한 Material UI 혹은 Ant Design 라이브러리를 사용할 때 다른 방식들보다 커스터마이징이 쉽다.
해당 컴포넌트 이름을 그대로 가져와 사용하면 되기 때문이다.
다른 방식들의 경우 Material UI와 Ant Design에서 지정한 클래스명 혹은 태그를 알아야 되는 번거로움이 있다.
classname을 사용하지 않고 스타일을 줄 수 있기 때문에,
이럴 때는 classname 중복돼서 생기는 문제를 해결할 수 있다.
(이건 Styled Component만의 장점이라고 할 수는 없다.)
마지막으로 component의 props를 참조할 수 있으며 props의 값에 따라 스타일을 다르게 코딩할 수 있다.
단점으로는 css를 줄 태그는 다 컴포넌트로 만들어야 한다는 점이다.
이는 가독성을 떨어트린다.
이에 최상위 요소만 컴포넌트를 주고 자식 요소들에게는
classname을 적절히 사용하여 컴포넌트를 남발하는 코딩을 막을 수 있다.
다른 단점으로는 css 수정할 때마다 해당하는 컴포넌트 파일 위치를 찾아야 하는 번거로움이 있다.
하지만 이는 장점도 될 수 있다 생각한다. 해당 컴포넌트에서 바로 적용된 스타일을 확인할 수 있기 때문이다.Reference
この問題について(HTML/CSS), 我々は、より多くの情報をここで見つけました https://velog.io/@soheey/csテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol