- http://www.thatjsdude.com/interview/css.html 페이지를 번역한 글입니다.
- Translated by Do Junggeun (도정근)
CSS
삭제된 것들
아래의 내용은 전문 디자이너를 위한 것으로 생각되고 개발자들에게는 큰 도움이 될 것 같지 않은 것들입니다.
- 자손 결합자는 어떻게 사용하나요?
- css에서 모듈화를 어떻게 구현하나요?
- 특정 브라우저(IE)에서 작동하지 않는 문제를 어떻게 해결하나요?
- 어떻게 내 사이트의 브라우저 호환성을 테스트하나요?
- 그리드 레이아웃이란 무엇인가요?
- 반응형 사이트는 어떻게 만드나요?
- 텍스트 그림자, 상자 그림자(text shadows, box shadows)는 어떻게 사용하나요?
1. float
Question: float은 어떤 기능을 하나요?
Answer:
float는 엘리먼트를 텍스트를 감싸고 있는 페이지의 측면(side)으로 밀어냅니다. float를 이용하여 전체 페이지 또는 작은 영역을 만들 수 있습니다. 만약 float된 엘리먼트의 크기가 바뀌면 변경 사항을 반영하기 위해 엘리먼트 주변의 텍스트가 재배치됩니다. float의 값은 left, right, none, inherit이 될 수 있습니다.
만약 이미지의 'float: left;'로 설정한다면 이미지는 margin, padding이나 다른 block 엘리먼트의 border에 닿을 때까지 왼쪽으로 밀려납니다. 일반적이라면 text는 오른 쪽을 감싸게 됩니다.
아래에 예시가 있습니다.
<style>
.container{
width: 200px;
height: 150px;
border: 2px solid purple;
}
.box{
float: left;
width: 50px;
height: 30px;
border: 2px solid gray;
margin: 5px;
}
</style>
<div class="container">
<div class="box"><span>1</span></div>
<div class="box"><span>2</span></div>
<div class="box"><span>3</span></div>
<div class="box"><span>4</span></div>
<div class="box"><span>5</span></div>
</div> 만약 인터뷰어가 CSS에 대한 한 가지 질문만을 하고자 한다면 float에 대한 것일 가능성이 높습니다.
extra: W3.org: floating elements에서 position의 제약 사항을 읽어보세요.
ref: css-tricks: float, float 101
2. clear
Question: 어떻게 float된 엘리먼트의 한 쪽을 clear 하나요?
Answer: 엘리먼트의 slide를 clear하면 float된 엘리먼트는 그 방향으로 적용되지 않는다.clear: left로 설정하면 엘리먼트는 왼쪽의 float된 모든 엘리먼트 아래로 이동된다. clear는 float된 엘리먼트 주위의 엘리먼트가 wrap되는 것을 중지하는데 사용된다.
<style>
.clearLeft{
clear: left;
}
</style>
<div class="container">
<div class="box"><span>1</span></div>
<div class="box clearLeft"><span>2</span></div>
<div class="box"><span>3</span></div>
<div class="box"><span>4</span></div>
<div class="box"><span>5</span></div>
</div> clear left는 두 번째 박스에 적용된다. 다른 엘리먼트들은 그 박스의 왼쪽에 있지 않으므로 새로운 열에 배치된다.
What the heck? 만약 질문이나 답변이 이해되지 않는다면, in css-tricks: all about floats의 "Techniques for clearing floats" 부분을 읽어보세요.
ref: W3.org: clear
3. rapid fire : 속사포
Question: CSS 속성들은 대소문자를 구분하나요?
Answer: no.
Question: css 선택자가 style이 적용되지 않는 경우와 섞여있는 이유는 무엇인가요?
Answer: html id와 class는 대소문자를 구분하기 때문입니다.
Question: margin-top, margin-bottom은 inline 엘리먼트에 적용되나요?
Answer: no.
Question: padding-top, padding-bottom은 inline 엘리먼트에 적용되나요?
Answer: no.
Question: padding-left, padding-right, margin-left, margin-right은 inline 엘리먼트에 적용되나요?
Answer: yes.
Question: font-size: 10rem인 <p> 엘리먼트는 사용자가 브라우저 창의 크기를 변경하거나 드래그할 때 텍스트가 반응하나요?
Answer: no.
Question: 가상 클래스(pseudo class) :checked는 radio나 checkbox 타입의 input 엘리먼트를 선택하지만 <option>엘리먼트는 선택하지 않는다?
Answer: False
Question: HTML 문서에서 가상 클래스 :root는 항상 <html> 엘리먼트를 참조한다?
Answer: True
Question: translate()함수는 엘리먼트의 z축 방향 위치를 변경할 수 있다?
Answer: False
4. units : 단위
Question: px, em, %, pt 중 무엇을 선호하며 그 이유는 무엇인가요?
Answer: 상황에 따라 다릅니다.
px는 1px 또는 복수의 1px이 선명하게 보이도록 보장되기 때문에 선명하면서도 미세하게 조절할 수 있습니다. px는 cascade하지 않은데, 이는 부모 엘리먼트의 font-size와 무관하다는 의미입니다.
em은 글자 크기를 상대적으로 유지하여 글자 크기를 반응형으로 설정할 수 있습니다. em은 선택한 글씨체의 문자 'm'의 너비입니다. 하지만 이 개념은 복잡합니다. 1em은 현재 엘리먼트의 font-size 혹은 브라우저의 font-size 기본값과 같습니다. 만약 font-size가 16px이면 1em = 16px입니다. 일반적으로 default body font-size는 62.5%(10px과 동일)로 설정합니다. em은 cascade합니다.
%는 글자의 크기를 body(부모 엘리먼트)의 font-size에 대해 상대적으로 설정합니다. 따라서 body의 font-size를 적절하게 설정해야 합니다. 이 방식은 사용하기 쉽고 cascade합니다. 예를 들어 부모 엘리먼트가 font-size: 20px, 자식 엘리먼트가 font-size: 50% 이면 자식 엘리먼트의 글자는 10px입니다.
pt(points)는 전통적으로 인쇄에 사용됩니다. 1pt는 1/72인치로 고정된 단위입니다.
ref: css-tricks: length, css-tricks: px, em, %, css font-size
5. position
Question: absolute, relative, fixed and static position은 어떻게 다른가요?
Answer:
absolute는 엘리먼트를 정확히 당신이 원하는 곳에 위치시킵니다. absolute position은 부모 엘리먼트에 대해 상대적으로 배치됩니다. 만약 사용 가능한 부모 엘리먼트가 없으면 페이지 자체에 상대적으로 배치됩니다.
relative는 엘리먼트를 자기 자신(relative position을 적용하지 않을 경우 엘리먼트가 배치될 위치)을 기준으로 위치시킵니다. 예를 들어 엘리먼트에 relative position을 설정하고 top: 10px;을 설정한다면 원래의 위치에서 10px 아래로 내려갑니다.
fixed는 엘리먼트를 viewport 혹은 브라우저 창 자체에 상대적으로 위치시킵니다. viewport는 화면을 스크롤해도 변하지 않기 때문에 fixed 엘리먼트는 스크롤 하더라도 같은 자리에 그대로 위치합니다.
static은 엘리먼트를 문서의 기본적인 흐름에 따라 위치시킵니다. 일반적으로 static position은 엘리먼트에 적용되었을 수 있는 다른 position을 제거하기 위해 사용됩니다.
ref: css positioning in ten steps, css position, MDN: position
6. display vs visibility
Question: visibility: hidden과 display: none의 차이는 무엇인가요?
Answer:
display: none은 엘리먼트를 정상적인 레이아웃에서 제거하고 다른 엘리먼트가 그 자리를 채우게 합니다. visibility: hidden은 태그가 렌더링되지만, 태그는 정상적인 흐름에서 공간만을 차지하고 보이지 않습니다.
이것을 엄밀하게 말하면, display: none은 DOM을 reflow하게 만들고 visibility: hidden는 그렇지 않습니다. 그런데, re-flow는 뭘까요? 알려주지 않아서 미안해요, 구글에서 검색해보세요.
7. inline block
Question: What are the differences between inline, block and inline-block?
Answer:
inline 엘리먼트는 흐름(flow)를 방해하지 않습니다. line 안에 span이 위치한 것을 생각해보세요. 인라인 엘리먼트의 중요한 점은 margin과 padding이 다른 엘리먼트를 수평으로는 밀지만 수직으로는 밀지 않는다는 것입니다. 또, 인라인 엘리먼트는 height와 width를 무시합니다.
block은 흐름을 방해하고 line 내에 들어가지 않습니다. block은 주로 div, section, ul, p, h1와 같은 컨테이너입니다.
inline-block은 inline과 비슷하고 페이지의 흐름에 맞춰집니다. 유일한 차이점은 inline-block은 height와 width를 갖는다는 것입니다.
ref: display
8. box model
Question: box model에 관련된 속성은 무엇이 있나요?
Answer: 기술적으로, height, width, padding, border가 box model의 일부이고 margin도 관련이 있습니다.
Extra: 웹 페이지 내의 모든 것은 size, position, background 등을 조정할 수 있는 box입니다. 각각의 box(content) 영역은 (optionally) padding, border, margin으로 둘러싸질 수 있습니다. 엘리먼트에 height와 width를 설정하는 것은 content의 height와 width를 설정한 것입니다.
ref: W3: box model, css box model, Whats wrong with box model
9. overflow
Question: overflow: hidden이 새로운 block을 생성하나요? create a new block formatting context?
Answer: yes
Extra: overflow 속성은 콘텐츠의 크기가 콘텐츠의 할당된 영역을 초과할 때 콘텐츠를 처리합니다. 영역을 넘어간 컨텐츠를 visible, hidden, scroll 혹은 auto(viewport의 default)로 지정하여 처리할 수 있습니다.
ref: overflow
10. media queries
Question: 어떻게 기기에 맞게 CSS를 적용하나요?
Answer: @media (max-width: 700px){...}는 width가 최대 700px인 기기에만 CSS를 적용한다는 뜻입니다. 이는 그보다 작은 모든 기기에 적용됩니다.
@media (max-width: 700px) and (orientation: landscape){...}는 700px보다 작고 가로가 더 긴 기기에만 적용됩니다.
Question: only는 어떻게 쓰이나요?
Answer: style sheet를 older user agents에서 숨깁니다.
Question: screen은 기기의 물리적인 screen과 브라우저의 viewport 중 어디에 적용되나요?
Answer: Browser's Viewport
ref: how to use media queries, css media queries, W3: media queries
11. pseudo class : 가상 클래스
Question: 사용해본 가상 클래스가 있나요?
Answer: 가상 클래스는 엘리먼트의 특정한 상태를 알려주고, 동적으로 엘리먼트를 스타일링할 수 있도록 해줍니다. 가장 인기 있는 것은 :hover입니다. 이 외에도 :visited, :focus, :nth-child, nth-of-type, :link 등이 사용됩니다.
javaScript를 망치지 않으려면 가상 클래스를 사용하는 것이 좋지만, 가상 클래스는 CSS rule을 처리하고 적용하는 속도가 느립니다.
ref: How to use pseudo classes, meet pseudo classes, list of pseudo classes
pseudo elements
가상 엘리먼트는 콘텐츠를 꾸미는데 도움이 됩니다. 가상 엘리먼트는 가상 클래스가 엘리먼트의 상태를 처리할 때 콘텐츠를 생성합니다. 예로, 모든 paragraph의 :first-letter, :first-line를 사용할 수 있고, :before, :after도 사용할 수 있습니다.
<style>
.pseudo:before{
content: "Starting of Paragraph: ";
font-weight: bolder;
color: purple;
}
</style>
<p class="pseudo">First Paragraph with some content.</p>
<p class="pseudo">Second Paragraph with something else.</p>result:
First Paragraph with some content.
Second Paragraph with something else.
ref: intro to css pseudo element, :before :after, css content, W3: generate content
12. vertical center
Question: div안의 p를 어떻게 정렬하나요?
Answer: text-align: center는 수평 방향으로 정렬하지만 vertical-align: middle은 여기서는 동작하지 않습니다.이 문제를 해결하는 다양한 방법이 있는데, 그 중 하나는 position을 이용하는 것입니다. relative position을 갖는 부모 엘리먼트를 만들고, 그 자식 엘리먼트를 absolute position을 적용하세요. 그리고 모든 position 인자를 width 50%, height 30%로 적용하세요. (예제를 지저분하게 살펴보고, ref를 읽어보세요)
<style>
.divContainer{
height: 100px;
border: 2px solid gray;
text-align: center;
position: relative;
}
.para {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 50%;
height: 30%;
margin: auto;
}
</style>
<div class = "divContainer">
<p class = "para">content example</p>
</div>result:
content example
13. optimize selector : 선택자 최적화
Question: css 선택자를 어떻게 최적화하는가?
Answer: 이것은 매우 열려있고, 무엇을 하고자 하느냐에 따라 다르다. 만약 선택자를 렌더링 속도에 따라 정렬한다면 id, class, tag, siblings, child, descendant, universal, attribute, pseudo 순이다. ID와 class는 매우 빠르다. 그러나 당신의 코드는 읽기, 유지 및 보수하기 쉬우면서도 건조하고 성능이 좋아야한다.
일반적으로 가장 좋은 방식은: 범용 선택자(universal selector)를 피하고, 반복을 제거하고, 중복 선택자를 제거하고, 가능한 한 구체화하고 계속 공부하는 것이다.
ref: Efficient CSS selectors, efficiently rendering
14. @import
Question: 어떻게 css 파일을 조건부로 load할 수 있는가?
How can you load css resources conditionally?
Answer: @import는 stylesheet를 파일의 위치를 나타내는 path(uri)를 이용해서 load/import 할 수 있게 해준다. 원하는 stylesheet를 로드하기 위해 comma로 나누어서 하나 혹은 여러 개의 media를 정의할 수 있다. 만약 브라우저가 지원하지 않는다면 media stylesheet는 load되지 않는다.
@import allows you to load/ import stylesheet by using a path (uri) representing the location of the file. You can define one or more media by comma separation for which you want to load the stylesheet. If browser dont support the media stylesheet will not be loaded.
ref: be careful while using @import (don't use @import)
15. sprite
Question: 왜 sprite(스프라이트)를 사용하나요?
Answer: 이미지와 아이콘을 많이 사용하는 경우, 브라우저는 각각을 서버로부터 나누어서 요청합니다. sprite는 그들 중 전체나 일부(보통 비슷한 타입의 이미지를 하나의 sprite로. jpg, png 등)를 하나의 이미지로 묶는 테크닉입니다. height, width를 설정하고 background position을 적용한 아이콘을 표시하기 위해서 사용합니다.
가장 유명한 라이브러리인 부트스트랩도 이 테크닉을 사용합니다. 만약 이미지를 반복하려 한다면, sprite를 신중하게 사용해야 합니다.
ref: css sprites, generate sprites
16. specificity : 명시도
Question: specificity(명시도)는 무엇인가요? 어떻게 명시도를 계산하나요?
Answer: 엘리먼트에 적용할 css rule을 결정하는 과정입니다. 실제로 어떤 rule이 우선적으로 적용될지를 결정합니다.
inline style > id > class (혹은 가상클래스, 속성 선택자)순으로 적용됩니다. 범용 선택자(*)는 명시도가 없습니다.
ref: css specificity: things you need to know, specifishity, specificity calculator
17. shadow DOM
Question: shadow DOM이 무엇인가요?
Answer: shadow DOM은 DOM의 일부를 캡슐화하고, 하위 트리를 숨긴다. 다른 쉐도우 돔에서 동일한 id를 설정할 수 있다. 이 방법으로 DOM을 재사용할 수 있다. 인터뷰어가 당신의 대답에 만족하지 않는다면 그에게 링크를 주고 주말 동안 읽으라고 해라.
ref: W3: shadow-DOM, html5rock: shadow DOM
18. transition
Question: transition(트랜지션)에 대해 무엇을 아나요?
Answer: 트랜지션은 스타일이 변화하는 효과를 적용할 수 있게 해줍니다.
transition을 적용하려는 property, 시간, 어떻게 transit 할 것인지(선형으로, ease, ease-out, ease-in, cubic-bezier) 및 transiton이 시작되기 전 지연 시간(delay)도 설정할 수 있다. comma로 구분하여 여러 개의 property에 transition을 적용할 수 있다.
Advanced: you can check transform: css 2D 3D transform, css 2D 3D transformflip an image
ref: all you need to know about css transition, transition: tutorial, css transition, transition and 3D
19. filter
Question: 사용하는 css filter에 어떤 차이들이 있나요?
Answer: css filter는 DOM 엘리먼트, 이미지, 비디오를 렌더링하게 해줍니다. grayscale, blur, opacity, brightness, contrast 중에서 선택할 수 있습니다.
ref: Understanding css filter effect
20. pre processor
Question: preprocessor를 사용하는 이유가 무엇인가요?
Answer: 우리는 특별한 문법(변수 선언, 중첩 문법, 수학적 처리 등)을 이용해서 CSS를 high level에서 작성하고, 그것이 CSS로 컴파일된다. preprocessor는 개발, 유지하는 속도를 높이는데 도움이 된다.
ref: css preprocessor, working with preprocessor
21. see & tell
Question: 아래의 rule에 따르면 "I am awesome" 텍스트의 색깔은 어떻게 되나요?
html: a-d의 문제가 있습니다.
<ul class="shopping-list" id="awesome">
<li><span>Milk</span></li>
<li class="favorite" id="must-buy"><span class="highlight">I am awesome</span></li>
</ul>a.
<style>
ul#awesome {
color: red;
}
ul.shopping-list li.favorite span {
color: blue;
}
</style>Answer: blue
b.
<style>
ul#awesome #must-buy {
color: red;
}
.favorite span {
color: blue!important;
}
</style>Answer: blue
c.
<style>
ul.shopping-list li .highlight {
color: red;
}
ul.shopping-list li .highlight:nth-of-type(odd) {
color: blue;
}
</style>Answer: blue
d.
<style>
#awesome .favorite:not(#awesome) .highlight {
color: red;
}
#awesome .highlight:nth-of-type(1):nth-last-of-type(1) {
color: blue;
}
</style>Answer: red
Position related
Question: #myDude의 position은 어떻게 됩니까?
<style>
#myDude {
margin-bottom: -5px;
}
</style>
<p id="myDude">Dude</p>Answer: #myDude가 적용된 모든 엘리먼트는 위로 5px 움직입니다.
<style>
#myDude {
margin-left: -5px;
}
</style>
<p id="myDude">Dude</p>Answer: #myDude가 적용된 모든 엘리먼트는 왼쪽으로 5px 움직입니다.
download resources
Question: 페이지가 로드될 때, mypic.jpg는 브라우저에 의해서 다운로드 되나요?
<style>
#test2 {
background-image: url('mypic.jpg');
display: none;
}
</style>
<div id="test1">
<span id="test2"></span>
</div>Answer: yes.
Question: 페이지가 로드될 때, mypic.jpg는 브라우저에 의해서 다운로드 되나요?
<style>
#test1 {
display: none;
}
#test2 {
background-image: url('mypic.jpg');
visibility: hidden;
}
</style>
<div id="test1">
<span id="test2"></span>
</div>Answer: No.
read selector
Question: 이 선택자(selector)는 무엇을 하나요?
[role=navigation] > ul a:not([href^=mailto]) {
}Answer: 이 선택자는 이메일 링크가 아니고 'navigation'의 role attribute를 가진 모든 엘리먼트의 (바로 아래) 자식 엘리먼트인 ul 안의 a를 선택합니다. 이 답은 css tricks에서 베껴왔습니다.
ref: show & tell is mostly based on David Shariff: quiz
Need more: HTML Interview Questions, JavaScript Beginners Algorithm
