CSS 기본 - 잊고 넘어가기 쉬운 것들에 대한 복습

CSS 기본

  CSS란 Cascading Style Sheets의 약자로, W3C에서 만들었으며 HTML이 화면 등에서 어떻게 표시될지 묘사하는 역할을 합니다.

 

  웹 프론트엔드 개발을 하기 위해서는 CSS를 계속해서 접하게 되고 필수적으로 알아야하기 때문에 HTML과 함께 굉장히 사소하고 그저 자주 쓰는 기술 정도로 치부되는 경우가 있는데, 특히 주니어 단계에서는 은근히 모르고 넘어가거나 잊어서 다시 찾아보게 되는 일이 종종 있습니다. 이에 기본 내용을 복습하면서 잊고 넘어가기 쉬운 부분들 혹은 머릿속에 잘 녹아들어있어야만 하는 것들에 대해서 기록해봅니다.

 

1. 선택자 (Selector)

1-1. 기본 선택자

(1) 유형 선택자(Type selector) : 익히 알다 싶이 명시된 요소를 선택하며, 예를 들어 p태그의 경우 p 이후에 이어지는 선언 블럭의 형태로 작성됩니다.

(2) ID 선택자(ID selector) : '#' 이후에 ID명으로 나타내며, ID명을 가진 요소를 선택합니다. 한 페이지에서 ID는 유일(unique)합니다. 참고로 ID명은 숫자로 시작할 수 없습니다.

(3) class 선택자(Class selector) : '.' 이후에 클래스명으로 나타내며, 클래스명을 가진 요소들을 선택합니다. '.'이전에 요소 선택자를 표기하는 경우, 해당 요소 중에서 명시한 클래스명을 가진 요소를 선택하게 됩니다. 클래스명 또한 숫자로 시작할 수 없습니다.

(4) 전역 선택자(Universal selectors) : '*' 로 나타내며, 페이지의 모든 요소에 대한 선택자 역할을 합니다.

1-2. 그룹 선택자

여러 선택자를 ',' 로 구분하여 사용하는 경우를 그룹 선택자라고 합니다.

 

h1, h2, p {
  text-align: center;
  color: red;
}

 

1-3. 속성 선택자

/* <a> elements with an href ending ".org" */
a[href$=".org"] {
  font-style: italic;
}

 

