CSS 선택자, CSS 속성 정리

 

• Fastcampus 프론트엔드 웹 개발의 모든 것 초격차 패키지 - Ch 7, Ch8

---

Review

 

 

 

 

 

---

 

• Fastcampus 프론트엔드 웹 개발의 모든 것 초격차 패키지 - Ch 7, Ch8

 

기본 문법

선택자{ 속성: 값;}

 

- 선택자 : 스타일(CSS)을 적용할 대상(Selector)를 의미한다.

- 속성 : 스타일(CSS)의 종류(Property)를 의미한다.

- 값 : 스타일(CSS)의 값(Value)을 의미한다.

 

 

선언 방식

 

1. 내장 방식

 

- <style></style>의 내용(Contents)으로 스타일을 작성하는 방식이다.

- CSS 파일을 HTML 파일에 담아서 보관한다는 것은 여러 유지·보수 측면에서 단점이 많기 때문에

잘 사용하지 않는 방식이다.

 

<style>
  div {
    color: red;
    margin: 20px;
  }
</style>

 

 

2. 링크 방식

 

- <link />로 외부 CSS 문서를 가져와서 연결하는 방식이다.

- 병렬로 연결되는 방식이다.

 

<link rel="stylesheet" href="./css/main.css">

 

 

3. 인라인 방식

 

- 요소의 style 속성에 직접 스타일을 작성하는 방식이다. (선택자 없음)

- 편리해보이긴 하지만, 우선 순위에 있어서 인라인 방식으로 작성하는 스타일이 지나치게 우선하는

문제를 가지고 있다. 그래서 유지·보수 측면에서 악영향을 불러일으킬 수 있다.

 

<div style="color: red; margin: 20px;"></div>

 

 

4. @import 방식

 

- CSS의 @import 규칙으로 CSS 문서 안에서 또 다른 CSS 문서를 가져와 연결하는 방식이다.

- 직렬로 연결되는 방식이다.

 

 

직렬로 연결되어 있는데, 이것의 장점이자 단점은 'main.css'가 HTML에 연결이 되어서 import라는

코드가 해석되기 전까지는 'box.css'는 HTML에 연결되지 못하고 적용될 수도 없다는 것이다.

 

일반적으로 많이 사용되는 방식은 아니다.

 

---

 

CSS 선택자

 

1. 기본 선택자

 

- 전체 선택자( Universal Selector, * ) : 모든 요소를 선택한다.

 

 

 

- 태그 선택자(Type Selector) : 태그 이름을 직접 선택한다.

 

 

 

- 클래스 선택자(Class Selector) : HTML class 속성의 값을 지정해 그 지정된 값의 요소를 선택한다.

 

 

 

- 아이디 선택자(Id Selector) : HTML id 속성의 값을 지정해 그 지정된 값의 요소를 선택한다.

 

 

 

 

2. 복합 선택자

 

- 일치 선택자 (Basic Combinator) : 여러 개의 선택자를 동시에 만족시키는 요소를 선택한다.

 

 

'span.orange' 라는 것처럼 태그 선택자와 클래스 선택자가 동시에 작성할 수 있는데, 이를 일치 선택자

라고 한다. 

 

 

- 자식 선택자 (Child Combinator, > ) : 선택자의 자식 요소를 선택하는 것이다.

 

 

 

- 하위(후손) 선택자 (Descendant Combinator,  ) : 선택자의 하위 요소를 선택하는 것이다.

  '띄어쓰기'가 선택자의 기호이다.

 

 

 

- 인접 형제 선택자 (Adjacent Sibling Combinator, + ) : 선택자의 다음 형제 요소 하나를 선택하는 것이다.

 

 

 

- 일반 형제 선택자 (General Sibling Combinator, ~ ) : 선택자의 다음 형제 요소 모두를 선택하는 것이다.

 

 

 

 

3. 가상 클래스 선택자 (Pseudo-Classes)

 

- hover : 선택자 요소에 마우스 커서가 올라가 있는 동안 선택되는 개념이다.

 

 

 

 

- active : 선택자 요소에 마우스를 클릭하고 있는 동안 선택되는 개념이다.

 

 

 

 

