CSS

Question 1

선택자

Answer 1

* 전체 선택자
p 타입 선택자
. 클래스 선택자
# id 선택자

Question 2

css 특징

Answer 2

1. 스타일 우선순위
   -> 타입<클래스<아이디<인라인<!important
2. 스타일 상속
   -> 부모 스타일이 자식 스타일에도 적용
3. 순서
   -> 중요도, 명시도 동일 시 맨 나중 순서가 발현

Question 3

글자 관련된 css

Answer 3

font-family: 1ststyle "2nd style" 3rdstyle;
            1->3 순서로 적용됨
            띄어쓰기 있는 font이름이면 ""사용

font-size: em/px/%/xx-small/x-small/small/medium/large/x-large/xx-large

font-style: normal/italic/oblique;

font-weight: normal/bold/bolder/lighter/heavy/100~900

text-align: start/end/left/right/center/justify/match-parent;

text-decoration: none/underline/overline/line-through

text-shadow: 가로거리 세로거리 번짐정도 색상;

text-transform: capitalize/uppercase/lowercase/full-width;

letter-spacing:
word-spacing:
line-height:

Question 4

리스트 관련 css

Answer 4

list-style-type: disc/circle/square/decimal/decimal-leading-zero/lower-roman/upper-roman/lower-alpha/upper-alpha/none

list-style-image: <url()>

list-style-position: inside(들여쓰기)/outside

list: 타입  포지션

Question 5

표 관련 css

Answer 5

<table>태그에 달린
border-collapse: collapse/separate;
caption-side: top/bottom

Question 6

Css와 박스 모델

Answer 6

inline: 줄을 차지하지 않고 화면에 표시되는 콘텐츠만큼만 영역 차지해서 나머지 공간에 다른 요소 들어옴… 높이와 넓이 specified안됨

block: 요소를 삽입했을때 혼자 한 줄 차지… 높이와 넓이 specify됨

inline-block: 인라인과 블럭 합친 특징 가짐… 서로 옆에 나열 가능하지만 블럭처럼 생김…. 높이와 넓이 sepcify됨

Question 7

양파껍질 같은 css

Answer 7

content: 그림
padding: 액자와 그림 사이의 공백.. background color을 확장하거나
border: 액자
margin: 우리 주인 건들지마!

Question 8

content관련 속성

Answer 8

width:
height: %/em/px/auto(콘텐츠 양에 따라 자동결정)

Question 9

padding관련 속성

Answer 9

padding/padding-top/padding-bottom/padding-left/padding-right:
2 value: topbottom leftright
3 value: top leftright bottom
4 value: top right bottom left

Question 10

border관련 속성

Answer 10

border-style: none/hidden/solid/dashed/dotted/double/groove/inset/outset/ridge/solid

border-width: px/%/thin/medium/thick

border-color:

border: 두께 스타일 색깔;
border-top
border-bottom
border-left
border-right

border-radius: %/px/em;
border-top-left-radius
border-top-right-radius
border-bottom-left-radius
border-bottom-right-radius

circle => height=width, border-radius=50%;

Question 11

margin 관련 속성

Answer 11

margin으로 가운데 정렬하기
1. 매치할 요소의 너비값을 정해준다
2. margin-left와 margin-right 속성값을auto로 정해준다.
margin
margin-left
margin-right
margin-top
margin-bottom

left and right margin and padding add together
top and bottom padding add together
top and bottom margin collapse

Question 12

전반적 박스 css 명령어

Answer 12

box-sizing: border-box/content-box;
(테두리까지 포함해서 너비값을 지정하기/콘텐츠 영역 너미값으로 지정하기)

box-shadow: 수평거리 수직거리 흐림정도 번짐정도 색상 inset

position: static/relative/aboslute(다른 요소들이 이 요소를 무시하고 가장 가까운 부모와 위치를 연동하기)/fixed/sticky(가만히 있다가 일정 부위를 지나면 움직이기)
left/right/top/bottom으로 offset 가능하다. (static만 아니라면)