(1) [attribute=“value”] : 속성과 값이 일치하는 요소를 선택합니다.
(2) [attribute~=“value"] : 속성이 일치하고 값에 특정 단어가 들어간 요소를 선택합니다.
(3) [attribute|=“value"] : 속성이 일치하고 값에 특정 단어이거나 특정 단어와 하이픈(-)으로 연결된 값인 요소를 선택합니다.
(4) [attribute^=“value"] : 속성이 일치하고 값이 특정 단어로 시작하는 요소를 선택합니다.
(5) [attribute$=“value"] : 속성이 일치하고 값이 특정 단어로 끝나는 요소를 선택합니다.
(6) [attribute*=“value"] : 속성이 일치하고 값이 특정 단어가 포함된 요소를 선택합니다.

 

2. 결합자(조합자) (Combinators)

  조합자라고도 불리는 CSS의 결합자는 선택자 사이의 관계를 설명합니다.

 

2-1. 자손 결합자

  ' '(스페이스)로 선택자들을 결합하며, 특정 요소 하위의 모든 해당 요소들에 스타일을 적용합니다.

2-2. 자식 결합자

  '>'로 선택자들을 결합하며, 특정 요소의 바로 하위의 해당 요소들에 스타일을 적용합니다. (자손 결합자와의 차이 주목)

2-3. 인접 형제 결합자

  '+'로 선택자들을 결합하며, 특정 요소 바로 다음에 오는 요소에 스타일을 적용합니다.

2-4. 일반 형제 결합자

  '~'로 선택자들을 결합하며, 특정 요소와 부모 요소가 같을 때, 뒤에 오는 요소들에 스타일을 적용합니다.

/* Paragraphs that are siblings of and
   subsequent to any image */
img ~ p {
  color: red;
}

 

3. CSS 삽입 방법에 따른 적용 우선순위

  CSS 삽입 방법에는 External, Internal, Inline의 세 가지 방법이 있습니다. 특정 요소에 대한 스타일 선언이 중복될 경우, 우선순위가 높은 것이 적용되게 됩니다.

 

  External과 Internal 선언이 중복될 경우, HTML 파일의 head태그 내의 선언 순서에 따라, 즉 style sheet를 읽어들인 최신 순서대로 스타일 적용이 됩니다.

 

  전체적인 우선순위는 다음과 같습니다. 앞에 위치할수록 우선순위가 높습니다.

Inline -> External/Internal -> 브라우저 기본값

 

4. Shorthand

  CSS 스타일 선언은 때에 따라 다음과 같이 Shorthand를 지원하기도 합니다.

div {
  background: #ffffff url("img_tree.png") no-repeat right top;
}

 

  또한 margin, padding, border-width 등의 경우에도 다음과 같은 Shorthand를 지원합니다.

div {
  border-width: 24px 12px 8px 16px;
}

  위처럼 값이 네 개가 있으면 상-우-하-좌의 순서로 적용되며, 값이 두 개만 있으면 상하-좌우의 순서로 적용되고, 세 값이 있으면 상-좌우-하 순서로 적용됩니다.

 

5. Margin 중첩

  두 요소의 마진이 겹칠 때(이를테면 위에 있는 요소의 아래 방향 마진과, 아래에 있는 요소의 윗 방향 마진) 겹친 두 margin 중 값이 큰 margin만 적용됩니다. 이런 현상은 좌우로 겹칠 때는 일어나지 않지만 상하로 겹칠 때만 일어납니다.

 

6. Padding/Border/Margin과 요소의 Width/Height

  width가 고정인 요소에 padding을 줄 때 요소의 width가 늘어날 수도 있습니다.

 

  height과 width값은 padding, border, margin을 포함하지 않기 때문입니다.  height/width 값은 그 안의 내용(content area)에 대한 높이와 너비를 결정합니다. 

 

  이에 대한 팁으로 위와 같은 효과를 피하려면 box-sizing: border-box; 등의 속성을 사용하는 것이 좋습니다.

 

  번외로, max-width 속성을 사용하면 브라우저가 작은 화면에서도 긴 요소때문에 화면에 스크롤바를 추가하지 않게 할 수 있습니다.

 

7. Outline

  outline은 border 바깥의 영역에 그려집니다. 그렇기에 다른 요소를 덮을수도 있습니다. outline을 적용할 때에는 outline-style 속성이 필수로 정의되어야 합니다.

 

8. Font

  font-family 속성값 부여시 값이 한 단어가 아니면 double quote로 묶어줘야합니다.

 

  Font size 단위를 동적 크기인 em이나 rem으로 설정시, 브라우저의 폰트 확대 축소 기능에 반응하도록 할 수 있습니다.

 

  rem은 root, 즉 최상위 요소인 HTML의 font-size 크기를 기준으로 하며, em은 상위 요소의 font-size 크기를 기준으로 삼는다는 차이점이 있습니다. 그렇기에 요소 계층 간 font-size의 관계를 신경쓰지 않기 위해서는 rem을 선호하는 쪽이 좋습니다.

 

9. 가상 클래스 (Pseudo-class)

가상 클래스는 요소의 특별한 상태를 정의하기 위해 사용됩니다.

 

selector:pseudo-class {
  property: value;
}

 

:first-child, :last-child, :nth-child(n) 과 같은 가상 클래스들이 있습니다.

 

10. 가상 요소(Pseudo-element)

요소의 특정 부분을 스타일링하기 위해 사용됩니다.

 

selector::pseudo-element {
  property: value;
}

 

::before, ::after, ::marker, ::selection 등이 있습니다.

 

11. Link와 가상 클래스

  link, 즉 a태그와 관련이 깊은 가상 클래스에는 :link, :visited, :hover, :active 등이 있습니다.

 

  여기에는 주의할 점이 있는데, :hover 스타일 선언은 :link 스타일 선언과 :visited 스타일 선언 이후에 나타나야 하며, :active 스타일 선언은 :hover 선언 이후에 나타나야 한다는 것입니다.

 

  이외에도 link 등에 줄 수 있는 특이한 CSS 속성은 cursor이며 속성 값으로는 auto, crosshair, default, e-resize, help, move, nw-resize, pointer, progress, text 등을 가집니다.

 

12. List

  ul, ol 태그 등의 List는 다음과 같은 CSS 속성을 가질 수 있습니다.

 

- list-style-type: 속성 값으로 circle, square, upper-roman 등을 가질 수 있으며 값을 none으로 설정하면 구분점을 나타내지 않습니다.

- list-style-image: 이미지로도 구분점을 나타낼 수 있습니다. (참고로 url의 이미지 이름은 읽기 쉬운 것으로 작성하는 편이 좋습니다)

ul {
  list-style-image: url(‘squarePurple.gif');
}

 

- list-style-position

 

13. Display

  display: none;과 visibility: hidden;의 차이점을 아시나요?

 

  display: none; 은 렌더링 자체를 하지 않지만, visibility: hidden; 은 사용자에게는 보이지 않지만 해당 요소만큼의 영역을 차지하고 있습니다.

 

14. Position

14-1. static

  기본값이며 요소를 일반적인 흐름에 따라 배치합니다. top, bottom, left, right, z-index 속성에 영향 받지 않습니다.

14-2. relative

  요소를 일반적인 흐름에 따라 배치하며 top, bottom, left, right 속성에 영향 받습니다. 단, 이와 같은 offset을 적용해도 다른 요소에는 영향을 주지 않기 때문에 레이아웃에서 요소가 차지하는 공간은 static일 때와 같습니다.

14-3. fixed

  요소를 일반적인 문서 흐름에서 제거하고, 페이지 레이아웃에 공간도 배정하지 않습니다. 뷰포트를 기준으로 위치하게 됩니다. 스크롤 움직여도 고정 위치에 있습니다.

14-4. absolute

  요소를 일반적인 문서 흐름에서 제거, 페이지 레이아웃에 공간도 배정하지 않습니다. 부모를 기준으로 상대적으로 위치되며, 다른 요소를 덮을 수도 있습니다.

14-5. sticky

  조상 중 스크롤이 되는 요소를 기준으로 사용자의 스크롤 위치에 기반하여 위치하게 됩니다. 스크롤 위치에 따라 relative와 fixed를 오가는 방식입니다. IE에서는 지원하지 않으며, 사파리에서는 -webkit 접두사가 필요합니다. 반드시 top, right, bottom, left 중에 기준점을 하나 선언 해주어야 합니다.

 

15. z-index

  z-index는 position이 설정된 요소 혹은 flex 요소에서만 동작합니다. 따로 z-Index 설정 없이 요소가 겹치면 HTML 코드에서 가장 마지막에 등장할 수록 위로 올라옵니다.

 

16. Overflow

16-1. visible

  기본값이며, 요소 box 범위를 벗어나며 그려집니다.

16-2. hidden

  요소 box를 벗어나면 그려지지않습니다.

16-3. scroll

  요소 box를 벗어나지 않으며 대신에 스크롤바가 생깁니다.

16-4. auto

  scroll과 비슷한데, 필요할 때에만 스크롤바가 생깁니다.

 

17. inline-block

  inline-block과 inline의 차이점은 width, height, margin, padding 을 설정할 수 있다는 것입니다. 반면에 block과의 차이점은 line break가 일어나지 않는다는 것 입니다.

 

19. 선택자 중복시 CSS 스타일 적용 우선순위(내림차순)

(1) inline style

(2) ID 선택자

(3) 클래스 선택자 / 가상 클래스 / 속성 선택자

(4) 요소 선택자 / 가상 요소

(5) 전역 선택자

* 추가적으로 같은 우선순위라면, 가장 나중에 선언된 것이 우선순위가 높습니다.

 

20. !important

  우선순위에 상관 없이 style을 최우선적으로 적용하는 키워드입니다. 이 우선순위를 덮어쓰려면 추가적으로 !important를 쓰는 방법밖에 없습니다. 이 때문에 !important를 남용하면 CSS 코드가 더러워지고 디버깅이 어려워지는 점을 주의해야 합니다.

 

21. Math Function

21-1. calc

  속성값을 calc(expression) 과 같이 표현할 수 있으며 expression 부분에는 사칙연산식이 들어갑니다.

21-2. max

  속성값을 max(...) 과 같이 표현할 수 있으며 인자로 넘겨지는 것들 중 가장 큰 것을 취합니다.

21-3. min

  속성값을 min(...) 과 같이 표현할 수 있으며 인자로 넘겨지는 것들 중 가장 작은 것을 취합니다.

 

 

22. 추가적인 Float과 Clear 설명

https://goddino.tistory.com/66

[css] float 속성( float:left clear: both ::after) (ft. 실무사용 꿀팁)

https://naradesign.github.io/float-clearing.html

float을 clear하는 방법.