- focus: 선택자 요소가 포커스 되면 선택되는 개념이다. focus라는 가상 요소 선택자는 focus가 가능한

요소에서만 동작한다.

* Focus가 될 수 있는 요소는 HTML 대화형 콘텐츠가 해당한다. input, a, button, label, select 등 여러

요소가 있다. 그리고 HTML 대화형 콘텐츠 요소가 아니더라도, tabindex 속성을 사용한 요소도 Focus가

될 수 있다.

tabindex 속성을 통해 Focus가 가능하지 않은 요소를 Focus가 될 수 있는 요소로 만들 수 있다.

이름에서도 알 수 있듯, Tab 키를 사용해 Focus 할 수 있는 순서를 지정하는 속성이다.

순서(값)로 -1이 아닌 다른 값을 넣는 것은 논리적 흐름을 방해하기 때문에 권장하지 않는다.

 

 

 

- first-child : 선택자가 형제 요소 중 첫째라면 선택되는 개념이다.

 

 

 

- last-child : 선택자가 형제 요소 중 막내라면 선택되는 개념이다.

 

 

 

- nth-child(n) : 선택자가 형제 요소 중 (n)째라면 선택되는 개념이다.

 

 

.fruits 하위의 모든 요소들을 선택해 그 중 2번째만 선택해 CSS style을 적용한 것이다.

 

 

n은 0부터 시작한다 ! (Zero-Based Numbering)

따라서 2n이라 작성함으로써 0X2, 1X2, 2X2, 3X2 ...  이런 식으로 짝수번째 요소를 선택하는 개념이다.

 

 

2n + 1은 홀수번째 요소를 선택할 수 있는 개념이다.

 

 

n + 2는 두 번째 요소부터(첫 번째 요소는 제외) 선택할 수 있는 개념이다.

왜냐하면 0+2=2, 1+2=3, 2+2=4 ... 이런 식으로 진행되기 때문에 두 번째 요소부터 선택되는 것이다.

 

앞과 마찬가지로 세 번째 요소, 즉 두 번째 요소 이후부터 선택하려면 n + 3으로 작성하면 된다.

 

 

- 부정 선택자(Negation, not) : 선택자 XYZ가 아닌 ABC 요소를 선택하는 개념이다. 괄호 안에 있는 

태그를 제외하고 나머지만 선택하는 것이다.

 

 

 

 

4. 가상 요소 선택자 (Pseudo-Elements)

 

- ::before : 인라인(글자) 요소로, 선택자 요소의 내부 앞에 내용(Contents)을 삽입하는 것이다. 

 

 

 

- ::after: 인라인(글자) 요소로, 선택자 요소의 내부 뒤에 내용(Contents)을 삽입하는 것이다. 

 

 

 

 

인라인 요소는 가로 세로 값을 가질 수 없기 때문에 'display: block;'으로 변경해주고 나서 after 

선택자를 이용해 상자를 삽입했다.

 

 

 

5. 속성 선택자 (Attribute)

 

- ATTR : 속성 ABC를 포함한 요소를 선택하는 개념이다. 대괄호를 이용해 그것이 속성 선택자라는 것을

명시해주면 된다.

 

[ABC]

 

 

 

 

- ATTR=VALUE : 속성 ABC를 포함하고 값이 XYZ인 요소를 선택하는 개념이다.

 

[ABC="XYZ"]

 

 

 

 

---

 

스타일 상속

 

- 상속되는 CSS 속성들 : 모두 글자/문자 관련 속성들 (모든 글자/문자 속성은 아님)

 

ex) font-style (글자 기울기), font-weight (글자 두께), font-size (글자 크기), line-height (줄 높이),

font-family (폰트), color (글자 색상), text-align (정렬) 등

 

 

부모 요소가 가지고 있는 속성의 값을 자식 요소에 강제로 상속시키는 방법을 예제로 살펴보았다.

 

---

 

선택자 우선순위

 

: 우선순위란, 같은 요소가 여러 선언의 대상이 된 경우, 어떤 선언의 CSS 속성을 우선 적용할지 결정

하는 방법이다. 