z-index: 1/2/….
유니티의 layer과 같은 개념(누가 위에 오는가)
does not work on static elements
숫자가 클수록 앞으로 간다.

display: inline/block/inline-block

float: left/right/none;

clear: left/right/both/none;

Question 13

background 관련 css

Answer 13

background-color:

background-image: url(파일경로);

background-size:
auto/contain/cover/px/em/%
background-repeat: repeat/repeat-x/repeat-y/no-repeat

background-position: 수평위치 수직위치

background-origin: border-box/padding-box/content-box

background-attachment: scroll/fixed;

background: 위의 모든 background 요소 연달아서 표기, 순서 상관 없음

background: linear-gradient( to 방향/각도, 색상 색상중지점,….)
방향: right bottom, right top, left bottom, left top
각도: deg

background: radial-gradient (eclipse*/circle 크기 at 위치, 색상 색상중지점)

closert-side/closest-corner/farthest-side/farthest-corner*

background: repeating-linear-gradient (yellow, yellow 20px, red 20px)

Question 14

연결 선택자(combination selector)

Answer 14

선택자와 선택자를 연결시켜서 적용 대상을 제한하는 선택자.
1. 하위 선택자 (descendent selector)
상위요소 (space) 하위요소
->직속 자식이 아니어도 해당됨.

2. 자식 선택자 (child selector)
   상위요소 > 하위요소
   -> 직속 자식만 해당됨.
3. 인접 형제 선택자 (adjacent selector)
   같은 부모를 가진 형제 요소 중 첫번쨰 동생 요소에만 스타일 적용
   요소1 + 요소2
   e) h1 + p {} -> h1과 형제인 p 중 첫번째 p 요소만 적용
4. 형제 선택자 (sibiling selector)
   형제 요소 모두에게 스타일 적용
   요소1~요소2
   e) h1~p {} -> h1의 형제인 모든 p 요소에 스타일 적용.

Question 15

속성 선택자

Answer 15

특정 속성을 가지고 있는 태그를 찾아서 스타일을 적용해주는 방식의 태그
1. tag [속성]
지정한 속성을 가진 요소를 찾아 스타일 적용
```a[href] {}

<li><a>메뉴1</a></li>

<li><a>메뉴2</a></li>

```

2. tag[속성=” “]
   주어진 속성과 속성값이 일치하는 요소를 찾아 스타일 적용
   ```a[target=”_blank”]{}

<li><a>HTML</a></li>

<li><a>CSS</a></li>

```
중에 위에꺼만 적용

3. [속성~”속성값”]
   해당 속성을 가지고 있고, 여러 속성값 중에 해당 속성값을 포함하는 애한테 스타일 적용
   e) [class ~ “button”]{}

<li><a></a></li>

3.

Question 16

속성 선택자

Answer 16

특정 속성을 가지고 있는 태그를 찾아서 스타일을 적용해주는 방식의 태그
1. tag [속성]
지정한 속성을 가진 요소를 찾아 스타일 적용
```a[href] {}

<li><a>메뉴1</a></li>

<li><a>메뉴2</a></li>

```

2. tag[속성=” “]
   주어진 속성과 속성값이 일치하는 요소를 찾아 스타일 적용
   ```a[target=”_blank”]{}

<li><a>HTML</a></li>

<li><a>CSS</a></li>

```
중에 위에꺼만 적용

3. [속성~”속성값”]
   해당 속성을 가지고 있고, 여러 속성값 중에 해당 속성값을 포함하는 애한테 스타일 적용
   e) ```[class ~ “button”]{}

<li><a></a></li>

<li><a href="" class="button></a></li>

<li><a></a></li>

```
두 번째 & 세 번째 요소에 적용.

4. tag[속성 |= 이름]
   속성값이 **이름 이거나 **-이름 일때 스타일 적용
   e) a [title|=us]{}
   -> <li><a>….에 적용O
   a[title|=jap]{} -> <li><a>….에 적용 X
   a[title|=chn]{} -> <li><a>..에 적용 X</a></a></a>
5. tag[속성 ^= 이름]
   이름으로 시작하는 속성값 가진 요소 찾아서 스타일 적용
   e) a[title^=”eng”] ->

<li><a href=" title="english">..
에 적용O

6. tag[속성*=이름]
값의 일부가 일치하는 속성 가진 요소 찾아 스타일 적용
a[href*=w3] ->
<li><a>..
에 적용O

7. tag[속성 $= 이름]
이름으로 끝나는 속성 가진 요소 찾아 스타일 적용
a[href$=hwp] ->
<li><a>...
에 적용 O
</a></li></a></li></li>

Question 17

사용자 동작에 반응하는 가상 클래스 선택자

Answer 17

:hover 마우스 커서 호버할때.
:active 마우스 클릭했을 때.
:visited 방문했는 링크에 적용.
:link 방문하지 않은 링크에 적용.
:focus 웹 요소에 초점 맞춰졌을때의 스타일 적용

a :hover {}

Question 18

요소의 상태에 따른 가상 클래스 선택자

Answer 18

:target 앵커로 연결된 부분에 스타일 적용.
#intro :target {}

<li><a>이용 안내</a></li>

:enabled
:disabled
an element is disabled if it can’t be activated (selected, clicked on, typed into) 거의 read only로 만들어버린 input이라고 생각하면 편하다.

:checked 라디오 버튼이나 체크박스에 체크했을 때 스타일 적용

:not 특정 요소를 제외하고 스타일 적용
e) p :not(.fancy) => p elements without the class fancy

Question 19

요소의 부모 속에 위치에 따른 선택자

Answer 19

:only-child 부모 안에 자식 요소가 하나 뿐일 때 쟤 선택
A:only-type-of 부모 안에 A 요소가 하나 뿐일 때 선택
:first-child
:last-child
A:first-of-type 부모 안의 모든 A 자식들 중 첫째
A:last-of-type 부모 안의 모든 A 자식들 중 막내
:nth-child(n)
A:nth-of-type(n) 부모 안의 모든 A 자식들 중 n번째
:nth-last-child(n)
A:nth-last-of-type(n)

Question 20

가상 요소

Answer 20

화면 꾸미기용 요소를 웹 문서에 포함시키지 않기 위해 가상 요소를 사용한다.
::first-line 특정 요소의 첫째 줄에 스타일 적용
::first-letter 특정 요소의 첫째 글자에 스타일 적용
미국 책에 맨 첫 번째 글자만 엄청 facny하게 프린트하는거 구현하기 위해 있음
::after 특정 요소의 앞에 지정한 콘텐츠 추가
::before 툭정 요소의 뒤에 지정한 콘텐츠 추가

Question 21

2D 변형

Answer 21

transform:

translate(tx,ty): 지정한 크기만큼 x축, y축으로 이동
translateX(tx)
translateY(ty)
skewX(ax)
skewY(ay)
rotate(n deg) : 시계방향
scale(sx, sy)
scaleX(sx)
scaleY(sy)

Question 22

3D 변형

Answer 22

transform:

translate3d(tx, ty, tz);
translateZ(tz);
scale3d(sc,sy,sz);
scaleZ(sz);
perspective(길이); 원근감을 표현하기 위해 사용하는 속성. 값이 커질수록 사용자로부터 멀어지는 느낌이 든다. perspective를 정해줘야 밑에 rotate가 가능하다.
rotate3d(rx,ry,rz,deg);
rotateX(rx):
rotateY(ry):
rotateZ(rz):

Question 23

transition

Answer 23

웹 요소의 스타일 속성이 조금씩 자연스럽게 바뀌는 것
transition-property: *all/ width,height/… 등 트랜지션의 대상 지정

transition-duration: 트랜지션 실행 시간 지정

transition-delay: 트랜지션 지연 시간 지정