• 점수가 높은 선언이 우선한다 !
• 점수가 같으면, 가장 마지막에 해석된 선언이 우선한다 !

 

 

용어가 중요하진 않지만, CSS 우선순위의 점수를 계산하는 것을 명시도라고 부른다.

!important 키워드를 사용하는 것을 중요도라고 부른다.

 

앞에서 '점수가 같으면, 가장 마지막에 해석된 선언이 우선한다.'고 말했는데, 이 말은 선언 순서 (코드가

해석된 순서)에 따라 우선한다는 뜻이다.

 

 

- 첫 번째 문제 : .list(클래스 선택자, 10점) + li (태그 선택자, 1점) + .item(클래스 선택자, 10점)

- 두 번째 문제 : .list(클래스 선택자, 10점) + li (태그 선택자, 1점) + :hover(클래스 선택자, 10점)

- 세 번째 문제 : .box(클래스 선택자, 10점) + ::before(가상 요소 선택자 / 태그 선택자, 1점)

- 네 번째 문제 : #submit(아이디 선택자, 100점) + span(태그 선택자, 1점)

- 다섯 번째 문제 : header(태그 선택자, 1점) + .menu(클래스 선택자, 10점) + li(태그 선택자, 1점)

   + :nth-child(클래스 선택자, 10점)

- 여섯 번째 문제 : h1(태그 선택자, 1점)

- 일곱 번째 문제 : :not(클래스 선택자, 10점)  →  부정 클래스 선택자이기 때문에 괄호 안의 것은 부정인

상태로 계산해야 해서 점수에 포함하지 않음

 

 

---

 

속성

 

1. HTML 속성 : Attribute

2. CSS 속성 : Properties

3. JS 속성 : Properties

 

 

CSS 속성

- CSS 속성을 통해서 박스 모델, 글꼴/문자, 배경, 배치, 플렉스(정렬), 전환, 변환, 띄움, 애니메이션,

그리드, 다단, 필터 등을 제어할 수 있다.

 

 

1. width, height

 

- 요소의 가로/세로 너비를 의미한다.

- 단위 : px, em, vw 등 단위로 지정한다.

- auto : 기본값(요소에 이미 들어있는 속성의 값)이며, 브라우저가 자동으로 너비를 계산해서 화면에 출력한다.

 

ex) span 태그는 대표적인 인라인 요소로, span 태그 안에 문구를 작성했을 때, 화면에 출력된 문구의

가로/세로 크기는 자동으로 포함한 콘텐츠의 크기만큼 줄어드는 성질을 가지고 있다.

반면, div 태그는 대표적인 블록 요소로, div 태그 안에 문구를 작성했을 때, 화면에 출력된 문구의 가로

크기는 부모 요소의 크기만큼 자동으로 늘어나는 성질을 가지고 있고, 세로 크기는 포함한 콘텐츠의 

크기만큼 자동으로 줄어드는 성질을 가지고 있다.

 

 

 

 

 

2. max-width, max-height

 

- 요소가 커질 수 있는 최대 가로/세로 너비를 의미한다.

- 단위 : px, em, vw 등 단위로 지정한다.

- none : 기본값이며, 최대의 너비는 제한이 없다.

- auto : 브라우저가 자동으로 너비를 계산해서 화면에 출력한다. (잘 사용하지 않음)

 

 

3. min-width, min-height

 

- 요소가 작아질 수 있는 최소 가로/세로 너비를 의미한다.

- 단위 : px, em, vw 등 단위로 지정한다.

- 0 : 기본값이며, 최소의 너비는 제한이 없다.

- auto : 브라우저가 자동으로 너비를 계산해서 화면에 출력한다. (잘 사용하지 않음)

 

 

 

 

 

 

4. margin

 

- 요소의 외부 여백(공간)을 지정하는 단축 속성을 의미한다. 음수를 사용할 수 있다.

- 단위 : px, em, vw 등 단위로 지정한다.

- 0 : 기본값이며, 외부 여백이 없다.

- auto : 브라우저가 여백을 자동으로 계산한다. 가로(세로) 너비가 있는 요소의 가운데 정렬에 활용한다.