transition-timing-function: 트랜지션 실행 형태 지정
linear(쭉 같은 속도)/ease(느림-빠름-느림)/ease-in(느리게 시작)/ease-out(느리게 끝남)/ease-in-out(느리게 시작하고 끝내기)/cubic-bezier(n,n,n,n)

transition: 위에 것 한꺼번에 설정하기. 맨 처음에 정의되는 시간이 duration이고 나중에 정의되는 시간이 delay이다.

Question 24

animation

Answer 24

@keyframes 애니메이션이름{
}
-> 애니메이션을 만들어주는 키워드. 애니메이션의 시작과 끝을 비롯해 상태가 바뀌는 지점을 설정해준다. 예를 들자면
@keyframes 애니메이션이름 {
0%{}
30%{}
100%{}
}
@keyframes 애니메이션이름 {
from{}
to{}
}

animation-name: 애니메이션이름/none;
keyframes에서 만든 animation을 부르는 코드이다.

animation-duration: 애니메이션 실행 시간 설정.

animation-iteration-count: infinite/숫자;

animation-direction: normal(다시 처음부터)/alternative(다 끝나면 거꾸로 갔다가 다시 순방향으로)

animation-timing-function: 애니메이션 속도 곡선 지정(?)

animation: 위의 모두를 지정… animation-duration값은 필수

Question 25

반응형 웹 디자인

Answer 25

웹 사이트의 내용을 그대로 윶하면서 다양한 화면 크기에 맞게 웹사이트를 표시
<meta name=”viewport” content=”속성1 = 값1”
말고도 width: device-width/px;
height: device-height/px;
user-scalable: *yes/no;
initial-scale: *1~10;

vw(viewport width) -> 1vw는 뷰포트 너비의 1퍼
vh(viewport height)
vmin: 뷰포트의 너비와 높이 중 작은 값의 1퍼
vmax: 뷰포트의 너비와 높이 중 큰 값의 1퍼

Question 26

미디어 쿼리

Answer 26

접속하는 장치에 따라 특정한 CSS style을 적용시키는 방법
@media 미디어유형 and 조건1 and 조건2…

media와 미디어유형 사이에
1. only: 미디어 쿼리 지원 안하는 브라우저면 미디어쿼리를 무시한다.
2. not: not 다음의 미디어 유형을 제외시키기.

미디어 유형:
all
screen 컴퓨터 또는 휴대폰 스크린
tv 티비
aural 화면 읽어주는 장치

조건:
width/height/min-width/max-width/min-height/max-height
portrait(세로모드)/landscape(가로모드)
device-width/device-height/min-device-width/max-device-width…..

대부분 기기의 화면 크기 기준 => 스마트폰과 태블릿, 데스크톱 정도로 구분한다.
print

Question 27

미디어 쿼리 적용하기

Answer 27

1. 외부 CSS 파일 연결

<head>
<link></link>
</head>

또는

<style>

    @import url("css파일경로") 미디어쿼리조건

</style>

예를 들자면, @import url(“…..css”) only screen and (min-width:px) and (max-width:px)

2. 웹 문서에 직접 정의하기

<style>

 {}

</style>

또는

<style>

    @media 미디어 and (조건) {}

</style>

예를 들자면

<style>

    @media screen and (max-width:1024px){{}
    @media screen and (max-width: 768px){}
    @media screen and (max-width: 200px){}

</style>

Question 28

Flexbox Layout

Answer 28

1. flexbox container 속성
   *display: flex(블럭 레벨)/inline-flex(인라인 레벨)
   *flex-direction: row/row-reverse/column/column-reverse 주축 정하기
   *flew-wrap: nowrap(한줄에 구겨넣기)/wrap/wrap-reverse;
   *flex-flow: 위의 direction과 wrap을 동시에 지정
   *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 (여러 행일때 그 여러 행을 어떻게 배치할 것인지)
2. item 속성값들
   * order
   *flex-grow
   *flex-shrink
   *flex-basis
   *align-self (아이템 별로… 아이템 하나만 align 따로하기)