- % : 브라우저가 부모 요소의 가로 너비에 대한 비율로 지정한다. (잘 사용하지 않음)

 

 

See the Pen Untitled by posey (@poseybutter) on CodePen.

 

 

 

 

 

5. margin-방향

 

- 요소의 외부 여백(공간)을 지정하는 기타 개별 속성들을 의미한다. 음수를 사용할 수 있다.

- margin-top, margin-bottom, margin-left, margin-right 가 있다.

 

 

See the Pen Untitled by yellowposey (@yellowposey) on CodePen.

 

 

6. padding

 

- 요소의 내부 여백(공간)을 지정하는 단축 속성을 의미한다. 음수를 사용할 수 있다. 또 한가지 중요한 것은

padding은 내부의 여백이 생기는 것이기 때문에 요소 자체의 크기가 커진다는 특징을 가지고 있다.

- 단위 : px, em, vw 등 단위로 지정한다.

- 0 : 기본값이며, 내부 여백이 없다.

- % : 브라우저가 부모 요소의 가로 너비에 대한 비율로 지정한다.

 

 

See the Pen Untitled by posey (@poseybutter) on CodePen.

 

 

7. padding-방향

 

- 요소의 내부 여백(공간)을 지정하는 기타 개별 속성들을 의미한다. 음수를 사용할 수 있다.

- padding-top, padding-bottom, padding-left, padding-right 가 있다.

 

 

8. border

 

- 요소의 테두리 선을 지정하는 단축 속성을 의미한다. border도 padding과 마찬가지로 요소의 크기가

커지게 하는 특징이 있다.

- 기본 문법 : border: 선-두께(border-width) 선-종류(border-style) 선-색상(border-color);

   ex) border: 1px solid #ccc;

 

 

See the Pen Untitled by posey (@poseybutter) on CodePen.

 

 

 

9. border-width

 

- 요소의 테두리 선의 두께를 의미한다. 

- 단위 : px, em, % 등 단위로 지정한다.

- medium, thin, thick 등의 속성값들이 있지만, 되도록이면 단위를 사용하여 정확한 수치를 통해

명시하는 것이 가장 좋다.

 

 

10. border-style

 

- 요소의 테두리 선의 종류를 의미한다. 

- none : 기본값이며, 선의 종류가 없는 것이다.

- solid / dashed : 실선(일반 선) / 파선이라는 뜻이다.

- 이 외에도 dotted(점선), double(두 줄 선), groove(흠이 파여있는 모양), ridge(솟은 모양, groove

의 반대), inset(요소 전체가 들어간 모양), outset(요소 전체가 나온 모양) 등의 속성값이 있다.

(잘 사용하지 않음)

 

 

See the Pen Untitled by posey (@poseybutter) on CodePen.

 

 

11. border-color

 

- 요소의 테두리 선의 색상을 지정하는 단축 속성을 의미한다. 

- black : 검정색이 기본값이다.

- transparent : 두께는 만들어지되 눈에 보이지 않는 속성값이 존재한다. (잘 사용하지 않음)

 

 

 

12. border-방향, border-방향-속성

 

- 요소의 테두리 선을 지정하는 기타 속성들을 의미한다. 

- border-top/bottom/left/right : 두께 종류 색상;

- border-top/bottom/left/right-width : 두께;

- border-top/bottom/left/right-style : 종류;

- border-top/bottom/left/right-color : 색상;

 

 

13. border-radius

 

- 요소의 모서리를 둥글게 깎는 속성이다.

- 0 : 기본값이며, 둥글게 깎은 무언가가 없다.

- 단위 : px, em, vw 등 단위로 지정한다.

 

 

14. box-sizing

 

- 요소의 크기 계산 기준을 지정하는 것을 의미한다.

- content-box : 기본값이며, 요소의 내용(content)으로 크기를 계산한다.

- border-box : 요소의 내용(content) + padding + border로 크기를 계산한다.

 

 

See the Pen Untitled by posey (@poseybutter) on CodePen.

 

 

15. overflow

 

- 요소의 크기 이상으로 내용이 넘쳤을 때, 보여짐을 제어하는 단축 속성을 의미한다.

- visible : 기본값이며, 넘친 내용을 그대로 보여주는 것을 의미한다.

- hidden : 넘친 내용을 잘라낸다.

- scoll : 넘친 내용을 잘라내고, 스크롤바를 생성한다. (잘 사용하지 않음)

- auto : 넘친 내용이 있는 경우에만 잘라내고 스크롤바를 생성한다.

 

 

 

 

16. overflow-x, overflow-y

 

- 요소의 크기 이상으로 내용이 넘쳤을 떄, 보여짐을 제어하는 개별 속성들을 의미한다.

 

 

17. display

 

- 요소의 화면 출력(보여짐) 특성을 의미한다.

• 각 요소에 이미 지정되어 있는 값 3가지

- block : 상자(레이아웃) 요소이다.

- inline : 글자 요소이다.

- inline-block : 글자 + 상자 요소이다.

 

• 따로 지정해서 사용하는 값 3가지

- flex : 플렉스 박스(1차원 레이아웃)이다. x축이든 y축이든 하나의 축만을 가지고 레이아웃을 잡는다.

- grid : 그리드(2차원 레이아웃)이다. 행과 열의두 가지 차원을 가지고 레이아웃을 잡는다.

- none : 보여짐 특성이 없고, 화면에서 사라진다.

 

• 기타 속성 : table, table-row, table-cell 등

 

 

 

 

18. opacity

 

- 요소의 투명도를 의미한다.

- 1 : 기본값이며, 완전한 불투명 상태이다.

- 0~1 : 0부터 1 사이의 소수점 숫자를 속성값으로 사용할 수 있으며, 0은 완전한 투명을 의미한다.

 

 

See the Pen Untitled by posey (@poseybutter) on CodePen.

 

 

19. font-style

 

- 글자의 기울기를 의미한다.

- normal : 기본값이며, 기울기가 없는 상태이다.

- italic : 이텔릭체이며, 글자가 기울어진 상태이다.

- oblique : 마찬가지로 기울어진 글자이다. (잘 사용하지 않음)

 

 

 

 

20. font-weight

 

- 글자의 두께(가중치)를 의미한다.

- normal, 400 : 기본 두께 값이다.

- bold, 700 : '두껍게' 라는 뜻이다.

- bolder : '상위(부모) 요소보다 더 두껍게' 라는 뜻이다. (잘 사용하지 않음)

- lighter : '상위(부모) 요소보다 더 얇게' 라는 뜻이다. (잘 사용하지 않음)

- 100~900 : 100 단위의 숫자 9개로 나타내며, normal과 bold 이외의 두께이다.

 

 

21. font-size

 

- 글자의 크기를 의미한다.

- 16px : 기본 크기이다.

- 단위 : px, em, rem 등 단위로 지정한다.

- % : 부모 요소의 폰트 크기에 대한 비율이다. (잘 사용하지 않음)

- smaller : '상위(부모) 요소보다 작은 크기' 라는 뜻이다. (잘 사용하지 않음)

- larger : '상위(부모) 요소보다 큰 크기' 라는 뜻이다. (잘 사용하지 않음)

- xx-small~xx-large : '가장 작은 크기~가장 큰 크기까지'라는 뜻이며, 7단계의 크기를 지정한다. 

(잘 사용하지 않음)

 

 

22. line-height

 

- 한 줄의 높이를 의미하며, 행간과 유사하다. 되도록이면 배수의 개념을 이용해 폰트의 크기가 그때그때

바뀌더라도 항상 줄 높이는 같은 비율을 유지하도록 하는 것이 좋다.

- normal : 브라우저의 기본 정의를 사용한다. (잘 사용하지 않음)

- 숫자 : 요소의 글꼴 크기의 배수로 지정한다.

- 단위 : px, em, rem 등 단위로 지정한다.

- % : 요소의 글꼴 크기에 대한 비율이다. (잘 사용하지 않음)

 

 

See the Pen Untitled by posey (@poseybutter) on CodePen.

 

 

23. font-family

 

- 글자의 서체를 지정하는 속성이다.

- 기본 문법 : font-family: 글꼴1, "글꼴2", ...글꼴계열(필수 작성);

* 띄어쓰기 등 특수문자가 포함된 글꼴 이름은 큰 따옴표로 묶어야 한다.

- sans-serif : 고딕체 계열이며, 가장 자주 사용한다.

- serif : 바탕체 계열이다. (잘 사용하지 않음)

- monospace : 고정너비(가로폭이 동등) 글꼴 계열이며, 가독성이 좋다. (잘 사용하지 않음)

- cursive : 필기체 계열이다. (잘 사용하지 않음)

- fantasy : 장식 글꼴 계열이다. (잘 사용하지 않음)

 

 

24. color

 

- 글자의 색상을 지정하는 속성이다.

- rgb(0,0,0) : 기본값으로 검정색이 설정되어 있다.

- 색상 : 기타 지정 가능한 색상들이 있다.

 

See the Pen Untitled by yellowposey (@yellowposey) on CodePen.

 

 

25. text-align

 

- 문자의 정렬 방식을 지정하는 속성이다.

- left : 기본값으로 왼쪽 정렬로 설정되어 있다.

- right : 오른쪽 정렬

- center : 가운데 정렬

- justify : 양쪽 정렬 (잘 사용하지 않음)

 

 

26. text-decoration

 

- 문자의 장식(선)을 지정하는 속성이다.

- none : 기본값으로, 장식이 없다.

- underline : 밑줄

- overline : 윗줄 (잘 사용하지 않음)

- line-through : 중앙 선 

 

 

27. text-indent

 

- 문자의 첫 줄의 들여쓰기를 지정하는 속성이다. 음수를 사용할 수 있으며, 반대는 내어쓰기(outdent)이다.

- 0 : 기본값으로, 들여쓰기가 없다.

- 단위 : px, em, rem 등 단위로 지정한다.

- % : 요소의 가로 너비에 대한 비율이다. (잘 사용하지 않음)

 

See the Pen Untitled by yellowposey (@yellowposey) on CodePen.

 

 

28. background-color

 

- 요소의 배경 색상을 지정하는 속성이다.

- transparent : 기본값으로, 투명하다.

- 색상 : 지정 가능한 색상으로 지정하면 된다.

 

 

29. background-image

 

- 요소의 배경 이미지를 삽입하는 속성이다.

- none : 기본값으로, 이미지가 없다.

- url("경로") : 이미지 경로를 설정하는 함수 개념이다.

 

See the Pen Untitled by yellowposey (@yellowposey) on CodePen.

 

 

배경 색상은 이미지 뒤에 나오게 된다.

 

 

30. background-repeat

 

- 요소의 배경 이미지를 반복시키는 속성이다.

- repeat : 기본값으로, 이미지를 수직, 수평 반복시킨다.

- repeat-x : 이미지를 수평 반복시킨다.

- repeat-y : 이미지를 수직 반복시킨다.

- no-repeat : 어느 쪽으로도 반복시키지 않는다.

 

See the Pen Untitled by yellowposey (@yellowposey) on CodePen.

 

 

31. background-position

 

- 요소의 배경 이미지 위치를 지정하는 속성이다.

- 0% 0% : 기본값으로, 0~100% 사이의 값이다. (잘 사용하지 않음)

- 방향 : 방향1 방향2로 두 방향까지 설정할 수 있으며, top, bottom, left, right, center가 있다.

- 단위 : px, em, rem 등 단위로 지정한다.

 

See the Pen Untitled by yellowposey (@yellowposey) on CodePen.

 

See the Pen Untitled by yellowposey (@yellowposey) on CodePen.

 

 

32. background-size

 

- 요소의 배경 이미지 크기를 지정하는 속성이다.

- auto : 기본값으로, 이미지의 실제 크기로 설정한다.

- 단위 : px, em, rem 등 단위로 지정한다.

- cover : 비율을 유지하고, 요소의 더 넓은 너비에 맞춘다.

- contaion : 비율을 유지하고, 요소의 더 짧은 너비에 맞춘다.

 

See the Pen Untitled by yellowposey (@yellowposey) on CodePen.

 

See the Pen Untitled by yellowposey (@yellowposey) on CodePen.

 

 

33. background-attachment

 

- 요소의 배경 이미지가 어떠한 스크롤의 특성을 가지고 삽입되는지에 대해 설정해주는 속성이다.

- scroll : 기본값으로, 이미지가 요소를 따라서 같이 스크롤된다.

- fixed : 이미지가 뷰포트에 고정되어서 같이 스크롤 되지 않는다.

- local : 요소 내 스크롤 시 이미지가 같이 스크롤 (잘 사용하지 않음)

 

See the Pen Untitled by posey (@poseybutter) on CodePen.

 

See the Pen Untitled by posey (@poseybutter) on CodePen.

 

background-attachment: fixed;를 통해서 결과적으로는 요소가 아닌 뷰포트, 즉 화면에 배경 이미지가 고정되는 것이기 때문에 스크롤하면

HTML 요소는 올라가지만 배경 이미지는 고정되는 효과를 구현할 수 있다. 

이렇게 background-attachment: fixed;를 통해서 패럴렉스 예제들을 손쉽게 구현할 수 있다.

 

나중에 예제를 통해 더 자세히 알아보도록 하겠다.

 

 

34. position

 

- 요소의 위치 지정 기준을 지정하는 속성이다. 어떠한 요소를 배치할 때는 기준을 잡고 나서 위치 값을 설정해야 한다.

  position과 같이 사용하는 CSS 속성들에는 top, bottom, left, right, z-index가 있고, 모두 음수를 사용할 수 있다.

- static : 기본값으로, 기준이 없다는 뜻이다.

- relative : 요소 자신을 기준으로 한다.

- absolute : 위치 상 부모 요소를 기준으로 한다.

- fixed : 뷰포트(브라우저)를 기준으로 한다.

- sticky : 스크롤 영역을 기준으로 한다. (잘 사용하지 않음)

 

See the Pen Untitled by posey (@poseybutter) on CodePen.

 

 

35. top, bottom, left, right

 

- 요소의 각 방향별 거리를 지정하는 속성이다.

- auto : 기본값으로, 브라우저가 계산한다.

- 단위 : px, em, rem 등 단위로 지정한다.

 

See the Pen Untitled by posey (@poseybutter) on CodePen.

 

 

---

 

CSS 속성 요점 정리

 

* width와 height 속성의 역할은 무엇인가?

 

: width는 요소의 가로 너비를 지정해주고, height는 요소의 세로 너비를 지정해준다.

 

 

* width와 height 속성의 기본값은 무엇인가?

 

: width와 height의 기본값은 auto이다.

 

 

* max-width와 max-height 속성의 기본값은 무엇인가?

 

: max-width와 max-height의 기본값은 none이다.

 

 

* min-width와 min-height 속성의 기본값은 무엇인가?

 

: min-width와 min-height의 기본값은 0이다.

 

 

* margin 속성의 역할은 무엇인가?

 

: margin은 요소의 외부 여백을 지정하는 역할을 한다.

 

 

* margin: 40px 30px 20px; 이 코드에서 30px은 어느 방향을 의미하는가?

 

: 30px은 왼쪽/오른쪽 방향을 의미한다.

 

 

* margin: 20px 10px; 이 코드에서 20px은 어느 방향을 의미하는가?

 

: 20px은 위쪽/아래쪽 방향을 의미한다.

 

 

* padding 속성의 역할은 무엇인가?

 

: padding은 요소의 내부 여백을 지정하는 역할을 한다.

 

 

* padding: 20px 10px 40px 30px; 이 코드에서 30px은 어느 방향을 의미하는가?

 

: 30px은 왼쪽 방향을 의미한다.

 

 

* padding 속성의 특징은 무엇인가?

 

: padding은 요소의 내부 여백을 추가하기 때문에 요소의 크기가 늘어난다.

 

 

* border 속성의 특징은 무엇인가?

 

: border는 padding과 마찬가지로 테두리 선이 들어가면 그만큼 요소의 크기가 늘어난다.

 

 

* 두께 2px, 종류 실선, 색상 빨강의 테두리 선을 코드로 작성하시오.

 

: border: 2px solid red;

 

 

* width: 100px;, padding: 20px;, border: 1px solid red;

이 코드가 지정한 요소의 실제 가로 너비는?

 

: 142px

 

 

* width: 100px;, padding: 20px;, border: 1px solid red;, box-sizing: border-box;

이 코드가 지정한 요소의 실제 가로 너비는?

 

: 100px

 

 

* box-sizing 속성의 기본값은 무엇인가?

 

: box-sizing의 기본값은 content-box이다.

 

 

* 요소 넘침을 잘라낼 때 사용하는 속성과 값은?

 

: overflow: hidden;

 

 

* overflow 속성의 기본값은 무엇인가?

 

: overflow의 기본값은 visible이다.

 

 

* HTML <a></a>에 가로 너비를 지정하기 위해 사용해야 하는 속성과 값은?

 

: display: block;

 

 

* opacity 속성의 기본값은 무엇인가?

 

: opacity 의 기본값은 1이다.

 

 

* 글자 기울기를 지정할 때 사용하는 속성과 값은?

 

: font-style: italic;

 

 

* 글자를 두껍게 지정할 때 사용하는 속성과 값은?

 

: font-weight: bold/700;

 

 

* 고딕체 계열을 의미하는 속성 값은?

 

: font-family: sans-serif;

 

 

* line-height 속성을 사용할 때 권장하는 단위는?

 

: 배수

 

 

* 문자를 수평 정렬하는 속성은?

 

: text-align

 

 

* 문자를 들여쓰는 속성은?

 

: text-indent

 

 

* text-decoration 속성의 기본값은 무엇인가?

 

: text-decoration의 기본값은 none이다.

 

 

* 요소 배경에 이미지를 삽입하는 속성은?

 

: background-image

 

 

* 요소 배경에 이미지를 삽입할 때 사용하는 함수는?

 

: url("이미지경로")

 

 

* 배경 이미지를 반복하지 않는 속성 값은?

 

: background-repeat: no-repeat;

 

 

* 요소가 스크롤 될 때 배경 이미지는 뷰포트에 고정되는 속성 값은?

 

: background-attachment: fixed;

 

 

* position 속성의 기본값은 무엇인가?

 

: position의 기본값은 static이다.

 

 

* 위치상 부모 요소를 기준으로 배치하는 position 속성의 값은?

 

: position: absolute;

 

 

* 뷰포트를 기준으로 배치하는 position 속성의 값은?

 

: position: fixed;

 

 

*display 속성이 block 값으로 바뀌는 position 속성의 값은?

 

: position: absolute, position: fixed;

 

 

* "display: flex;가 지정된 요소의 자식 요소를 Flex???이라 부릅니다."에서 ???에 들어갈 용어는?

 

: Flex Items

 

 

* Flex Container의 주 축을 지정하는 속성은?

 

: flex-direction

 

 

* flex-wrap 속성의 기본값은 무엇인가?

 

: flex-wrap의 기본값은 nowrap이다.

 

 

* 교차 축(Cross-axis)의 한 줄 정렬을 위한 속성은?

 

: align-items

 

 

* Flex Item의 증가 너비를 지정하는 속성은?

 

: flex-grow

 

 

* flex-grow 속성의 기본값은 무엇인가?

 

: flex-grow의 기본값은 0이다.

 

 

* flex-shrink 속성의 기본값은 무엇인가?

 

: flex-shrink의 기본값은 1이다.

 

 

* transition-property 속성의 기본값은 무엇인가?

 

: transition-property의 기본값은 all이다.

 

 

* transition 단축 속성의 필수 포함 속성은?

 

: transition-duration

 

 

* transform 속성의 2D 회전을 지정하는 변환 함수는?

 

: rotate()

 

 

* 관찰 대상의 부모 요소에 원근법을 지정하는 속성은?

 

: perspective

 

 

* skewX 변환 함수에서 값으로 사용하는 단위는?

 

: deg

 

 

* perspective 함수에서 원근 거리가 적용되는 대상은?

 

: 관찰 대상 자체

 

 

* 요소의 뒷면을 숨기는 속성과 값은?

 

: backface-visibility: hidden;

 

 

 

 

 

 

* 내용, 이미지 출처

: Fastcampus